介绍
一直都想要一个好看并简洁的个人动态,之前部署了一个Artitalk,发现界面不好看,虽然可以评论交互,但界面真的不好看,知道看到hugo这个主题,哇,惊艳到我了,真的好好看,Hugo和Hexo类似,都差不多是全静态博客,都是需要本地构建,既然是这样,那也是可以放在GitHub Actions自动构建,这样还是挺方便的。
安装
安装Go
Hugo
使用的Go语言编译,速度飞快,所以我们还要先安装Go语言。
我这里是AMD处理器,你根据自己的情况下载合适的版本,下载完直接安装就好,安装过程可以自己选择安装路径,它会自动配置环境。安装软件应该养成一个好习惯,安装软件自己应该知道每一个软件的安装位置。

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

安装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
| 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自带构建,构建完后将静态文件部署到服务器。
|
效果如下:

启动本地服务器
在Hugo/moments
文件夹下进入命令行,使用以下命令启动本地服务器,功能类似hexo sever
一样的。
使用
案例一:纯文字
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。
|

案例二:单图
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附带图片。
比如说,好看的风景:
|

案例三:图片集
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附带更多的图片,做成图片集。
比如最近打卡的美食们:
|

案例四:网络链接
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)
|
