这里介绍一下用hugo搭建博客的全过程。
windows系统，用vs code编辑内容，用hugo生成静态页面，提交到gitee，自动同步到云空间
缘起
想弄一个博客，但云主机太贵，php不懂
希望能够省钱，访问速度快，内容方便迁移
wordpress还是太复杂了，而且不想把内容都存到数据库里
本来就是一些文字和图片内容，为啥要弄那么多复杂的东西？
主要步骤
- 本地环境，安装 HUGO 和 VS CODE(包含插件)
- 七牛云对象存储配置
- 云空间准备，申请域名和备案，宝塔面板创建静态网站
- gitee仓库，webhook配置
具体说明
提前安装好git，用于保存文档的不同版本
- 下载hugo并安装
hugo是go语言开发的，可以把md文件转换成静态页面。go对我们的比较直观的好处是可以编译成可执行文件，在windows下直接执行
这里下载最新版： https://github.com/gohugoio/hugo/releases
注意：下载 windows-amd64.zip (arm是苹果的架构，amd64是amd公司先研发的，所以inter架构也用amd64)
下载后可以把 hugo.exe 所在目录加到path里，或者直接放到自己的博客目录下使用。
- hugo默认没主题，需要找一个主题，我用的 hugo-PaperMod
在刚才创建的目录里面有一个themes，进入这个目录，执行如下命令
1
|
git clone https://github.com/adityatelange/hugo-PaperMod.git PaperMod
|
注意：这里面的"PaperMod"，是创建的新的目录名称，如果不加，目录名为"hugo-PaperMod"。
1
|
hugo new posts/story.md
|
此时，在posts目录下创建了story.md文件，然后就可以在story.md里面用 markdown 语法编辑自己的文章了。
注意：下面这部分是给hugo用的，这里也增加自己的参数（tags、categories）。文章的内容放在这一部分的后面。
1
2
3
4
5
6
7
8
|
+++
title = 'Story'
date = 2024-02-18T22:28:19+08:00
tags = ["blog", "simple"]
categories = ["blog"]
draft = true
+++
|
网上文章配置文件在 config.toml 里面，我这个版本在 hogo.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
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
|
baseURL = 'https://yixiapp.com/'
languageCode = 'en-us'
# 网站标题
title = '一席桑麻的笔记本'
# 主题名称，themes目录下，主题目录的名称
theme = 'PaperMod'
# 放置生成的静态页面目录，默认是在public里面
# 这里改为了docs，是因为之前想放到github上来着
publishDir = "docs"
# 没有这个，主页上就没有标签和分类
[taxonomies]
tag = "tags"
category = "categories"
[params]
defaultTheme = "auto"
disableThemeToggle = "true"
[params.assets]
disableFingerprinting = "true"
[markup]
[markup.highlight]
anchorLineNos = false
codeFences = true
guessSyntax = true
hl_Lines = ""
lineAnchors = ""
lineNoStart =1
lineNos = true
lineNumbersInTable = true
noClasses = true
style = "monokai"
tabWidth = 4
# 这种两个[[]]相当于列表
[[menu.main]]
weight = 1
identifier = "posts"
pre = ""
post = ""
name = "归档"
url = "/posts/"
title = "Posts"
[[menu.main]]
weight = 2
identifier = "tags"
pre = ""
post = ""
name = "标签"
url = "/tags/"
title = "Tags"
[[menu.main]]
weight = 3
identifier = "categories"
pre = ""
post = ""
name = "分类"
url = "/categories/"
title = "Categories"
[search]
enable = true
type = "algolia"
contentLength = 4000
placeholder = ""
maxResultLength = 10
snippetLength = 50
highlightTag = "em"
absoluteURL = false
[search.algolia]
index = ""
appID = ""
searchKey = ""
[footer]
enable = true
# LoveIt 新增 | 0.2.0 自定义内容 (支持 HTML 格式)
custom = ''
# LoveIt 新增 | 0.2.0 是否显示 Hugo 和主题信息
hugo = false
# LoveIt 新增 | 0.2.0 是否显示版权信息
copyright = true
# LoveIt 新增 | 0.2.0 是否显示作者
author = true
# 网站创立年份
since = 2023
# ICP 备案信息，仅在中文显示
icp = '沪ICP备18043359号-1'
# 许可协议信息 (支持 HTML 格式)
license = '<a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a>'
[home]
rss = 10
[home.posts]
enable = true
# 主页每页显示文章数量
paginate = 8
[home.profile]
enable = true
gravatarEmail = ""
avatarURL = "/images/avatar.png"
title = ""
subtitle = ""
typeit = true
social = true
disclaimer = ""
[social]
GitHub = ""
Weibo = ""
Steam = ""
Zhihu = ""
Douban = ""
Devto = ""
Bilibili = ""
Email = ""
Phone = ""
RSS = true
|
以上都是从其它人的文章里copy出来的，并不全懂，里面有些冗余或无效的，请忽略
- 文章编辑
使用vs code安装插件进行编辑，因为markdown是图文分离的，而且之后打算把图片放到网络上，所以使用七牛作为图床。毕竟有免费的10g容量可以使用。即便之后需要付费，也比其它云服务便宜。
使用vs code的原因是，还可以用它写代码。vs code的安装比较简单可自行搜索。
vs code安装了三个插件 Office Viever、Markdown Preview、PicGo
Office Viever 用于编写markdown
Markdown Preview 用于显示预览
PicGo 用于处理图片，把图片上传到七牛云
- 建立网站
购买云服务、域名
如果对 Linux 不熟悉，可以安装宝塔面板
- 文章自动同步
在gitee建一个代码仓库，和本地的docs目录进行关联
用宝塔面板安装 webhook，得到webhook的设置信息
在gitee的仓库和网站的 webhook进行关联
编写webhook的配置文件，当接收到触发时使用git拉取gitee上的最新代码
这样当使用vs code编写好代码时，把代码推送到gitee，gitee触发webhook，webhook拉取最新的代码到网站的目录，从而实现自动部署
后面这几部分的细节以后后空再写