介绍

一直都想要一个好看并简洁的个人动态，之前部署了一个Artitalk，发现界面不好看，虽然可以评论交互，但界面真的不好看，知道看到hugo这个主题，哇，惊艳到我了，真的好好看，Hugo和Hexo类似，都差不多是全静态博客，都是需要本地构建，既然是这样，那也是可以放在GitHub Actions自动构建，这样还是挺方便的。

安装

安装Go

Hugo使用的Go语言编译，速度飞快，所以我们还要先安装Go语言。

Go语言下载地址：https://golang.google.cn/dl/

我这里是AMD处理器，你根据自己的情况下载合适的版本，下载完直接安装就好，安装过程可以自己选择安装路径，它会自动配置环境。安装软件应该养成一个好习惯，安装软件自己应该知道每一个软件的安装位置。

01-安装go语言-20230319-926

安装完后打开命令行，查看go是否安装成功，如果已经安装了成功，但是没有显示以下内容，则自己主动去环境变量，在系统变量中的Path变量，在Path变量中添加Go/bin的安装路径即可，重新打开终端输入以下内容就好了。

1
go version

02-查看go版本-20230319-959

安装Hugo

Hugo仓库地址：https://github.com/gohugoio/hugo

我这里建议下载hugo_extended_0.85.0_windows-bit64版本，我在此之前使用的最新版，发现总是有奇怪的bug，询问了作者，作者建议使用该版本，该版本没有问题，可以正常使用。

下载完该压缩包后，将该压缩包的hugo.exe文件粘贴到Go/bin目录下即可。

拉取主题

在本地电脑Hexo博客目录旁边新建一个Hugo目录，打开命令行，执行以下三条命令：

1
2
3
hugo new site moments
cd moments
git clone https://github.com/FarseaSH/hugo-theme-moments themes/moments

配置个人信息

下载好主题后，进入Hugo/moments目录，该目录下有个config.toml文件，打开它，按照以下模板配置自己的信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 你所部署发布的网站地址。如果你的主页url是在域名子路径下（如http://blog.hikki.site/link/moments），请务必设定此项。
baseURL = "https://blog.hikki.site/link/moments" 
languageCode = "zh-Hans"
theme = "moments" # 使用主题
paginate = 10   # 单页显示动态的数量
paginatePath = '.' 


[params]
    title = "小码同学的动态" # 封面顶端标题
    signature = "喜欢的东西就努力去追求，万一成功了呢！" # 页面顶端签名
    cover = "https://bu.dusays.com/2023/03/18/641496c1ec727.jpg" # 封面顶端图
    name = "小码同学" # 发布人名字
    avatar = "img/avatar.jpg"  # 发布人头像
  • baseURL: 你所部署发布的网站地址。如果你的主页url是在域名子路径下（如 http://site.com/subpath/），请务必设定此项。
  • paginate: 单一页面上，显示的Moment的数量
  • title: 页面顶端的标题
  • signature: 页面顶端的签名
  • cover: 页面顶端的封面图
  • name: Moment默认发布人
  • avatar: Moment默认发布人的头像

创建第一条个人动态

打开命令行，输入以下内容：

1
hugo new moments/第一条动态.md

运行完该命令后，在/Hugo/moments/content/moments文件夹下有一个第一条动态.md文件，该文件写入以下内容：

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
---
# 置顶 (如需置顶这片Moment, 则将值设定为大于0的整数, 值越小越靠前，例如1会将moment放在最顶端)
top: 1

# 名称（不填写则为设置的默认名称）
name: 小码同学

# 头像（不填写则为设置的默认头像）
avatar: https://bu.dusays.com/2022/11/04/636511250b21b.jpg

# 发布时间
date: 2023-03-18T00:43:14+08:00

# 给Moment添加标签
tags:
 - 博客

# 附加信息（选填1项或者不填写）
# 附加信息类型1:单个图片
pictures:
 - https://bu.dusays.com/2022/11/15/6372826ed3118.jpg

# 附加信息类型2:网页链接
# link：127.0.0.1
# link_text：必填，链接显示的文字；
# link_logo：选填，网页logo，现在支持部分网站自动找到对应图标，无需自己添加图标
link:
link_text: 这是啥
link_logo: https://bu.dusays.com/2023/03/18/64149ddb788bc.png

# 备注信息
note: 
---

<!-- 动态正文内容 -->

终于有个喜欢的博客动态了，采用*FarseaSH*小姐姐的动态系统，有点点像微信的朋友圈，感觉这种更加合适个人动态，没有过多的花里胡哨，只有简洁的文字和图片。该系统使用的*Hugo*博客框架，构建速度飞快，使用Hugo和Hexo也类似，在本地写文章，push到gitee，gitee同步仓库到GitHub，使用GitHub Actions自带构建，构建完后将静态文件部署到服务器。

效果如下：

04-第一条动态-20230319-258

启动本地服务器

在Hugo/moments文件夹下进入命令行，使用以下命令启动本地服务器，功能类似hexo sever一样的。

1
hugo server

使用

案例一：纯文字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
name:
avatar:

date: 2021-08-01T11:33:28+08:00

tags:
 - default
 -

note: 这是纯文字的moment
---
当然，你也可以什么都不附带，只发送纯文字moment。

00-纯文字-20230319-315

案例二：单图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
---
name: 福斯特
avatar: https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn17%2F0%2Fw400h400%2F20181111%2F89f9-hnstwwq6307162.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630729931&t=e8c4135ba966d5fbfd5d30adf96551c0

date: 2021-08-04T23:57:46+08:00

tags:
 - 图片
 - 最新moment

pictures: 
 - https://bu.dusays.com/2022/11/15/6372826ed3118.jpg

note: 这是加入图片的moment
---

你可以为每条moment附带图片。

比如说，好看的风景：

01-单图-20230319-544

案例三：图片集

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
---
name: 赛肯德
avatar: img/avatar.jpg

date: 2021-08-04T11:57:49+08:00

tags:
 - 图片集
 - 美食

pictures:
 - https://p8.itc.cn/images01/20210119/628400a0528c4dc696efdac8749b176d.jpeg
 - https://cdn.pixabay.com/photo/2016/01/11/07/18/cupcakes-1133146_1280.jpg
 - https://cdn.pixabay.com/photo/2016/10/13/11/44/chocolates-1737503_1280.jpg
 - https://cdn.pixabay.com/photo/2016/01/11/07/18/cupcakes-1133146_1280.jpg

note: 这是附带图片集的moment
---

你也可以为每条moment附带更多的图片，做成图片集。

比如最近打卡的美食们：

02-多图-20230319-252

案例四：网络链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
---
name: 瑟德
avatar: 

date: 2021-08-03T11:57:40+08:00

tags:
 - 链接
 - Github
 - 不知道贴什么标签

link: https://www.github.com
link_logo:
link_text: GitHub - Where the world builds software · GitHub

note: 这是加入链接的Moment
---
你也可以像这样附带网络链接。

GitHub是通过Git进行版本控制的软件源代码托管服务平台，由GitHub公司（曾称Logical Awesome）的开发者Chris Wanstrath、P. J. Hyett和汤姆·普雷斯顿·沃纳使用Ruby on Rails编写而成。（引用自Wikipedia）

03-附带网络连接-20230319-897