How to deploy a blog the convoluted way

Note: As of December 2017 this is no longer valid, I currently use Netlify to deploy this blog

To setup this blog, I wanted to use something that is both easy to use via the terminal and caters to my preference for everything text-based. After some dabbling around with both Jekyll and Octopress, I decided to use Hugo mainly due to its LiveReload functionality and its extremely well written documentation.

How does it look like?⌗

You’re looking at it right now.

How do you write a new blog post?⌗

git clone git@github.com:Oro/blog.oro.nu.git 
cd blog.oro.nu
vagrant up
vim hugo/content/post/newpost.md # This is the difficult part
git add newpost.md
git commit -m "New blog post"
git push

Which systems or programs are involved?⌗

Vagrant: To create a portable development environment
VirtualBox: Does the heavy lifting of the VMs
SaltStack: Provisions Hugo inside the VM
Hugo: Used to build the site
Wercker: Compiles and deploys the site to GitHub Pages
GitHub and GitHub Pages: Holds the markdown that is built as well as the static pages themselves

Why xyz?⌗

Because I can.
– Marco Orovecchia - Probably not the first to say this

On a more serious note, I like the idea of having the same development environment on all machines, independent of their OS. Also because I like to tinker around.

Hacking locally⌗

To start hacking locally, you’ll need some prerequisites:

Vagrant
Virtualbox

If you want live updates as you save your blog entries, you’ll need

rsync
vagrant plugin vagrant-gatling-rsync

(more on that later)

If you want everything installed via CLI and you’re on Windows, I recommend Chocolatey. After installing it, you can simply execute

cinst virtualbox vagrant rsync -y

If you’re on MacOS, you can install it via homebrew:

brew cask install virtualbox vagrant -y

The setup⌗

The Vagrantfile¹ bootstraps a Ubuntu VM with a dedicated IP that you can connect to from your host machine (172.17.0.100).
2 folders are synced to this VM, namely the Hugo folder for the actual blog and the salt folder for bootstrapping. The salt folder contains a SaltStack state² to install and start Hugo.

After the bootstrapping is finished, you can access Hugo at http://172.17.0.100:1313/ .

Live reloading⌗

In order for LiveReload to work inside a virtual machine, I had to work around an issue with shared folders (See virtualbox-9069 and vagrant-351). This meant that instead of relying on Vagrant’s default shared folder implementation for VirtualBox, I used rsync instead.
After switching to rsync I had to call vagrant rsync-auto after each vagrant up which I did not like. To remedy this I used the plugin vagrant-gatling-rsync which automatically starts a rsync-watch after each vagrant up or vagrant reload.

Deployment⌗

Deploying the whole side - including build - is done by Wercker and the associated Wercker file³ in the repository. Every push to master triggers a build at my Wercker app and, if successful, deploys it immediately afterwards.