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

  1. Hexo
  2. Firebase

Hexo is a static site generator built using JavaScript. There’s no specific reason for me to use it here, I just found the right template for 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. 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.

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 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.