Continuous integration with Hugo and Wercker
As I recently switched from Jekyll to Hugo, I needed a new way to enable continuous integration for my blog.
New to CI?
Continuous integration, or CI, means that your code is automatically built, tested and/or deployed after each push. Every time you push some commits to a remote repository, the code in that repository is being built.
I usually have a branch called develop to which I push fresh code. Then a CI tool checks if that code builds properly and if it does, I merge it to my master branch. It’s a lot like Git Flow.
What about Hugo and GitHub Pages?
You could setup a CI tool to build your code after every push on every branch and deploy it to GitHub Pages after a successful build on your stable/master branch.
In comes Wercker
Wercker simplifies CI a lot and relies on Docker for its build environments. It also allows you to deploy your builds to different environments (e.g. production, staging, testing…) Hugo has a guide about how to set it up, but it’s a little bit outdated. I might just send a pull request with an update in a few days. Wercker also has a lot of documentation. So with the examples below, you should be able to easily walk through the setup.
Setting it up
- Create a new Wercker app based on the repository containing your Hugo source code and give Wercker access rights. You can leave everything else on the default settings. If you’d like a badge showing your build status, make sure your app is public.
- Next, edit your app settings and create a custom deploy target including a protected environment variable called
- Finally, add a file called wercker.yml to your repository with the code below. Change it to fit your needs.
box: debian build: steps: - script: name: install git code: | apt-get update && apt-get install git -y - script: name: initialize git submodules code: | git submodule update --init --recursive - arjen/hugo-build: version: "0.14" theme: crisp deploy: steps: - script: name: install git code: | apt-get update && apt-get install git -y - leipert/git-push: gh_oauth: $GIT_TOKEN basedir: public clean_removed_files: true branch: master repo: SamuelDebruyn/samueldebruyn.github.io gh_pages_domain: chipsncookies.com
Obviously, you have to change the following variables:
version: the Hugo version you use
theme: the theme you use
branch: the branch on GitHub Pages you wish to publish on (should be
masterfor personal/organization pages and
gh-pagesfor project pages)
repo: the repository you wish to publish your pages in (should be
username/username.github.iofor personal/organization pages and
username/project-repofor project pages)
gh_pages_domain: a custom CNAME (optional, read more)
Push a commit with that file and Wercker should happily start building and deploying your code!
A few examples
- the Hugo source code for this blog: https://github.com/SamuelDebruyn/chipsncookies-site
- the wercker app for this blog: https://app.wercker.com/#applications/5586dcbdaf7de9c51b02b0d5
- the generated source code for this blog: https://github.com/SamuelDebruyn/samueldebruyn.github.io
In case you have any further questions, remarks or suggestions about this post, feel free to drop me a tweet or an email! You can also find me on Slack on the Xamarin Chat. I go by the username sam_d.
About the author
Sam is a C# developer who builds mobile (cross platform) apps with Xamarin. He's been a certified Xamarin mobile developer since 2016. Sam likes to experiment with all kinds of programming languages and software frameworks. More info