Skip to content

create github pages with hugo

download and install

$ which hugo
/usr/bin/hugo
$ hugo version
Hugo Static Site Generator v0.17 BuildDate: 2016-10-07T21:45:27+07:00

start a new site

$ hugo new site me.github.io
Congratulations! Your new Hugo site is created in "/home/em/now/hugo-work/me.github.io".
Just a few more steps and you're ready to go:
1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/, or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".
Visit https://gohugo.io/ for quickstart guide and full documentation.

folder structure

$ cd me.github.io
$ tree
.
--- archetypes
--- config.toml
--- content
--- data
--- layouts
--- static
--- themes
6 directories, 1 file

$ cd me.github.io/
$ git clone https://github.com/digitalcraftsman/hugo-steam-theme.git themes/hugo-steam-theme
$ cp -av themes/hugo-steam-theme/exampleSite/* .
$ hugo server --watch
Started building sites ...
Built site for language en:
0 draft content, 0 future content, 0 expired content
5 pages created, 0 non-page files copied
10 paginator pages created, 2 categories created, 6 tags created
total in 66 ms, Watching for changes in /home/em/now/hugo-work/me.github.io/{data,content,layouts,static,themes}
Serving pages from memory
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

tree

$ tree
.
--- archetypes
--- config.toml
--- content
------- about
----------- index.md
------- post
----------- creating-a-new-theme.md
----------- goisforlovers.md
----------- hugoisforlovers.md
----------- migrate-from-jekyll.md
--- data
--- layouts
--- static
--- themes
------- hugo-steam-theme
----------- ...

post/creating-a-new-theme.md

---
author: "Michael Henderson"
date: 2014-09-28
linktitle: Creating a New Theme
next: /tutorials/github-pages-blog
prev: /tutorials/automated-deployments
title: Creating a New Theme
weight: 10
description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum similique, ipsum officia amet blanditiis provident ratione nihil ipsam dolorem repellat."
---
### **Introduction**
This tutorial will show you how to create a simple theme in Hugo. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I'll explain how Hugo uses templates and how you can organize your templates to create a theme. I won't cover using CSS to style your theme.
We'll start with creating a new site with a very basic template. Then we'll add in a few pages and posts. With small variations on that, you will be able to create many different types of web sites.
...

about/index.md

+++
date  = "2015-08-22"
title = "Link custom pages"
menu  = "main"
+++
You can add custom pages like this by adding `menu = "main"` in the frontmatter:
'''toml
+++
date  = "2015-08-22"
title = "About me"
menu  = "main"
+++
'''
This site is just a usual document. Create a new subfolder in `content` and name this document `index.md`. For example, I'm located under `content/about/index.md` to add indicate the subsection `/about` in the URL. 
But you can also link posts that way without moving them.
If no document contains `menu = "main"` in the frontmatter the navigation will not be shown. Sounds easy, right?

config.toml

baseurl = "https://example.org/"
languageCode = "en-us"
title = "Steam - a minimal theme for Hugo"
theme = "hugo-steam-theme"
disqusShortname = "spf13"
paginate = 10
[params]
  title = "Steam"
  subtitle = "a minimal theme for ~~Ghost~~ Hugo"
  copyright = "Released under the MIT license."
  themeColor = "green"
  googleAnalytics = ""
  name = "John Doe"
  bio = "I'm just a theme. That's it. If you like my design clone [me](//github.com/digitalcraftsman/hugo-steam-theme) from Github. Thanks."
  description = "Your description of the blog"
  location = "" # optional
  twitter = "spf13" # optional
  github = "spf13" # optional
  gitlab = "" # optional
  comments = "disqus"
  keepReadingStr = "Keep reading"
  backtotopStr = "Back to top"
  shareStr = "Share"
  pageNotFoundTitle = "404 - Page not found"

version control

# source version control
$ git init
$ echo "/public/" >> .gitignore
$ echo "/themes/" >> .gitignore
$ echo "/others-if-any/" >> .gitignore
$ cat .gitignore

publish

# create new GHP repo me.github.io (without readme)
$ cd public/
$ [sudo] git init
$ [sudo] git remote add origin git@github.com:me/me.github.io.git
$ [sudo] git add .
$ [sudo] git commit -am "add disqus"
$ [sudo] git push --set-upstream origin master
# repo ghp
$ git checkout -b gh-pages
$ git push -f origin gh-pages

Dockerfile

FROM alpine:3.4
MAINTAINER EM <eueung@gmail.com>
ENV HUGO_VERSION=0.17 
RUN apk add --update wget ca-certificates && \
  cd /tmp/ && \
  wget https://github.com/spf13/hugo/releases/download/v${HUGO_VERSION}/hugo_${HUGO_VERSION}_linux-64bit.tar.gz && \
  tar xzf hugo_${HUGO_VERSION}_linux-64bit.tar.gz && \
  rm -r hugo_${HUGO_VERSION}_linux-64bit.tar.gz && \
  mv hugo_${HUGO_VERSION}_linux_amd64/hugo_${HUGO_VERSION}_linux_amd64 /usr/bin/hugo && \
  apk del wget ca-certificates && \
  rm /var/cache/apk/*
WORKDIR /work
CMD /usr/bin/hugo

hugo on docker

$ docker build -t eueung/hugo:v2 .
$ docker images | grep hugo
$ docker login
$ docker push eueung/hugo:v2
The push refers to a repository [docker.io/eueung/hugo]
11c97b295820: Pushed 
d4546b2b59fd: Pushed 
011b303988d2: Layer already exists 
v2: digest: sha256:764e9f134ad736fc67e29f4af136e523b557449562c3016ede3a456b7ace5ad7 size: 945
$ docker run -ti --rm -v $(pwd):/work eueung/hugo:v2
$ docker run -ti --rm eueung/hugo:v2 sh
$ docker run -ti --rm eueung/hugo:v2 hugo version
Hugo Static Site Generator v0.17 BuildDate: 2016-10-07T14:45:27Z