Personal websites can be a great place to showcase your content, projects or just in general make a good first impression. This post is an attempt to reduce the burden, especially for novice.
What you’ll need and Why
The reason I’m using a static site generator here is to simplify the process creating the HTML pages itself. This way you don’t have to create the CSS and the JS code needed for proper detailed formatting. Static site generators allow you to create websites using just the information that matters the most, your content.
Choosing a theme
Hexo has a big theme library. There are templates for any and every requirement. The theme that is powering this website is Cactus. As you can see it is very minimalistic which is what I was going for.
Here comes the interesting part. The basic part of a Hexo site is the
_config.yaml file. YAML (YAML Ain’t Markup Language) is a configuration file format that is easy to read due to obvious semantics which aims to be “minimal”. YAML is a human-readable data serialization language. It is commonly used for configuration files, but could be used in many applications where data is being stored or transmitted. Here’s a list of the settings that Hexo provides. There’s also effortless support for integration of comments using Disqus and analytics using Google Analytics.
At this point if you’re happy with the look of your website you can go ahead to the Deployment section and deploy it to a hosting service of your choice. Or you can dig deeper and begin tweaking the CSS till you’re satisfied with the look.
You can test your website by typing
hexo generate && hexo server in a terminal in the directory where your
_config.yaml is placed.
I chose Firebase for deployment because it is relatively simple to use and I am a tad bit biased towards Google Products :p. Hexo’s documentation mentions quite a few ways to host your site.
Moving on, assuming you’ve Firebase CLI installed and are logged in, go ahead and initialise your project using
firebase init in the same directory as your
_config.yaml. Now just one more command
hexo generate && firebase deploy and there you go, your website is deployed! If you want to mimic the firebase environment for local testing you can also do
hexo generate && firebase serve. This is a bit different than
hexo server because as I said it mimics a firebase server locally.
There you go, you now have a full fledged website.
If you’ve any doubts or suggestions regarding the instructions above or this site in general, hit me up on Twitter.