Hugo 建站记录

Posted on | In | | Views:
| 12k | 0:11

Hugo 是由 Go 语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。

根据官网的一些文档及网上的教程，尝试用 Hugo 搭建一个静态的博客站点。下面的操作在 win10 64 位家庭版中完成。bash 命令在 git bash 中操作。

安装

在 Hugo Releases 页面下载了最新的 v0.36 win64 位压缩包，解压后将其添加到环境变量中。

生成站点

使用 Hugo 快速生成站点：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$ hugo new site test
Congratulations! Your new Hugo site is created in D:\hugo.

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.

$ $ cd test/

$ ls
archetypes/  config.toml  content/  data/  layouts/  static/  themes/

config.toml是网站的配置文件，包括 baseurl, title, copyright 等等网站参数。

这几个文件夹的作用分别是：

  • archetypes：包括内容类型，在创建新内容时自动生成内容的配置
  • content：包括网站内容，全部使用markdown格式
  • data：存放 Hugo 生成网站时的配置文件
  • layouts：包括了网站的模版，决定内容如何呈现
  • static：包括了css, js, fonts, media等，决定网站的外观
  • themes：主题

添加主题

按照一般方法这一步应该添加主题，然后添加文章，然后就可以预览站点了。

这里选用了 Academic 这一主题。这是一个适合做个人简历的主题（学院风格）。按照它的方式进行安装，跳过了初始化网站的过程，直接从 git 上克隆一个版本过来。

1
2
3
4
5
6
7
8
9
10
11
12
13
$ git clone https://github.com/sourcethemes/academic-kickstart.git hugo
Cloning into 'hugo'...
remote: Counting objects: 77, done.
remote: Total 77 (delta 0), reused 0 (delta 0), pack-reused 77
Unpacking objects: 100% (77/77), done.

$ cd hugo/

