搭建基于Hugo的个人博客网站

系统：Ubuntu系统，使用的Hugo版本：0.121.0，使用的Hugo主题：PaperMod

确保服务器的防火墙已允许HTTP（80端口）访问。如果你使用的是云服务商的轻量级服务器，需要在云平台控制台安全组中打开80端口

申请好域名后提前进行网站备案，备案成功后与云服务器的ip地址进行解析

一、安装搭建过程

1. 更新并安装必要的依赖

确保你的服务器环境是最新的，并安装Nginx来作为反向代理

sudo apt update && sudo apt upgrade -y
sudo apt install nginx git -y

2. 安装Hugo

通过下载Hugo的0.121.3版本来安装

2.1

# 下载Hugo
wget https://github.com/gohugoio/hugo/releases/download/v0.121.3/hugo_extended_0.121.3_Linux-64bit.deb

# 安装Hugo
sudo dpkg -i hugo_extended_0.121.3_Linux-64bit.deb

如果服务器不能直接访问github，可以下载好安装包，再上传到服务器上，然后解压并安装

# 解压安装包
tar -zxvf hugo_0.121.0_Linux-64bit.tar.gz

# 移动hugo到/usr/local/bin目录，以便全局使用
sudo mv hugo /usr/local/bin/

2.2确认安装是否成功

hugo version

3. 创建博客项目

选择一个目录来存储博客项目，并初始化Hugo项目

#指定目录路径
hugo new site myblog
#创建站点，如果想在当前目录中创建站点，使用 . 表示当前目录
hugo new site .

4.下载Papermod主题

将Papermod主题克隆到项目中

git init
git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

如果服务器不能直接访问github，可以下载papermod安装包上传并解压

# 解压主题文件
unzip hugo-PaperMod-master.zip

# 将解压后的文件夹移动到themes目录并重命名为PaperMod
mv hugo-PaperMod-master themes/PaperMod

在config.toml中启用Papermod主题

theme = "PaperMod"

5.配置网站

在config.toml文件中，根据需要进行网站的基本配置，例如标题、作者、默认语言等。对于Papermod主题，推荐添加如下设置

baseURL = "https://www.liuzh.work"
languageCode = "zh-cn"
title = "博客名称"
theme = "PaperMod"

# 启用的一些Papermod特性
[params]
  ShowReadingTime = true
  ShowShareButtons = true
  ShowPostNavLinks = true
  dateFormat = "2006年01月02日"  # 添加日期格式设置

6.创建内容

使用命令创建一篇新的博客文章

hugo new posts/我的第一篇文章.md

用文本编辑器编辑content/posts/我的第一篇文章.md，并将草稿状态设为false，以便在构建网站时发布此页面

7.本地测试

在服务器上进行本地测试

hugo server -D

通过http://localhost:1313访问，确保站点正常显示

8.构建静态文件

生成网站的静态文件（如果熟练，可以省略第七步，将文件内容写好后，直接生成静态文件）

hugo

静态文件会生成到public目录中

9.配置Nginx

为申请的域名设置Nginx配置

sudo nano /etc/nginx/sites-available/liuzh.work

添加一下内容

server {
    listen 80;
    server_name www.liuzh.work;

    location / {
        root /home/issac/myblog/public;
        index index.html;
    }
}

启用站点并重启Nginx

sudo ln -s /etc/nginx/sites-available/liuzh.work /etc/nginx/sites-enabled/
sudo systemctl restart nginx

10.测试并上线

打开浏览器访问 http://www.liuzh.work 测试。如果一切设置正确，你的Hugo博客站点应该可以正常访问了

二、安装过程出现的问题

1、在安装完成后，通过浏览器访问www.liuzh.work不成功

解决办法：云服务器默认是没有开启80端口的，可以在云服务器安全组中添加入向规则，允许HTTP（80端口访问）

除了上面的解决方法外，其他设置不正确也可能造成访问不成功：

