Hugo is a static HTML and CSS website generator written in Go. It is optimized for speed, ease of use, and configurability. Hugo takes a directory with content and templates and renders them into a full HTML website.

How to Install

Install Hugo as Your Site Generator (Binary Install)

Homebrew (macOS)

brew install hugo

Chocolatey (Windows)

choco install hugo -confirm

Use the installation instructions in the Hugo documentation

Build and Install the Binaries from Source (Advanced Install)

Prerequisite Tools:

Fetch from GitHub

Since Hugo 0.48, Hugo uses the Go Modules support built into Go 1.11 to build. The easiest is to clone Hugo in a directory outside of GOPATH, as in the following example:

mkdir $HOME/src
cd $HOME/src
git clone https://github.com/gohugoio/hugo.git
cd hugo
go install

If you are a Windows user, substitute the $HOME environment variable above with %USERPROFILE%.

After the installation is complete, after entering the hugo version in the terminal, the Hugo Static Site Generator v0.55.0-DEV linux/amd64 BuildDate: unknown is displayed.

Installation theme

This website uses the theme “hugo-theme-cleanwhite”

The simplest way is to start with the example site coming with this theme, then you can play around and add your own stuff.

$ mkdir test
$ cd test
$ mkdir themes
$ cd themes
$ git clone https://github.com/zhaohuabing/hugo-theme-cleanwhite.git
$ cp -r hugo-theme-cleanwhite/exampleSite/** ../
$ cd ..
$ hugo serve

If your site is already a git project, you may want to choose to add the cleanwhite theme as a submodule to avoid messing up your existing git repository.

$ mkdir themes
$ git submodule add https://github.com/zhaohuabing/hugo-theme-cleanwhite.git themes/hugo-theme-cleanwhite

Run Hugo Build-in Server Locally

$ hugo serve -t  hugo-theme-cleanwhite

Now enter localhost:1313 in the address bar of your browser.

If you start from scratch, there is a working Hugo site configured with the CleanWhite theme in the exampleSite directory. You can use it as a starting point for your site.

For more information read the official setup guide of Hugo

Configuration

First, let’s take a look at the config.toml. It will be useful to learn how to customize your site. Feel free to play around with the settings.

Comments

The optional comments system is powered by Disqus. If you want to enable comments, create an account in Disqus and write down your shortname.

disqusShortname = “your-disqus-short-name” You can disable the comments system by leaving the disqusShortname empty.

Disqus in China

Use this feature requires scientific internet access. So you can’t use this feature in China.

Site Search with Algolia

Follow this tutorial to create your index in Algolia. The index is just the storage of the indexing data of your site in the the cloud . The search page of CleanWhite theme will utilize this indexing data to do the search.

Go to the directory where you have your Hugo site and run the following commands:

$ npm init
$ npm install atomic-algolia --save

Next, open up the newly created package.json, where we’ll add an NPM script to update your index at Algolia. Find “scripts”, and add the following:

"algolia": "atomic-algolia"

Algolia index output format has already been supported by the CleanWhite theme, so you can just build your site, then you’ll find a file called algolia.json in the root, which we can use to update your index in Algolia. Generate index file:

$ hugo

Create a new file in the root of your Hugo project called .env, and add the following contents:

ALGOLIA_APP_ID={{ YOUR_APP_ID }}
ALGOLIA_ADMIN_KEY={{ YOUR_ADMIN_KEY }}
ALGOLIA_INDEX_NAME={{ YOUR_INDEX_NAME }}
ALGOLIA_INDEX_FILE={{ PATH/TO/algolia.json }}

Now you can push your index to Algolia by simply running:

$ npm run algolia Add the following variables to your hugo site config so the search page can get access to algolia index data in the cloud:

algolia_search = true
algolia_appId = {{ YOUR_APP_ID }}
algolia_indexName = {{ YOUR_INDEX_NAME }}
algolia_apiKey = {{ YOUR_ADMIN_KEY }}

Open search page in your browser: http://localhost:1313/search

Analytics

You can optionally enable Google or Baidu Analytics. Type your tracking code in the

googleAnalytics = "UA-XXXXX-X"
ba_track_id  = "XXXXXXXXXXXXXXXX"

Leave the googleAnalytics or ‘ba_track_id ’ key empty to disable it.

Wechat Pay & Alipay Rewards

You can enable Wechat Pay & Alipay to allow readers send you money. So if they like your articles, you may even get rewards from your writing. Now you must be motivated to write more.

Enable Wechat Pay & Alipay in the site config

reward = true
Replace the QR codes of Wechat Pay & Alipay by overriding the photos in folder /static/img/reward/, otherwise the money will be sent to my accounts!

How to create a new article

#!/bin/bash
time=$(date "+%Y-%m-%d")
hugo new post/${time}-$1.md

Evan Blog