hugo 建站记录

Hello World, Hello Blog

Posted by 夏启钊 on Saturday, May 20, 2023

“Yeah It’s on. ”

Hugo 建站记录

从零开始记录一下建站的过程，留下一点笔记，是面向零基础小白的，所以写的比较详细（啰嗦）。

之前接触过的建站工具有WordPress和Hugo。这里先做下对比，WordPress是一个很有名的历史悠久的建站工具，会方便一点。部署体验上，阿里云服务器的镜像里面有一个WordPress的镜像，没有试过，但是感觉上会方便部署。具体到WordPress的使用体验上主要有两个优点，第一个是有控制台，可以直接在网页上的图形界面里设置主题，防火墙策略，安装插件等配置。第二个优势是WordPress有富文本编辑器，可以直接写markdown的博客。同时安全性上来说，WordPress应用比较广泛，可能遭受的攻击也会多一点。有一个叫wordefence的官方安全社区，会定期披露cve和补丁，使用的话可以关注一下。

Hugo相较而言，就没那么容易操作友好。这里发布博文只能写markdown再编译成静态网页发布，稍微麻烦一点点。同时安全性上来说，hugo由于是一个静态网页的网站，没有后端服务器和数据库，稍微会安全一些（攻击面会少）。好处是可以把网站打包成git会方便一点，依赖比较少。（WordPress的话有一些用户名密码是存在mysql数据库里面的，放在github上感觉没有很方便，虽然有duplicator之类的插件可以复制网站。扯远了，个人感觉hugo易于打包上传github是一个优点）

0. 建站之前

建站之前要准备一些软件和服务。

首先要找一家云，买一个服务器，一个图床，一个域名。比如可以在阿里云上买：一个轻量应用服务器（99RMB/年），一个对象存储OSS（图床用，9RMB/月），一个域名（价格不等，三个字名字没人用的com域名一般是63RMB/年，虽然com域名指的是commercial，但是默认这个域名最常见）。

本地要安装的软件有typora（markdown编辑器），picgo（图床），xshell（ssh连接阿里云的轻量应用服务器）

1. 安装Hugo

首先使用xshell连接服务器：打开xshell，文件\新建会话，ip和用户名密码在轻量服应用服务器管理控制台。

这里直接记录环境配置的shell脚本，服务器系统是CentOS8.2。

sudo yum update

