Building A Serverless Website

The Plan

I wanted to start a tech blog of random things I’ve learned along my path. I’m hoping to help others, improve my communication skills, and hopefully have some fun. I also had some specific goals for building the site.

First, I wanted the site to be free (except for the hostname, which I already owned). I was inspired by things like github.io, as well as other sites, that publishes content for free.

Second, I wanted good and easy tech. In light of the first goal of wanting free, having an active database was unlikely. Honestly, an active database is overkill for a blog, and it just gives more overhead and security concerns. Something like git can be a database and there are tons of tools for it. I decided to go with a static site generator solution.

I looked into many options and tried several. I ended up settling on Hexo (CMS) + Github (DB) + Netlify (Builder + CDN). Hexo is a NodeJS project that allows the content to be written in markdown (yeah, the same as Wikipedia). This means that the content is portable and the CMS is familiar.

The Execution

I found an open source html/css design that I liked. Sadly, it wasn’t built for Hexo. I cloned the default “landscape” template from Hexo and modified it to look like the other design that I found. I probably spent most of my time, on UI/UX part.

Hexo by default uses styl for css. Ever heard of it? Yeah, me neither. Thankfully, they have good plugin support. I switched the css generator to scss. The html generator is ejs. I started switching to handlebars, and then other solutions, but ended up liking ejs. Hexo also offers a bunch of markup features for ejs that they call tag plugins.

_config.yml for scss

node_sass:
  includePaths:
    - node_modules

Now what about hosting? Netlify makes things quite easy and offers some good guides. I simply added a DNS entry for the cname matt.sloky.net on tool that manages my domain.

Publishing and Continuous Delivery

Now, all I have to do is add a new post, and then git push. In a couple minutes it gets automatically published! Since it is a static site, it isn’t quite as big of a deal, but I’m going to call this CD (Continuous Delivery) anyway! Ha!