文盲

读书无多,识字不广

更换阵地,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 进行配置,首先配置 baseURLtheme ,将二者固化到配置文件之后,以后更新网站内容只需执行 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>

暂时就是这些,后续有其他更改我也会一一记录~