This blog is built with Hugo and hosted on Github.

Setting up Hugo site

Install Hugo

First we should have a Hugo installed, Install Hugo, or just download the binary from github.com/gohugoio/hugo.

After Hugo installed, try verify it.

$ hugo version
Hugo Static Site Generator v0.41 linux/amd64 BuildDate: 2018-05-25T16:57:20Z

Create a New Site

Hugo can generate layout of a new site very easy:

$ hugo new site hugo-blog
Congratulations! Your new Hugo site is created in /home/user/hugo-blog.

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.

Add a Theme

Then we need to choose a beautiful theme for our site. Try hyde-hyde. This theme has 2 columns and 8 base colors. With the abilities of syntax highlight by highlight.js, discuss by GraphComment and other great features.

$ cd hugo-blog

$ git init
Initialized empty Git repository in /home/user/hugo-blog/.git/

$ git submodule add https://github.com/htr3n/hyde-hyde.git themes/hyde-hyde
Cloning into 'themes/hyde-hyde'...
remote: Counting objects: 663, done.
remote: Total 663 (delta 0), reused 0 (delta 0), pack-reused 663
Receiving objects: 100% (663/663), 1.90 MiB | 118.00 KiB/s, done.
Resolving deltas: 100% (356/356), done.
Checking connectivity... done.

Then let’s open config.toml and customize our site. Copy the config.toml from ./themes/hyde-hyde/exampleSite/config.toml to the root of the site and modify it.

## Basic Configuration
baseurl = "https://example.com/"
languageCode = "en"

theme = "hyde-hyde"

## Hugo Built-in Features
# disqusShortname = "your-disqus-shortname"
# googleAnalytics = "your-google-analytics-id"
# enableRobotsTXT = true

## Site Settings
[params]
    author = "Author"
    title = "Title"
    # description = "..."
    authorimage = "/img/hugo.png"
    dateformat = "Jan 2, 2006"
    highlightjs = true
    # highlightjsstyle = "github"
    # please choose either GraphComment or Disqus
    # GraphCommentId = "your-graph-comment-id"
    # layoutReverse = true
    # sidebarSticky = true

## Social Accounts
[params.social]
    github = "<username>"
    instagram = "<username>"
    xing = "<username>"
    linkedin = "<username>"
    twitter = "<username>"
    facebook = "<username>"
    stackoverflow = "<username>"
    email = "your-email@example.com"

## Main Menu
[[menu.main]]
    name = "Posts"
    weight = 100
    identifier = "posts"
    url = "/posts/"
[[menu.main]]
    name = "About"
    identifier = "about"
    weight = 200
url = "/about/"

Add Content

OK, now we are able to add new contents of our site.

$ hugo new posts/my-first-post.md
/home/user/hugo-blog/content/posts/my-first-post.md created

This command generates a default content

$ cat content/posts/my-first-post.md
---
title: "My First Post"
date: 2018-06-10T16:26:07+08:00
draft: true
---

Please be note that when this post is finished, just change the draft to false.

Serve locally

Serve your content by hugo and access by http://localhost:1313.

$ hugo server -D
                   | EN
+------------------+----+
  Pages            | 10
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  8
  Processed images |  0
  Aliases          |  0
  Sitemaps         |  1
  Cleaned          |  0

Total in 47 ms

Watching for changes in /home/user/hugo-blog/{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

Host on Github

Github account and Git are prerequisites.

Github User Page

Github user page can host static website quite well, we are going to use it to publish our site.

1. We need to create a github user page repo, the repo name must be <USERNAME>.github.io
2. Create a normal repo to save Hugo site, e.g. github.com/<USERNAME/hugo-blog>
3. Put the Hugo site created before into the normal Hugo repo
4. Serve by hugo server, make your website work locally
5. Once we are happy with the result, just stop the hugo server by Ctrl-C and prepare to publish it
6. Clone github user page repo as a submodule with the public as the root folder, then hugo can generate webpages into it
7. git submodule add -b master git@github.com:<USERNAME>/<USERNAME>.github.io.git public
8. Then run hugo to generate the webpages
9. Now we are ready to publish, just commit the changes and push it to github, after a few minutes, the website will be shown at <USERNAME>.github.io

Publish Blog

We can create a publish.sh to automatically publish the website instead a bunch of commands

#!/bin/bash

echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"

# Build the project.
hugo -t hyde-hyde # if using a theme, replace with `hugo -t <YOURTHEME>`

# Go To Public folder
cd public
# Add changes to git.
git add .

# Commit changes.
msg="rebuilding site `date`"
if [ $# -eq 1 ]
  then msg="$1"
fi
git commit -m "$msg"

# Push source and build repos.
git push origin master

# Come Back up to the Project Root
cd ..

Setting up GraphComment

1. Sign up at GraphComment
2. Create your chat site, add <USERNAME>.github.io
3. Copy the generated SiteID in the setup tab of your site in GraphComment, window.graphcomment_id = '<SiteID>';
4. Paste it to params.GraphCommentId of config.toml

Finished

All done. Enjoy it.