How to set up a Hugo blog on GitHub Pages
This post describes how to set up a blog with Hugo and to host it on GitHub Pages.
Hugo on GitHub Pages
Hugo is a fast and modern static website engine. With Hugo, a new idea around making website creation becomes simple. GitHub Pages is website hosting directly from GitHub repositories. Just edit, push and changes are live.
Following shows how to set up a blog with Hugo and to host it on GitHub Pages.
Making two repositories
First, make two repositories. One is for Hugo contents and the other is for blog hosted on GitHub Pages. Here I make these repositories for the following names and descriptions on my GitHub account:
- blog-hugo: Hugo contents for my blog.
- takagi.github.io: For my blog hosted on GitHub Pages.
The name takagi.github.io is on GitHub Pages naming rule.
Setting up a blog with Hugo
Second, create a new site for my blog with the following command:
$ hugo new site ~/Desktop/blog
$ cd ~/Desktop/blog
After creating it, edit its configuration file config.toml. Change the blog’s base url and title, add its author.
baseurl = "http://takagi.github.io/"
languageCode = "en-us"
title = "Masayuki Takagi's Blog"
[params]
author = "Masayuki Takagi"
Download a themes in its theme directory. I choose liquorice theme. With the theme, I apply some CSS modification for my preference.
$ git clone https://github.com/eliasson/liquorice ~/themes/liquorice
For generating the site’s static HTML files, at least one content page is required. So create a content page with the following command:
$ hugo new about.md
A new file is now created in content/ with the following contents:
+++
date = "2015-03-02T09:25:07+09:00"
draft = true
title = "about"
+++
Place some content in Markdown format below the +++ in this file. For example:
# A headline
Some Content
Mapping the GitHub Pages repository
For deploying the static HTML files that will be generated in public on takagi.github.io repository, map the repository to public as a git sub module.
$ git init
$ git submodule add git@github.com:takagi/takagi.github.io.git public
Generating to deploy
With the following shell script, generate and deploy the blog on GitHub Pages.
#!/bin/bash
echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"
# Build the project.
hugo --theme=liquorice
# Go To Public folder
cd public
# Add changes to git.
git add -A
# Commit changes.
msg="rebuilding site `date +\"%Y-%m-%dT%H:%M:%S %Z\"`"
if [ $# -eq 1 ]
then msg="$1"
fi
git commit -m "$msg"
# Push source and build repos.
git push origin master
# Come Back
cd ..