Create your User/Organization GitHub Page with Hugo + Travis

I have just finished migrating my static blog from Hexo to Hugo and one of the main things I care about is to be able to do continuous deployment of my profile and blog. There are quite a few blog posts out there but they are based on using shell scripts and it really becomes a pain to give permissions etc. In the next few lines you will see the simplest way I have found to do this (and is currently as this blog post is being published).

You will need to have:

  • A Github account.
  • A Travis CI account.
  • A Github repository with source code of your web page with Hugo (*1)
  • A Github repository with the name <your User or Organization>.github.com (ex. kanekotic.github.com) (*2).
  • A developer token from GitHub with commit capabilities (can create in github Settings -> Developer Settings -> Personal Access Token -> Generate New Token )

I wont cover how to create a Hugo web page as this is best explained in the quick start) of Hugo.

After you are happy with the content of your blog in the repository of source code (*1), and want to start deploying you will need to add a .travis.yml with the next content

sudo: true
dist: trusty

install:
  - sudo apt-get --yes install snapd
  - sudo snap install hugo

script:
  - /snap/bin/hugo 

deploy:
  provider: pages
  local-dir: public
  repo: <User or Organization>/<User or Organization>.github.com
  target-branch: master
  skip-cleanup: true
  github-token: $GITHUB_TOKEN
  committer-from-gh: true
  keep-history: true
  on:
    branch: master

you will have to change the repo content to match your destination repository (*2). The previous code what does is installs hugo in the deployment machine, builds your web page and deploys using the pages plugin. If you have a custom domain make sure to set the property fqdn to your domain, if not you will overwrite this field in each commit.

After adding the file you will have to go to Travis web page and toggle your code repository (*1) got to More Options -> Settings -> Environment Variables and add GITHUB_TOKEN as the token retrieved from github.

After this in any commit in the master branch of your web page you will get it deployed and go live.

Avatar
Code dreamer, Creator of random stuff & sharing wizard
comments powered by Disqus