更换阵地,Hugo初体验
文盲 / 2023-04-30
几年之后,重新捡起了久未更新的博客,准备操练操练,这是新新新的开始,所以我摈弃了之前用的挺好的hexo,改为使用Hugo。目前的部署方式极其简单,主要就两步,安装Hugo和配置nginx:
安装入门Hugo
由于Hugo的版本直接是编好的二进制,所以直接在github下载最新版本的tar包,将hugo文件解压到 /usr/local/bin/
目录下,使得hugo命令可以执行即可。
创建网站
可以很快地依次执行以下命令,便可以创建一个博客网站的架子:
# 创建目录,生成基本文件
hugo new site [目录]
# 进入主题目录,clone自己喜欢的主题
cd [目录]/themes/
git clone [主题仓库]
# 生成第一篇文章
hugo new post/first.md
# 发布更新
hugo --theme=[主题名称] --baseUrl="[网站地址]"
此时博客网站已经发布了,但是还无法直接访问域名看到效果如果想要看到效果,则还得使用nginx配置代理。
安装配置nginx
nginx的安装比较痛苦,因为我发现自己ECS是无法直接使用 yum -y install nginx
命令安装的,确认了yum源是无误的,确认了nginx包也存在于yum源中,但是结果仍旧是无法找到包。于是折腾许久之后我只能从官网下载rpm包,以rpm包的方式直接安装:
# 拉取RPM包,可根据自己的系统版本以及所需版本自行下载对应版本
wget http://nginx.org/packages/centos/7/x86_64/RPMS/nginx-1.20.1-1.el7.ngx.x86_64.rpm
# 安装
rpm -ivh nginx-1.20.1-1.el7.ngx.x86_64.rpm
# 查看nginx版本
nginx -v
安装完成之后,打开位于 /etc/nginx/conf.d/default.conf
目录下的配置文件,开始进行配置:
server {
# http 80端口,默认rewrite转为https
listen 80;
server_name [域名];
rewrite ^(.*)$ https://$server_name$1 permanent;
}
server {
# https 443端口
listen 443;
# 改成自己的域名
server_name [域名];
# 启动ssl,使用https
ssl on;
ssl_certificate [.crt或.pem文件路径];
ssl_certificate_key [.key文件路径];
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP;
ssl_prefer_server_ciphers on;
location / {
# 目录与hugo命令生成的目录一致
root [目录]/public/;
index index.html index.htm;
}
}
配置完成之后,使用 systemctl start nginx
命令启动nginx即可,如此便可使用域名进行访问。
配置页面+主题修改
参照相关文档,可以简单修改配置文件,hugo使用网站根目录下的 config.toml
进行配置,首先配置 baseURL
和 theme
,将二者固化到配置文件之后,以后更新网站内容只需执行 hugo
命令即可,后面无需加任何参数,会更加方便。由于我主要用中文写博客,所以 language
改成中文。
baseURL = 'https://wendemang.com'
languageCode = 'zh-CN'
theme = 'hugo-ivy'
页面添加
我使用该主题目前主要需要添加首页、关于和归档三个页面,首页自不必多说,即打开网站第一眼就看到的页面,关于即个人相关介绍,归档用于以时间线的方式展示所有博客。
[[menu.main]]
name = "主页"
url = "/"
weight = 1
[[menu.main]]
name = "关于"
url = "/about/"
weight = 2
[[menu.main]]
name = "归档"
url = "/archive/"
weight = 3
上面的配置中,weight
用于控制链接的摆放顺序,url
则是访问时的相对地址。添加配置之后,当然还需生成页面,即 .md
文件,最终这些文件的内容会被套上主题渲染成为一个个页面,也就是我们最终访问地址所看到的效果。分别生成 _index.md
用于主页内容显示,about.md
用于关于页面显示,写入相关内容并提交之后便可在网页看到。
而归档页实际是没有的,就算你生成一个页面,也总不能每次写一篇博客就往归档的文档里加一条记录把,所以这个需要稍微修改一下主题文档,再加一个页面,如这篇博客显示,使用 single.html
小改便可实现。
字体更改
看了主题原作者的博客,其也是使用思源宋体,遂参考其思源宋体这篇博客进行了修改,使用了 Typekit(这里我点击其链接之后已经跳转的是adobe的页面了,应该是同一个东西)。
首页修改
这个主题的首页也默认类似归档,是展示每篇博文的,但是不太符合我的需求,我新加的归档页面也会被展示,这显然不是我希望的,所以将归档中循环直接用于首页中;但同时,我只希望首页所展示的,只是我近期所更新的内容,这样手首页和归档就不冲突了,查询hugo文档,直接复制粘贴,在 range
循环前加条件 first
:
<ul>
{{ range (.Site.RegularPages.GroupByDate "2006") }}
<!-- 如下行更改,只展示最新的5篇 -->
{{ range first 5 (where .Pages "Type" "post") }}
<!-- 省略中间内容... -->
{{ end }}
{{ end }}
</ul>
暂时就是这些,后续有其他更改我也会一一记录~