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 firstname.lastname@example.org: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?⌗
- To create a portable development environment
- Does the heavy lifting of the VMs
- Provisions Hugo inside the VM
- Used to build the site
- 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
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.
To start hacking locally, you’ll need some prerequisites:
If you want live updates as you save your blog entries, you’ll need
- 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 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/ .
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
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.