Moving to Hugo

I have decided to move my blog from Ghost to Hugo. I have enjoyed using Ghost, but I wanted to play around with some static site generators and host it with GitHub Pages. I have been using a Ghost, Docker and Digital Ocean setup and have enjoyed it, but it was time to break something.

Hugo

After doing some research and playing around with a few different static site generators (Cryogen, GatsbyJS, Hexo and Phenomic, to name a few), I decided Hugo worked best for my needs. It is easy to get set up and there are quite a few good looking themes. I was up and running quickly and was able to copy and paste my blog content over from my Ghost blog. I haven’t been writing much, therefore I didn’t have much to copy over, but if you have a lot of content, they have a few tools that can help ease the pain of transferring your content.

Once I had my blog looking fancy, I decided it was time to get it up and running with GitHub Pages. This is where I ran into some hiccups. Of course, an easy solution would be to checkout my gh-pages branch and run hugo —themes=MY_THEME, then delete everything except the /public directory. I don’t like this option and would prefer to just have it deploy when I do a git push. So I opened up my trusty browser and started searching for a better solution.

Wercker

I briefly tried using Travis CI, but I couldn’t figure out how to get it to work properly. I have very limited experience with continuous integration tools and this was probably my downfall. However, Wercker was fairly straightforward once I started figuring things out. I have two pipelines set up to build one after another once I push to the master branch. The first pipeline builds the hugo site and the second deploys it to my gh-pages branch. I have forked the theme I’m using and made a few small changes to it to suit my needs. So during my build process, I pull that from my forked repository.

Setting Up Wercker

I created a new application in Wercker and linked it to my repository that houses the code for my Hugo blog. The first pipeline I created was a build pipeline. I added a $GIT_TOKEN environment variable to both the build and deploy pipelines. You will need to generate a token in your GitHub Developer Settings and add it as the value in Wercker. Make sure to check the repo checkbox. In the Workflows tab, I clicked the Add new pipeline and added a deploy pipeline. Then I chained them together by clicking the + next to the build pipeline and added my deploy pipeline.

I’m using the arjen/hugo-build and leipert/git-push scripts to help out with building and deploying my blog. My wercker.yml file is as follows:

box: debian
build:
	steps:
		- script:
			name: install git
			code: |
				apt-get update
				apt-get -y install git
		- script:
			name: download theme
			code: |
				git clone https://github.com/krjordan/hugo-redlounge.git themes/hugo-redlounge
				rm -rf themes/hugo-redlounge/.git
		- arjen/[email protected]:
			version: "0.18.1" 			# Hugo version
			theme: hugo-redlounge
			disable_pygments: true		# Disable pygments because I'm using Prism.js

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: gh-pages
			repo: krjordan/personal-blog
			gh_pages_domain: mycodingblog.com    # Optional Custom Domain

Triggering the Build

Once this is set up, it should automatically build and push the /public directory contents to the gh-pages branch. It should also set up a CNAME file with the domain name specified with the gh_pages_domain variable.

Conclusion

I’m happy with the overall setup. Setting up Hugo was fairly quick and easy. Deploying it, not so much, but I was finally able to get everything up and running like I wanted. So, I broke some things, fixed some things and got a new theme for my blog.