介绍

一直都想要一个好看并简洁的个人动态,之前部署了一个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_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