（1）在本地命令行中使用 ping 或 nslookup 命令，查看域名是否正确解析到服务器的ip地址

ping www.liuzh.work
nslookup www.liuzh.work

（2）确保Nginx配置文件中指向的是Hugo生成的 public 文件夹，并且配置文件已经被Nginx加载，重新打开Nginx配置文件 /etc/nginx/sites-available/liuzh.work，确认以下内容正确：

server {
    listen 80;
    server_name www.liuzh.work;

    location / {
        root /home/your-username/myblog/public; # 请替换 your-username 为实际的用户名
        index index.html;
    }
}

更改了配置后，需要重启Nginx

sudo systemctl restart nginx

（3）测试Nginx配置

使用 nginx -t 检查Nginx配置是否有效：

sudo nginx -t

如果显示 syntax is ok，说明配置文件没有问题

（4）检查Hugo生成的文件

确保在 /home/your-username/myblog/public 文件夹中确实有Hugo生成的静态文件。如果 public 文件夹为空，说明可能在执行 hugo 命令时未正确生成静态文件。

可以重新执行以下命令来生成静态文件：

hugo

2、Nginx配置完成后，通过浏览器还是访问不了，通过执行以下命令，确认Nginx是否成功加载了Hugo站点的页面内容：

curl http://localhost
curl http://www.liuzh.work

通过执行curl http://localhot的返回结果，可以看到Nginx的默认站点配置仍在生效，而非我的Hugo站点，通过执行curl http://www.liuzh.work的返回结果，显示403错误，这通常是因为Nginx没有权限访问Hugo生成的public目录，或者public目录的路径在Nginx配置中设置不正确。

解决办法：

（1）确认 /etc/nginx/sites-available/liuzh.work 文件中的 root 路径是否正确（root 指向的路径应该是Hugo生成的public目录）。

（2）检查目录权限，确保Nginx用户有权访问myblog/public目录，可以通过以下命令修改目录权限

sudo chmod +x /home/issac
sudo chmod +x /home/issac/myblog
sudo chmod -R 755 /home/issac/myblog/public
sudo chown -R www-data:www-data /home/issac/myblog/public

完成上述修改后，重新加载Nginx配置：

sudo systemctl restart nginx

3、备案成功后，直接访问www.liuzh.work是可以成功访问的，但是访问网站上的测试博客（子页面）时，访问失败

原因：网站未设置HTTPS，用户或浏览器在默认情况下尝试通过 HTTPS 访问网站，但是站点当前只支持 HTTP，因此当强制 HTTPS 时会遇到访问失败的问题。

解决方案：首先确保443端口开放，然后执行下面的步骤。

（1）在阿里云、腾讯云或华为云的 SSL 证书管理页面申请免费证书，通常会要求域名验证.

（2）证书颁发后，下载证书文件，并手动配置到 Nginx 的 HTTPS 配置中。

（3）更新Nginx配置：将私钥文件和证书文件放在/etc/nginx/ssl目录下，将证书文件路径添加到 Nginx 配置文件中

server {
    listen 443 ssl;
    server_name www.liuzh.work;
    
    ssl_certificate /path/to/your-cert.crt; #安全证书文件路径
    ssl_certificate_key /path/to/your-cert.key; #私钥文件路径

    location / {
        root /home/issac/myblog/public;
        index index.html;
        try_files $uri $uri/ =404;
    }
}

# 如果要将 HTTP 重定向到 HTTPS，可以添加以下配置
server {
    listen 80;
    server_name www.liuzh.work;
    return 301 https://$host$request_uri;
}

重新启动 Nginx，即可使 HTTPS 生效。

一、安装搭建过程#

1. 更新并安装必要的依赖#

2. 安装Hugo#

3. 创建博客项目#

4.下载Papermod主题#

5.配置网站#

6.创建内容#

7.本地测试#

8.构建静态文件#

9.配置Nginx#

10.测试并上线#

二、安装过程出现的问题#