One of the main reasons I started this blog, was to give me a place that I could use an excuse to experiment with new things that I found interesting. True to that goal I have spent some time over that last week completely modifying the underlying structure and technologies that I use to author and host this blog. Here is a quick rundown of some of the changes.
Hugo
Hugo is another static site generator, much like Jekyll, but it runs on Go instead of Ruby. I have been interested in Go since it was announced in 2009 and have been looking for a reason to learn more about it ever since, so I decided to transition the blog to Hugo as a first step. The most recent release of Hugo (v0.15) includes a Jekyll site import utility which automates most of the conversion of existing posts from a Jekyll site to Hugo which cemented my decision to switch. Two other selling points for Hugo are that the Hugo command line utility runs on any operating system, as long as Go is installed and its really fast.
Editing the site now is a simple as running hugo serve at the top level directory of the site. This builds the site, and launches a small webserver running on localhost:1313. It automatically watches the project directory and includes LiveReload plugin which automatically refreshes the browser when changes are saved. The site currently takes Hugo 23ms to build so changes are instantly visible in the browser after hitting save.
Theme
Hugo also has an impressive list of beautiful and free themes you can use to get up and running quickly. I decided that using the Jekyll importer and a pre-built theme would be too easy. So I decided to build my own theme in order to really learn how Hugo works and not just build my blog on a technology I don’t fully understand. I started by copying one of the existing themes, and modifying it to fit what I wanted, but ended up replacing most, if not all, of what I started with from the original theme. The decision to build my own theme did have its intended effect of forcing me to learn a significant amount about how Hugo works, and I feel much more comfortable digging into the innards of my site than I did when I was using Jekyll.
The colors are all based on Ethan Schoonover’s Solarized theme. I have spent an unhealthy amount of time getting this color scheme working on every terminal and code editor I use, so it seemed natural that I should spend even more time styling my blog with the same colors.
Codeship
One of the benefits of using Jekyll was that GitHub Pages support it natively, you can read more about that here. If you are using GitHub Pages to serve a statically generated site, you need to have two branches that you manage for your site:
- master - contains the code for the generator and is where you would work on new content.
- gh-pages - contains the static generated content that will be served by GitHub Pages.
This extra branch management, while not terrible, didn’t sound like a lot of fun, so I decided to use Codeship, a Continuous Delivery service, to handle the building and publishing steps for the blog. After creating an account with Codeship I setup a new Go project and configured the integration with GitHub. When Codeship notices a change in the GitHub repository it spins up a Docker container with Go installed, and pulls the code from GitHub into the container. Control is then handed over to the following test script:
go get -v github.com/spf13/hugo
hugo
All this script does is download the latest version of Hugo and build the site. If the build fails, Codeship aborts and alerts me that the build failed. If it builds successfully, then Codeship goes on to its deploy step. One of the built-in deployment options Codeship offers is Amazon S3.
AWS S3
Amazon S3 buckets can easily be set up to host static web sites. After selecting a name for your bucket, you can select the option to ‘Enable website hosting’ for the bucket then specify the index document, and error document. After setting the bucket up to host static content, provide Codeship with the needed information to access the bucket and it will automatically upload your generated site to the bucket when the build is successful.
I now have the exact same workflow for publishing the blog git push, but I am using Hugo, GitHub, Codeship and AWS instead of Jekyll, Vagrant, GitHub and Github Pages.