Get Started with Hugo

What's Hugo?

Hugo is a popular open-source static site generator. After my painful journey on trying Hexo and Jekyll, Hugo makes me happy.

Get Started

Install Hugo on Mac OS.

1

brew install hugo

Initialize the first website.

1

hugo new site your-folder-name

Set Github repo

I'm using two repos for my blog: one stores all source files of hugo and the other stores generated websites.

First, create a repo for source files in Github.

For example, my source repo is github.com/HaoboGu/source-haobogu.github.io.

After the repo for source files is created, set local hugo folder to track the repo.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

cd your-folder-name

# Git initialization
git init
# Commit hugo files
git add .
git commit -m "first commit"
# Track your remote repo
git remote add origin git@github.com:HaoboGu/source-haobogu.github.io.git
git push -u origin master

Add a theme

Hugo doesn't have a built-in theme, so I decided to use hugo-nuo(my edited version). You can choose one from themes.gohugo.io/.

1
2
3
4
5

# Import the hugo-nuo theme as a git submodule
git submodule add git@github.com:HaoboGu/hugo-nuo.git themes/hugo-nuo

# Add theme to config file
echo 'theme = "hugo-nuo"' >> config.toml

Add first page

1

hugo new posts/Hello-Hugo.md

You may notice that there is a generated header in the markdown file. This header is called front matter. By default, this page will not be publised because draft = true option in front matter template.

Test your site locally

Run

1
2

# -D means draft will be publised
hugo server -D

Then navigate to your site at http://localhost:1313/.

Deploy site to Github Pages

Create your Github Pages repo for hosting generated site.

Suppose the site repo is github.com/HaoboGu/haobogu.github.io, then run

1
2
3
4

# Delete generated public folder
rm -rf public 
# Set public folder as a submodule which tracks Github Pages repo
git submodule add -b master git@github.com:<USERNAME>/<USERNAME>.github.io.git public

Create script deploy.sh, then run this script to deploy the website

1
2
3

chmod +x deploy.sh

./deploy.sh

DONE!