Hugo is a static web site generator implemented by the Go language. Simple, easy to use, efficient, easy to expand, rapid deployment.

Why Hugo?

  • Come on! The world’s fastest static website generation tool! Generate 6000 pages in 5 seconds!
  • Super detailed documentation, albeit in English
  • Active community
  • A more liberal way of organizing content
  • Rich themes, currently more than Hexo

Install Hugo

1. Binary installation (recommended: simple, fast)

Windows

  • To github.com/gohugoio/hu…
  • Download hugo_X. XX_Windows – 64 – bit. Zip
  • Unzip to get Hugo.exe
  • Add the Hugo. Exe directory to the system environment variable
  • Installation complete!

Install Homebrew on Mac:

brew install hugo
Copy the code

2. Source code installation

Source code compiler installation, first install dependent tools:

  • Git

  • Go (at least Go 1.11)


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

Go Install — Tags Extended if Sass/SCSS support is required.

For Windows users, the '$HOME' environment variable is' %USERPROFILE% 'Copy the code

Tip: People sometimes like to operation, open the folder/SRC, choose the git bash in the folder right here, git clone https://github.com/gohugoio/hugo.git, then CD, Hugo, go install

[Error message during installation] Go get Error message “HTTPS fetch failed: get https://golang.org/x…”

If you install a package dependent on golang.org with Go Get, you will have to download https://golang.org/x manually as there is no domestic connection to golang.org.

Create the golang/x folder under $GOPATH/ SRC and download the desired package. On Windows, use the above error as an example. https://golang.org/x/net text image sync cannot be obtained manually.

Open the Git Bash

Mkidr -p ~/go/src/golang.org/x // Note the pathcd ~/go/src/golang.org/x
git clone https://github.com/golang/net.git
git clone https://github.com/golang/text.git
git clone https://github.com/golang/image.git
git clone https://github.com/golang/sync.git
Copy the code

So when we go get again, we’re done.

Verify that the installation is successful

hugo version
Copy the code

For other systems, please refer to the official documentation – Installation

To create the site

hugo new site yannotes.cn
cd yannotes.cn
Copy the code

After executing the Hugo new site command you will get a directory containing the following files:

├ ─ ─ archetypes / ├ ─ ─ config. Toml ├ ─ ─ the content / ├ ─ ─ data / ├ ─ ─ layouts / ├ ─ ─ the static / ├ ─ ─ the resources / ├ ─ ─ public / └ ─ ─ themes /Copy the code
  • Archetypes: Stores. Md template files similar to Hexo scaffolds that take precedence over /archetypes under the theme
  • Config. toml: indicates the configuration file
  • Content: Stores all the content of a website, similar to hexo’s source
  • Data: Stores data files for templates to call, similar to source/_data for hexo
  • Layouts: Stores. HTML templates in a directory with a higher priority than the /layouts folder under the theme
  • Static: Stores static files, such as images, CSS, and js files. The files in this directory are directly copied to /public. This folder has a higher priority than the /static folder under the theme
  • Themes: Stores themes
  • Public: Saves the generated static file after executing the Hugo command

Add a Theme (skin)

Go to the skin list and select a skin that you like (for example, Hyde skin). Go to the GitHub address and create a directory in themes.

git clone https://github.com/spf13/hyde.git themes/hyde

# Edit your config.toml configuration file using this theme
echo 'theme = "hyde"' >> config.toml
Copy the code

Themes: even: github.com/olOwOlo/hug…

git clone https://github.com/olOwOlo/hugo-theme-even themes/even
Copy the code

Add the article

  • Create an About page:
$ hugo new about.md
Copy the code

About. Md automatically generates content/about.md.

+++
date = "2018-12-02T01:46:53+08:00"
draft = true
title = "about"+++ Body contentCopy the code

The content is in Markdown format, and the content between +++ + is in TOML format, which you can change to YAML format (using – tags) or JSON format, depending on your preference.

  • Create the first article and place it in the POST directory for later aggregation pages.
$ hugo new post/first.md
Copy the code

It creates the POST /first.md directory and files in the content directory at the root of the site.

Open edit post/first.md:

---
date: "2018-12-02T01:46:53+08:00"
title: "first"

---
### Hello Hugo

 1. aaa
 1. bbb
 1. ccc

Copy the code

Run Hugo locally

Execute the Hugo command in the root directory of your site to debug:

$ hugo server --theme=hyde --buildDrafts --watch
Copy the code

Use the –watch parameter to refresh the browser automatically when you modify the content of the article.

Open the browser: http://localhost:1313

  • Navigation directory processing
[[menu.main]]
  name = "Home"
  weight = 10
  identifier = "home"
  url = "/"
[[menu.main]]
  name = "Archives"
  weight = 20
  identifier = "archives"
  url = "/archives/"
[[menu.main]]
  name = "Tags"
  weight = 30
  identifier = "tags"
  url = "/tags/"
Copy the code

Url = “/tags/” means content/tags/ directory in the root directory of the site, and so on.

Adding a comment system

gitment

In using gitment, the key is the value of the repo parameter, which is your repository name (not the full path)~, as in my case ~

louyan.github.io

The deployment of

If you need to deploy on GitHub Pages, create a Repository on GitHub and name it louyan.github. IO (louyan is your GitHub username).

Execute the Hugo command in the site root directory to generate the final page:

$ hugo --theme=hyde --baseUrl="http://louyan.github.io/"
Copy the code

If all goes well, all static pages will be generated to the public directory, pushing all files in the Pubilc directory to the master branch of the Repository you just created.

$ cd public
$ git init
$ git remote add origin https://github.com/louyan/louyan.github.io.git
$ git add -A
$ git commit -m "first commit"
$ git push -u origin master
Copy the code

Visit http://louyan.github.io/ in your browser

YAN’s notes on this website were generated by me using Hugo.

For more detailed information about Hugo, you can also refer to: Hugo from the entry to use