# 初始化主题
$ git submodule update --init --recursive
Submodule 'themes/academic' (https://github.com/gcushen/hugo-academic.git) registered for path 'themes/academic'
Cloning into 'D:/知识库/hugo/themes/academic'...
Submodule path 'themes/academic': checked out 'b02f5ecedabe4494dabee522db3ab843472afa41'

配置

修改一下网站的顶层配置文件，进行相应的配置。

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
# Configuration of Academic
# Documentation: https://sourcethemes.com/academic/

# The URL of your website.
# End your URL with a `/` trailing slash, e.g. `https://example.com/`.
baseurl = "https://yiweiniu.github.io/"

# Title of your site
title = "Yiwei Niu"

# Your copyright notice - appears in site footer.
# To display a copyright symbol, type `&copy;`.
copyright = "&copy; 2018 Yiwei Niu"

theme = "academic"
enableEmoji = true
footnotereturnlinkcontents = "<sup>^</sup>"
ignoreFiles = ["\\.Rmd$", "\\.Rmarkdown$", "_files$", "_cache$"]
preserveTaxonomyNames = true
paginate = 10

# Enable comments by entering your Disqus shortname
disqusShortname = ""

# Enable analytics by entering your Google Analytics tracking ID
googleAnalytics = ""

# Default language to use (if you setup multilingual support)
defaultContentLanguage = "en"
defaultContentLanguageInSubdir = false

[outputs]
  home = [ "HTML", "CSS", "RSS" ]
  section = [ "HTML", "RSS" ]

# Configure BlackFriday Markdown rendering.
#   See: https://gohugo.io/readfiles/bfconfig/
[blackfriday]
  hrefTargetBlank = true  # `true` opens external links in a new tab.
  fractions = true  # `false` disables smart fractions (e.g. 5/12 formatted as a fraction).
  smartypants = true  # `false` disables all smart punctuation substitutions (e.g. smart quotes, dashes, fractions).

[params]
  # Color theme.
  #   Choose from `default`, `ocean`, `forest`, `coffee`, `dark`, or `1950s`.
  color_theme = "default"

  # Font style.
  #   Choose from `default`, `classic`, or `playfair`.
  font = "default"

  # Your details.
  name = "Yiwei Niu"
  role = "Graduate student"

  # Organizations/Affiliations.
  #   Separate multiple entries with a comma, using the form: `[ {name="Org1", url=""}, {name="Org2", url=""} ]`.
  organizations = [ { name = "Institute of Biophysics, Chinese Academy of Sciences", url = "http://www.ibp.cas.cn/" } ]

  gravatar = false  # Get your avatar from Gravatar.com? (true/false)
  avatar = "portrait.jpg"  # Specify an avatar image (in `static/img/` folder) or delete value to disable avatar.
  email = "xiaohuwangwang@qq.com"
  address = "15 Datun Road, Chaoyang District, Beijing, 100101, China"
  office_hours = ""
  phone = ""
  skype = ""
  telegram = ""

  # Enable Keybase in Contact widget by entering your keybase.io username.
  keybase = ""

  # Discussion link (e.g. link to a forum, mailing list, or chat).
  #   Uncomment line below to use.
  #   discussion = { name = "Discuss", url = "https://discourse.gohugo.io" }

  # Diplay a logo in navigation bar rather than title (optional).
  #   To enable, place an image in `static/img/` and reference its filename below. To disable, set the value to "".
  logo = ""

  # Enable/disable map in Contact widget.
  # To show your address on a map in the contact widget, you need to enter your latitude, longitude and choose
  # a map provider below.
  # To use Google Maps, set `map = 1` and enter your API key that can be obtained here:
  #   https://developers.google.com/maps/documentation/javascript/get-api-key
  # To use OpenStreetMap tiles, set `map = 2`.
  # To use OpenStreetMap on a high traffic site, set `map = 3` and enter your API key that can be obtained here:
  #   https://www.mapbox.com/studio/account/tokens
  # To get your coordinates, right-click on Google Maps and choose "What's here?". The coords will show up at the bottom.
  #
  # Map provider:
  #   0: No map
  #   1: Google Maps
  #   2: OpenStreetMap (Mapnik)
  #   3: OpenStreetMap (Mapbox)
  map = 0
  map_api_key = ""
  latitude = "37.4275"
  longitude = "-122.1697"
  zoom = 15

  # Date and time format (refer to Go's date format: http://fuckinggodateformat.com )
  #   Examples: "Mon, Jan 2, 2006" or "2006-01-02"
  date_format = "Jan 2, 2006"
  #   Examples: "3:04 pm" or "15:04"
  time_format = "3:04 PM"

  # Show estimated reading time for posts?
  reading_time = false

  # Display comment count? Requires commenting to be enabled.
  comment_count = true

  # Display next/previous section pager?
  section_pager = false

  # Enable global LaTeX math rendering?
  #   If false, you can enable it locally on a per page basis.
  math = false

  # Highlight.js options
  #   highlight
  #     Enable global source code highlighting?  If false, you can
  #     override it for a particular page in that page's preamble.
  #
  #     Example: highlight = true
  #
  #   highlight_languages
  #     Add support for highlighting additional languages. Support for
  #     languages mentioned here will be included in all pages. You
  #     can also set this variable for a particular page in that
  #     page's preamble.
  #
  #     Example: highlight_languages = ["go", "lisp", "ocaml"]
  #
  #   highlight_style
  #     Choose a different CSS style for highlighting source
  #     code. Setting this option in a page's preamble has no
  #     effect.
  #
  #     Example: highlight_style = "github-gist"
  #
  #   For the list of supported languages and styles, see:
  #   https://cdnjs.com/libraries/highlight.js/
  #
  #   For more info on the highlighting options, see:
  #   https://sourcethemes.com/academic/post/writing-markdown-latex/#highlighting-options
  highlight = true
  highlight_languages = []
  # highlight_style = "github"

  # Enable native social sharing buttons?
  sharing = true

  # Link custom CSS and JS assets
  #   (relative to /static/css and /static/js respectively)
  custom_css = []
  custom_js  = []

  # Publication types.
  #   Used to categorize publications.
  #   The index of the publication type in the list is used as its unique numerical identifier.
  #   The numeric ID is used in a publication's frontmatter to categorize it.
  #   The language can be edited below.
  #   For multilingual sites, `publication_types` can be copied to each language section at the end of this file and
  #   translated.
  publication_types = [
    'Uncategorized',  # 0
    'Conference paper',  # 1
    'Journal article',  # 2
    'Manuscript',  # 3
    'Report',  # 4
    'Book',  # 5
    'Book section'  # 6
  ]

  # Configuration of talk pages.
  [params.talks]
    # Show talk time?
    time = true

  # Configuration of publication pages.
  [params.publications]
    # Date format (refer to Go's date format: http://fuckinggodateformat.com )
    #   Examples: "Mon, Jan 2, 2006" or "2006-01-02"
    date_format = "January, 2006"

  # Configuration of project pages.
  [params.projects]
    # List publications and talks related to the project?
    list_children = true

    # Publication list format.
    #   0 = Simple
    #   1 = Detailed
    #   2 = APA
    #   3 = MLA
    publication_format = 2

  # Social/Academic Networking
  #
  # Icon pack "fa" includes the following social network icons:
  #
  #   twitter, weibo, linkedin, github, facebook, pinterest, google-plus,
  #   youtube, instagram, soundcloud
  #
  #   For email icon, use "fa" icon pack, "envelope" icon, and
  #   "mailto:your@email.com" as the link.
  #
  #   Full list: https://fortawesome.github.io/Font-Awesome/icons/
  #
  # Icon pack "ai" includes the following academic network icons:
  #
  #   google-scholar, arxiv, orcid, researchgate, mendeley
  #
  #   Full list: https://jpswalsh.github.io/academicons/

  [[params.social]]
    icon = "envelope"
    icon_pack = "fa"
    link = "mailto:xiaohuwangwang@qq.com"

  [[params.social]]
    icon = "twitter"
    icon_pack = "fa"
    link = "https://twitter.com/ywniu"

  [[params.social]]
    icon = "weibo"
    icon_pack = "fa"
    link = "//weibo.com/u/3049858680"

  [[params.social]]
    icon = "google-scholar"
    icon_pack = "ai"
    link = "https://scholar.google.com.hk/citations?user=JMK-4AEAAAAJ&hl=en"

  [[params.social]]
    icon = "github"
    icon_pack = "fa"
    link = "//github.com/YiweiNiu"


# Navigation Links
#   To link a homepage widget, specify the URL as a hash `#` followed by the filename of the
#     desired widget in your `content/home/` folder.
#   The weight parameter defines the order that the links will appear in.
[params.menus]
  # Align the main menu to the right of the page? (true/false)
  align_right = true

[[menu.main]]
  name = "Home"
  url = "#about"
  weight = 1

[[menu.main]]
  name = "Publications"
  url = "#publications_selected"
  weight = 2

[[menu.main]]
  name = "Projects"
  url = "#projects"
  weight = 3

[[menu.main]]
  name = "Contact"
  url = "#contact"
  weight = 4

[[menu.main]]
  name = "Blog"
  url = "https://YiweiNiu.github.io/blog/"
  weight = 5

# Taxonomies.
[taxonomies]
  tag = "tags"
  category = "categories"
  publication_type = "publication_types"

# Languages
#   Create a [languages.X] block for each language you want, where X is the language ID.

# Configure the English version of the website.
[Languages.en]
  languageCode = "en-us"

本地预览

1
$ hugo server

部署

先在 git 上建立了一个空的 repo，名字为 YiweiNiu.github.io。

在站点根目录执行 Hugo 命令生成最终页面：

1
$ hugo --theme=academic --baseUrl="https://yiweiniu.github.io/"

（注意，以上命令并不会生成草稿页面，如果未生成任何文章，请去掉文章头部的 draft=true 再重新生成。）

所有静态页面都会生成到 public 目录，将 pubilc 目录里所有文件 push 到刚创建的 Repository 的 master 分支。

1
2
3
4
5
6
cd public
git init
git remote add origin https://github.com/yiweiniu/yiweiniu.github.io.git
git add -A
git commit -m "first commit"
git push -u origin master

浏览器里访问：https://yiweiniu.github.io/ 即可查看。

日常使用

更新 hugo

到 hugo 的 releases 页面下载最新的安装包。

更新主题

1
2
3
4
5
6
7
8
# Display available updates to Academic.
cd themes/academic
git fetch
git log --pretty=oneline --abbrev-commit --decorate HEAD..origin/master
cd ../../

# Update Academic.
git submodule update --remote --merge

更新内容

1
2
3
4
5
6
7
8
# 生成新的
hugo
cd public

git add .
git commit -m "update"

git push -u origin master

参考

0%