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 Vagrantfile1 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 state2 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 file3 in the repository. Every push to master triggers a build at my Wercker app and, if successful, deploys it immediately afterwards.