1. 安装Hugo

安装环境：Win10

1.1 建立文件夹

  1. 建立文件夹D:\Hugo
  2. 建立子文件夹：D:\Hugo\bin，D:\Hugo\Sites

1.2 下载二进制安装文件

  1. 进入页面：https://github.com/gohugoio/hugo/releases
  2. 选择对应版本，目前最新版本：hugo_0.71.0_Windows-64bit.zip
  3. 解压后放到D:\Hugo\bin目录下，如下
1
2
3
4
5
6
7
D:.
├─bin
│      hugo.exe
│      LICENSE
│      README.md
│
└─Sites
  1. 将D:\Hugo\bin添加到环境变量
1
2
rem 如果下面步骤有问题，需要手动重启cmd，或者直接手动添加
set PATH=%PATH%;D:\Hugo\bin
  1. 验证安装

D:\Hugo\Sites>hugo version
Hugo Static Site Generator v0.71.0-06150C87 windows/amd64 BuildDate: 2020-05-18T16:08:31Z

2. 创建站点

2.1 创建一个新的站点

hugo new site godwit.cn

2.2 添加一个主题

  1. 进入网站https://themes.gohugo.io/
  2. 选择一个自己喜欢的主题，例如：https://themes.gohugo.io/mainroad/
  3. 安装主题
1
2
cd godwit.cn/themes
git clone https://github.com/vimux/mainroad
  1. 配置主题，修改godwit.cn/config.toml文件, 添加主题(其实这里顺便可以把其他配置顺手修改掉)：

theme = “mainroad”

​ 修改Config.toml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
baseURL = "https://godwit.cn/"
# baseurl = "/"
languageCode = "zh-CN"
paginate = "10" # Number of posts per page
theme = "mainroad"
disqusShortname = "" # Enable Disqus comments by entering your Disqus shortname
googleAnalytics = "" # Enable Google Analytics by entering your tracking id

[Author] # Used in authorbox
  name = "Godwit"
  bio = "Old Dog."
  avatar = "img/avatar.png"

[Params]
  subtitle = "" # Deprecated in favor of .Site.Params.logo.subtitle
  description = "Godwit's Personal blog about everything" # Site description. Used in meta description
  copyright = "Godwit" # Footer copyright holder, otherwise will use site title
  opengraph = true # Enable OpenGraph if true
  schema = true # Enable Schema
  twitter_cards = true # Enable Twitter Cards if true
  readmore = true # Show "Read more" button in list if true
  authorbox = true # Show authorbox at bottom of pages if true
  toc = true # Enable Table of Contents
  pager = true # Show pager navigation (prev/next links) at the bottom of pages if true
  post_meta = ["date", "categories", "translations"] # Order of post meta information
  mainSections = ["post", "blog", "news", "tools"] # Specify section pages to show on home page and the "Recent articles" widget
  dateformat = "2006-01-02" # Change the format of dates
  mathjax = true # Enable MathJax
  mathjaxPath = "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js" # Specify MathJax path
  mathjaxConfig = "TeX-AMS-MML_HTMLorMML" # Specify MathJax config
  highlightColor = "#e22d30" # Override highlight color
  customCSS = ["css/custom.css"] # Include custom CSS files
  customJS = ["js/custom.js"] # Include custom JS files

[Params.logo]
  title = "Godwit" # Logo title, otherwise will use site title
  subtitle = "老狗窝" # Logo subtitle

[Params.sidebar]
  home = "right" # Configure layout for home page
  list = "left"  # Configure layout for list pages
  single = false # Configure layout for single pages
  # Enable widgets in given order
  widgets = ["search", "recent", "categories", "taglist", "social", "languages"]

[Params.widgets]
  recent_num = 5 # Set the number of articles in the "Recent articles" widget
  tags_counter = false # Enable counter for each tag in "Tags" widget

[Params.widgets.social]
  # Enable parts of social widget
  # facebook = "username"
  # twitter = "username"
  # instagram = "username"
  # linkedin = "username"
  # telegram = "username"
  # github = "username"
  # gitlab = "username"
  # bitbucket = "username"
  email = "godwitnow@foxmail.com"

# Custom social links
#[[Params.widgets.social.custom]]
#  title = "Youtube"
#  url = "https://youtube.com/user/username"
#  icon = "youtube.svg" # Optional. Path relative to "layouts/partials"

#[[Params.widgets.social.custom]]
#  title = "GODWiT"
#  url = "http://godwit.cn"

2.3 添加一篇文章

1
2
D:\Hugo\Sites\godwit.cn>hugo new tools/hugo-step-by-step.md
D:\Hugo\Sites\godwit.cn\content\tools\hugo-step-by-step.md created

然后把本篇文章的内容copy进上面创建的hugo-step-by-step.md文件里面（套娃）。

注意，要在文章最前面添加如下Front Matter Example(Hugo会根据下面配置决定如何显示页面)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# Common-Defined params
title: "Hugo Step By Step"
date: "2020-05-05"
description: "如何用Hugo一步一步搭建自己的Blog"
categories:
  - "工善利器"
tags:
  - "Hugo"
menu: side # Optional, add page to a menu. Options: main, side, footer

# Theme-Defined params
# thumbnail: "img/placeholder.jpg" # Thumbnail image
lead: "用Hugo搭建自己的老狗窝" # Lead text
comments: true # Enable Disqus comments for specific page
authorbox: true # Enable authorbox for specific page
pager: true # Enable pager navigation (prev/next) for specific page
toc: true # Enable Table of Contents for specific page
mathjax: true # Enable MathJax for specific page
sidebar: "right" # Enable sidebar (on the right side) per page
widgets: # Enable sidebar widgets in given order per page
  - "search"
  - "recent"
  - "taglist"

3. 本地启动站点

3.1 启动站点

hugo server -D

访问**http://localhost:1313/.**即可看到网站

4. Build静态网页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
D:\Hugo\Sites\godwit.cn>hugo -D
Building sites …
                   | EN
-------------------+-----
  Pages            | 10
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  1
  Processed images |  0
  Aliases          |  4
  Sitemaps         |  1
  Cleaned          |  0

Total in 123 ms

这样，就会把所有文件Build到public目录下

5. 发布到github

在public目录下：

1
2
3
4
5
6
7
git init
git add .
git commit -m "Initialize the website"
rem 注意在github上创建Repository的时候，格式是：用户名.github.io 不可用其他的
git remote add origin https://github.com/Godwit/godwit.github.io
git push -u origin master

6. 添加解析

在阿里云后台设置自己域名的解析，将www的值映射为godwit.github.io。

这样就可以在浏览器访问了。