This post was originally published in my blog
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
Hexo is a static site generator built using JavaScript. There's no specific reason for me to use it here, I just found a good template through Hexo :p. There are others that you can try like Jekyll (have seen this being used very often), Hugo etc. Here's an exhaustive list.
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 and responsiveness. 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 my website is Cactus. As you can see it is very minimalistic which is what I was going for.
Customising
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.
Deployment
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 and can be used for local testing of your site.
There you go, you now have a fully functioning website.
If you've any doubts or suggestions regarding the instructions above, hit me up on Twitter.
Top comments (2)
Great Article! Does anyone use Hexo and static site generators for client projects not just personal sites? Seems like these tools work really well but haven't go a large showcase.
Thanks!
I'm guessing most of these are used by individuals to create blogs. And it also depends on whatever themes are available. Maybe if someone created something like a product showcase page, maybe it'll start getting used more for client sites :p. Hexo has good support given that it has a lot of plugins and everything. A quick search on GitHub reveals millions of repos related to Hexo (websites and plugins).