Why Hugo

I used to use Pelican to generate my website, it works petty well. But in some way, it’s just not that perfect, such as, no hot reload, small community, lots of dependencies, not that fast. Hugo, in other way, is fast, nearly no dependencies, better writing experience with hot reloading, so it’s clearly a better choice for me.

Install Hugo

If you are on Mac OS, you can install Hugo with Homebrew brew install hugo, for other platforms, check this link, you can find your answers here.

Generate website

Use command hugo new site sitename to generate a website.

Install a theme

cd blog/themes
git clone https://github.com/liuzc/LeaveIt.git

Customize your configuration

Open config.toml and set the theme property to your theme.

baseURL = "/"
languageCode = "en-us"
title = "rookiebulls"
theme = "LeaveIt"
...

For more configurations, check your theme’s example site.

Add a new post

Run command hugo new posts/new-post-title.md to add a new post in the content/posts directory. Hugo supports Markdown out of box, if you are not familiar with it, here’s a cheatsheet about it.

Build you website

Just type hugo, your website will be generated automatically in the public directory.

Deploy your website

The content in the pubic directory is static, you can host it with Nginx, Apache… any web server will be fine, but you need to have a VPS first. I choose Github Pages to host my website, because it’s free and perfectly suitable for static site.

  1. Create a new repository
  2. Push your content to master branch

Auto deploy your website with Travis CI

Doing build, copy, paste and push operations all the time is really annoying, so I decide to do it in an automatic way. Travis CI is a perfect solution for this, it works perfectly with Github, you just need to push your source content to Github, and let Travis CI do the rest.

  1. Sign up with your Github account.
  2. Add your repository
  3. Create a new personal access token
  4. Set up your repository settings in Travis, add a new environment variable named GITHUB_TOKEN with the token you created in step 3

  5. Add .travis.yml to your website root directory

    language: go

go:
- '1.11' # Use Golang 1.11

# Specify which branches to build using a safelist
branches:
only:
- source

install:
# install hugo
- go get github.com/gohugoio/hugo

script:
# build website
- hugo

deploy:
provider: pages # Important, it means using github pages to deploy
skip-cleanup: true # Important, keep it to true
local-dir: public # Your content direcotry after building
target-branch: master # Which branch to push to
github-token: $GITHUB_TOKEN # Your github access token for travis
keep-history: true # keep the target-branch history
on:
branch: source # source content branch

  6. Push your source content to source branch

With all this done, next time your update your source content, Travis CI will deploy it automatically.