Hugo - 安装、设置及使用

Hugo 官方主页：https://gohugo.io

待选主题：

https://github.com/cdipaolo/gindoro

https://github.com/oserz/hugo-oser

hugo 是基于 Go 语言的静态网站生成器。有两种方式发布生成的静态网站文件：

• 放到自己的服务器上提供服务：需要自己购买服务器
• 把网站托管到 GitHub Pages：需要将静态页面文件 push 到 GitHub 的博客项目的 gh-pages 分支并确保根目录下有 index.html 文件。

安装

从 hugo 的 GitHub 仓库 下载安装包，使用即可。我使用的是 hugo_0.40.3_Windows-64bit.zip 这个版本。下载解压后添加到 Windows 的系统环境变量的 PATH 中即可，不需安装。

使用

初始化项目

我的域名是 kikakika.com，所以项目直接使用这个名字：

C:\Users\kika>hugo new site kikakika
Congratulations! Your new Hugo site is created in C:\Users\kika\kikakika.

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.

根据提示信息，分别下载主题、添加内容后，就可以在本机启动 hugo 自带的服务器调试博客。

命令执行后创建项目目录，其中的目录结构为：

├─archetypes
├─content
├─data
├─layouts
├─static
├─themes
└─config.toml

config.toml 是网站的配置文件，hugo 同时还支持 YAML 格式的 config.yaml 或 JSON 格式的 config.json。content 目录放 markdown 文章，data 目录放数据，layouts 目录放网站模板文件，static 目录放图片、css、js 等静态资源，themes 命令放下载的主题。

下载主题

hugo 默认不带主题，但是没有主题的话又无法工作。所以，请在 主题网站 选择你看中的主题后，点击下载链接从 GitHub 下载到 themes 目录中。

C:\Users\kika\kikakika>cd themes

C:\Users\kika\kikakika>git clone https://github.com/Xzya/hugo-bootstrap.git
Cloning into 'hugo-bootstrap'...
remote: Counting objects: 151, done.
remote: Compressing objects: 100% (8/8), done.
remote: Total 151 (delta 3), reused 8 (delta 3), pack-reused 140
Receiving objects: 100% (151/151), 396.17 KiB | 222.00 KiB/s, done.
Resolving deltas: 100% (57/57), done.
Checking connectivity... done.

检查 themes 目录下是否成功下载主题：

C:\Users\kika\kikakika\themes>tree
文件夹 PATH 列表
卷序列号为 00000049 30BD:DD70
C:.
└─hugo-bootstrap
    ├─exampleSite
    │  ├─content
    │  │  └─post
    │  └─layouts
    │      └─partials
    ├─i18n
    ├─images
    ├─layouts
    │  ├─partials
    │  └─_default
    └─static
        └─css

添加内容

在项目目录中执行 hugo new XX.md 命令，会在 content 目录中创建这个 XX.md 文件。

hugo new about.md

这个文件的默认内容如下：

---
title: "About"
date: 2018-05-22T22:04:26+08:00
draft: true
---

文件默认内容在，draft 表示是否是草稿，编辑完成后请将其改为 false，否则编译会跳过草稿文件。具体的博客内容在下面写：

---
title: "About"
date: 2018-05-22T22:04:26+08:00
draft: false
---

大家好，我是渣渣辉。
# 简介
- 出生地：香港
- 性别：男
- 年龄：38

# 演员经历
1. 是兄弟就来啃我
1. 是兄弟就来啃我啊
1. 是兄弟就来啃我啊哈哈

对于博客文件，通常放在 content/post 目录中：

hugo new post/my-first-blog.md

启动 hugo 自带的服务器

在项目根目录下，通过 hugo server 命令可以使用 hugo 内置服务器调试预览博客。--theme 选项可以指定主题，--watch 选项可以在修改文件后自动刷新浏览器，--buildDrafts 包括标记为草稿（draft）的内容。

C:\Users\kika\kikakika>hugo server --theme=hugo-bootstrap --buildDrafts --watch
[K25lBuilding sites … [?25h
                   | EN
+------------------+----+
  Pages            |  8
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  1
  Processed images |  0
  Aliases          |  3
  Sitemaps         |  1
  Cleaned          |  0

Total in 175 ms
Watching for changes in C:\Users\kika\kikakika\{content,data,layouts,static,themes}
Watching for config changes in C:\Users\kika\kikakika\config.toml
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

首页：



About 页面：

编译静态网站

Hugo 在构建之前不会移除生成的文件。一个简单的解决方法是对开发环境和生产环境使用不同的目录。

可以指定单独的目录（例如 dev/）来启动构建草稿内容的服务器（有助于编辑）：

hugo server -wDs ~/Code/hugo/docs -d dev

内容完成后，可以使用默认的 public/ 目录。此时会忽略所有标记为 draft: false 的文件：

hugo -s ~/Code/hugo/docs

最终我们需要的是静态的 HTML 文件。--theme 选项指定主题，--baseUrl 指定了项目的网站。最终静态文件生成在 public 目录中：

C:\Users\kika\kikakika>hugo --theme=hugo-bootstrap --baseUrl="https://blog.kikakika.com"
[K25lBuilding sites … [?25h
                   | EN
+------------------+----+
  Pages            |  7
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  1
  Processed images |  0
  Aliases          |  3
  Sitemaps         |  1
  Cleaned          |  0

Total in 114 ms

C:\Users\kika\kikakika>dir public
2018/05/22  22:38    <DIR>          .
2018/05/22  22:38    <DIR>          ..
2018/05/22  22:38             3,336 404.html
2018/05/22  22:38    <DIR>          categories
2018/05/22  22:15    <DIR>          css
2018/05/22  22:38             3,375 index.html
2018/05/22  22:38               480 index.xml
2018/05/22  22:38    <DIR>          page
2018/05/22  22:38               455 sitemap.xml
2018/05/22  22:38    <DIR>          tags
               4 个文件          7,646 字节
               6 个目录 20,104,409,088 可用字节

常见问题

Unable to locate Config file

启动 hugo 内置服务器时，会在当前目录执行的目录中寻找项目的配置文件。所以，需要在项目根目录中执行这个命令，否则报错如下：

C:\Users\kika\kikakika\themes>hugo server --theme=hugo-bootstrap --buildDrafts --watch
Error: Unable to locate Config file. Perhaps you need to create a new site.
       Run `hugo help new` for details. (Config File "config" Not Found in "[C:\\Users\\kika\\kikakika\\themes]")

Unable to find theme Directory

hugo 默认在项目中的 themes 目录中寻找指定的主题。所有下载的主题都要放在这个目录中才能使用，否则报错如下：

C:\Users\kika\kikakika>hugo server --theme=hugo-bootstrap --buildDrafts --watch
Error: Unable to find theme Directory: C:\Users\kika\kikakika\themes\hugo-bootstrap

生成的网站没有文章

生成静态网站时，hugo 会忽略所有通过 draft: true 标记为草稿的文件。必须改为 draft: false 才会编译进 HTML 文件。