# 解决yum install报错问题
cd /etc/yum.repos.d
rm -rf ./*
wget -O /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-vault-8.5.2111.repo
yum makecache
# 参考：https://blog.csdn.net/weixin_42170236/article/details/124382239

cd ~
mkdir Download
cd Download

# 安装go，参考：https://go.dev/doc/install
wget https://go.dev/dl/go_version.linux-amd64.tar.gz
# 这里的releases网址：https://go.dev/dl/
rm -rf /usr/local/go && tar -C /usr/local -xzf go_version.linux-amd64.tar.gz
vim ~/.bash_profile
source ~/.bash_profile

go version
# go安装完成

# 安装hugo，参考：https://gohugo.io/installation/linux/#prebuilt-binaries
cd ~/Download/

# 这里的wget参考：https://github.com/gohugoio/hugo/releases
wget https://github.com/gohugoio/hugo/releases/download/version/hugo_version_linux-amd64.tar.gz
tar -zxvf hugo_version_linux-amd64.tar.gz
sudo mv hugo /usr/local/bin/
hugo version
# 安装完成，可以开始设置网站了

sudo yum install git

注意，这里需要替换一下url里面的version才可以用（有点担心哪天忘了更新，用到的版本突然报出来CVE，就用version替代了）

参考1：https://blog.csdn.net/weixin_42170236/article/details/124382239（解决yum install报错问题）

参考2：https://go.dev/doc/install（安装go）

参考3：https://gohugo.io/installation/linux/#prebuilt-binaries（安装hugo）

参考4：https://github.com/gohugoio/hugo/releases（hugo官网下载地址）

2. Hugo创建site

hugo version成功之后就可以创建site了，这里没啥说的，主要是导入theme，比较方便。写blog的话在/content/post这个路径下，但是各个theme的github文档可能参差不齐，这里只记录一下我用过的。

hugo new site <网站目录名>	# 创建一个新的网站
# 在https://themes.gohugo.io/里找一个themes套过来，这里使用的是https://github.com/zhaohuabing/hugo-theme-cleanwhite

# 可以直接将主题添加为子模块，主页的设置在/config.toml文件
mkdir themes
git submodule add https://github.com/zhaohuabing/hugo-theme-cleanwhite.git themes/hugo-theme-cleanwhite
# 这里还需要对/config.toml文件做一些修改，也可以参考zhaohuabin的github，在exampleSite/config.toml这个路径下。一些title和主页文字、图片都是在这里设置的。
hugo serve -t  hugo-theme-cleanwhite
# 本地部署成功

但是注意，虽然这里已经部署起来了，但是部署的位置是轻量应用服务器的localhost，还需要配置转发才能看到。这里我们另外打开一个cmd，而不是xshell。

ssh -L <本地端口>:localhost:1313 <用户名>@<服务器IP地址>	
# 这里替换简括号内部的内容，命令的目的是将本地端口转发到服务器端口1313，转发之后，在本地浏览器访问localhost:8080（以8080端口为例），就可以访问到site了。

Tips：阿里云的轻量应用服务器也可以拍摄快照，在轻量服应用服务器管理控制台/服务器运维/快照这里，方便服务器实例出问题了回滚。

参考1：https://github.com/zhaohuabing/hugo-theme-cleanwhite（使用的这个开源主题，非常感谢作者）

参考2：https://themes.gohugo.io/（可以选一下自己喜欢的主题）

3. 把网站部署到public ip：Nginx

本地部署完成后就可以继续部署到公网IP即域名。但是注意：这里的域名是要备案的，备案需要挺长时间的：以阿里云为例，阿里云备案的话阿里云审核要1天，工信部管局审核大概要20天，最多20个工作日左右，但是实际只有10个工作日左右就备案完成了。

备案完成之后，在阿里云的服务器控制台绑定一下域名（这里绑定了之后Nginx里面就不用写域名了），之后安装Nginx：

yum install openssl zlib pcre
yum install nginx
yum -y install nginx
systemctl enable nginx
systemctl start nginx
systemctl start nginx.service
# 这里访问域名已经可以访问了

这里访问域名就已经可以访问了：

3.1 配置Nginx以显示主页

这里Ngnix安装之后显示的是Nginx自己的欢迎页面，还需要配置一下，才能显示主页，配置过程如下

# 在hugo工作目录下
hugo	# 在hugo工作目录下的public文件夹内生成静态网页内容
cd ./public
pwd	# 记住等会要替换的路径

vim /etc/nginx/nginx.conf	# 替换路径，替换内容在下一个代码块里
# 替换完成后
sudo nginx -s reload	# 重新加载

/etc/nginx/nginx.conf中需要替换的内容：

# 将root指令的值更改为您Hugo生成的网站的根目录路径。
root /path/to/hugo/public;

# 在server块中的location块中，将它的root指向Hugo网站的根目录。这样，所有对域名的请求都将指向Hugo生成的网站。请在server块的内部添加以下配置：
location / {
    root /path/to/hugo/public;
    index index.html;
}

# 注释掉或删除默认的location块和相关的error_page指令。

# error_page 404 /404.html;
#     location = /40x.html {
# }

# error_page 500 502 503 504 /50x.html;
#     location = /50x.html {
# }

3.2 部署公网ip时可能会遇到的403问题

这里修改完成后，直接访问网站可能会遇到403问题，有一篇很好的博客介绍解决办法。具体的问题大概率是用户权限的问题，也就是下面博客中的第二个问题。

用户权限的解决办法：

  • 上面博客的中心思想：
    • 精细控制:网页根目录要用x权限(也就是可以cd进去)
    • 网页所在的父级目录要有r(可读权限)
      • 注意：这里的父级目录r权限应该是递归的。从根目录开始一级一级目录的检查，比如这里可能会遇到的一个问题就是：因为阿里云轻量应用服务器默认连接的用户是root，所以~目录就是/root，但是/root目录给other用户是没有任何rwx权限的，可能导致按照下面参考博客里面的方法检查之后还是403错误。
  • BTW，这里ssh进去的权限自动是root权限。
  • 一些Linux用户权限管理的简单基础知识
    • Linux权限管理分三个rwx三元组，第一个rwx是文件的拥有者，第二个rwx是文件同组用户的权限，第三个rwx是其他组创建的权限。这里来说的话直接看第三个rwx就行，因为之前我们运行的所有命令都是root用户执行的，而Nginx在linux系统中的用户是nginx（默认，也可以在/etc/nginx/nginx.conf最开始的user直接改成root，但是不太建议，权限控制还是要最小化，如果改成root就不用看这个解决办法下面的内容了）
    • ls -l命令：查看文件的详细信息，包括权限
    • chmod o+x filename：这个命令可以更改文件，这里的x表示加可修改权限，r表示可读，w表示可写。
  • 完整命令：安全起见这里不贴完整命令了hhh，还没有试过，有点担心目录遍历漏洞hhh（但是简单试了一下hugo是没有这个漏洞的，已经被过滤了）

参考1：https://rumenz.com/rumenbiji/nginx-403-forbidden.html（上面提到过的解决办法）

参考2：https://cloud.tencent.com/developer/article/1766266（其他讲403问题的文档）

参考3：https://www.kancloud.cn/lijianlin/nginx/1196077（一个nignx的文档，解释了nginx.conf的结构）

4. SSL证书申请和配置

这里我们还需要设置网站可以被https访问，需要申请一个SSL证书，具体解释PKI体系的话有点复杂，感兴趣的话可以看（https://www.cnblogs.com/precedeforetime/p/13390761.html）。

申请和下载证书直接参考：https://developer.aliyun.com/article/1212043（这个文档讲了申请和下载证书）

安装证书直接参考：https://help.aliyun.com/document_detail/98728.htm?spm=a2c4g.11186623.0.0.4c5845b7mFWgir#concept-n45-21x-yfb

5. 写博客

在/hugo工作目录/content/post目录下新建.md文件，模板如下：

---
layout:     post
title:      "hugo 建站记录"
subtitle:   "Hello World, Hello Blog"
date:       2023-05-20
author:     "无名氏"
URL: "/2023/05/20/hugo install/"
---

> “Yeah It's on. ”

完结撒花！可以开始写博客了。

6. 没有写的

  1. 图床的使用：如果我们希望在博客中插入一些图片，就需要使用图床，把希望插入的图片上传到阿里云之类的OSS，之后会得到关于这个图片的一个url，在博客（比如markdown文档）中插入这个url，图片可以显示。但是这里就不介绍图床使用教程了，有点太啰嗦了hhh。
  2. git hook：可以参考https://blog.csdn.net/BAR_WORKSHOP/article/details/121078946
  3. git、vim、linux基础命令：太基础了就先算了hhh
  4. markdown语法

7. 写markdown的时候要注意的一些排版问题

  1. 图床图片写的时候记得![](URL)，这里的方括号内不要放东西，不然链接会漏出来很丑
  2. 直接放超链接的话记得加<>，不然就是文本，没有跳转效果（参考：https://www.cnblogs.com/gitwow/p/10779386.html）
  3. 超链接在新窗口打开暂时还没有一个很好的办法，只能手工右键点新窗口打开。

7. Reference

themes：https://github.com/zhaohuabing/hugo-theme-cleanwhite

CATALOG
    FEATURED TAGS
    FRIENDS