- Ryan Jordan
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.
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.
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
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 - firstname.lastname@example.org: 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
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.