使用hugo创建博客很简单, 通常只需要简单的几步就可以完成. 当前前提是你的系统里面已经安装好了hugo. 如果没有请看这里

第一步创建网站

1

hugo new site 路径  # 如: hugo new site /document/myblog

这时我们可以在myblog文件夹中看到如下目录结构:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

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

config.toml : 网站的配置文件.
content : 文章存放的地方.
themes : 网站主题存放的地方.
stattic : 静态资源存放的地方, 如 图片, 样式文件, 脚本文件等, 对于文章中的图片, 建议使用专门的图床.

作为以写作为主打的博主, 知道以上目录的含义, 就可以开始写作了.

第二步选择主题

hugo社区有很多免费的主题供我们选择, 大家可以选择一个自己喜欢的主题, 下载后保存在themes目录下面.

  • 通过命令行的方式使用主题: hugo -t 主题目录名
  • 通过在config.toml配置使用: theme = “主题目录名”

第三步创建/编写文章

1

hugo new [路径]文章名.md

hugo new会创建包含默认元数据的文章, 这时作者已经可以使用任何自己喜欢的编辑工具来编辑这篇文章了.

在创建文章时, 如果没有路径, 文章会保存在content目录中, 如果包含路径则会在content目录中创建对应的目录.

1
2
3
4
5
6
7

hugo new about-me.md
hugo new post/first.md
# 执行上面两条语句后content的目录结构
├─content
│    about-me.md
├────post
│        first.md

新生成的文章会在开始部分添加元数据, 数据格式为 yaml toml json格式如下

1
2
3
4
5
6
7

+++
title = "my first blog"
date = "2019-10-28T09:38:35+08:00"
draft = true
+++ 

markdownz正文部分
1
2
3
4
5
6
7

---
title = "my first blog"
date = "2019-10-28T09:38:35+08:00"
draft = true
---

markdownz正文部分
1
2
3
4
5
6
7

{
    "title": "my first blog",
    "date": "2019-10-28T09:38:35+08:00",
    "draft": "true"
}

markdownz正文部分

draft=true表示文章默认为草稿, 在生成网站或预览网站的时候草稿是不会被生成页面的.

第四步生成网站

1

hugo -d 目标路径

如果不指定目标路径, 会默认在public目录下生成可部署的网站.

本地预览网站

写一篇文章生成一次会很繁琐, 我们通过hugo server -D本地生成网站预览. 他会监控页面的更改, 并刷新页面.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

Building sites …
                   | ZH-CN
+------------------+-------+
  Pages            |    13
  Paginator pages  |     0
  Non-page files   |     0
  Static files     |    41
  Processed images |     0
  Aliases          |     2
  Sitemaps         |     1
  Cleaned          |     0

Total in 407 ms
Watching for changes in C:\Users\root\Desktop\hugo-blog\{content,data,layouts,static,themes}
Watching for config changes in C:\Users\root\Desktop\hugo-blog\config.toml
Environment: "development"
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

默认地址为: http://localhost:1313/ 如果1313端口被占用, 会随机生成其他的端口. -D(大写)参数作用是为草稿文件生成预览