02 Aug 2015, 00:32

Host your blog on Github with autodeploy

Share

I’ve always developed my own blog system, that’s a good way to learn a new langage.
But having to maintain a working server or hosting is no fun, there are some solutions like Jekyll or Hugo they generate static web pages based on some Markdown files you wrote.

As it’s just basic html files, they can be served by Github gh-pages.
It opens the door to blogging from anywhere without internet connection or your own laptop, just write some Markdown then publish to github later or event edit your new blog post from the Github editor.
Coupled with a Wercker auto deploy, publishing is automated, no excuse anymore.

Here is some tips for this to work smoothly with Hugo.

Github setup

First create 2 repositories on Github, one for the HTML pages, one for the markdown itself.
Let’s call them blog & hugo-blog.

DNS setup

You can use your own domain, if so you need to enable a CNAME file for your gh-pages to the blog repo, then add a CNAME to your DNS provider:
blog.mydomain.com. IN CNAME username.github.io.

Hugo setup

Clone the hugo-blog repo, put your new hugo blog files in it (created via hugo new).
Choose a theme for your blog (don’t forger to remove the .git directory from it) and set it up in your config.yml as follow:

baseurl = "http://blog.mydomain.com/"
languageCode = "en-us"
title = "My supa blog"
canonifyurls = true
theme = "hyde"

Then run hugo server --buildDrafts, point your browser to http://localhost:1313, no need to reload all modifications appear directly.

Wercker setup

For the auto deploy to occur after each commits you need a build & deploy system, Wercker is very cool as you can reproduce the exact same system on your host with Docker, subscribe to the service (it’s free) and register your hugo-blog repo, hit next, next …

Add a wercker.yml file in your hugo-blog that looks exactly like this.

box: debian
build:
  steps:
    - arjen/hugo-build:
        version: "0.14"
        theme: purehugo
        flags: --disableSitemap=true
deploy :
  steps :
    - script:
        name: Configure git
        code: |-
          sudo apt-get -y update
          sudo apt-get -y install git-core
          git config --global user.email "pleasemailus@wercker.com"
          git config --global user.name "wercker"

          # remove current .git folder
          rm -rf .git
    - script:
        name: Deploy to Github pages
        code: |-
          cd public
          # if you are using a custom domain set it here
          echo "blog.mydomain.com" > CNAME
          git init
          git add .
          git commit -m "deploy commit from $WERCKER_STARTED_BY"
          git push -f $GIT_REMOTE master:gh-pages 2> /dev/null

It will use Hugo to generate the pages then deploy to your Github repo on every commit to the blog repo.

Last step is to get a token from Github for the deploy to occur without your credentials.
Go to your Github settings, Personal access tokens, generate a token.

Go to your Wercker app settings, Deploy targets, add a new target, check auto deploy successful builds to branch(es): and type master.
Add a new variable named GIT_REMOTE check protected and type https://{TOKEN}@github.com/yourusername/blog.git replace {TOKEN} with the token from Github.
You can use this outdated blogpost from Wercker for the screenshot but don’t follow what they said.

You are all set, happy blogging, you can check the exact same config on my repos under my username Github@akhenakh.