2025-07-17

基于Hugo搭建个人Blog

本文为记录博主搭建Hugo博客系统的过程

本文涉及的生产环境概览

Hugo
Ubuntu
Nginx

一、本地搭建

安装Hugo

Ubuntu系统使用官方.deb包安装（按照本地系统所指定的安装包进行安装即可）

在Hugo官网下载(命令下载或手动下载上传安装包)后缀为.deb的hugo_extended的版本(例如hugo_extended_0.148.1_linux-amd64.deb)到你指定的目录（例如/opt）
进入安装包的目录进行安装

cd /opt
sudo dpkg -i hugo_extended_*.deb

创建Hugo站点

Hugo主题配置请参考相关主题所提供的教程

创建Hugo站点
```
hugo new site mysite
cd mysite
```
创建posts目录下my-first-post文章，并启动本地服务，然后用浏览器访问http://localhost:1313网址查看测试结果
```
hugo new posts/my-first-post.md
hugo server
```
生成静态文件，静态文件位于mysite的public/ 文件夹下
```
hugo
```

二、GitHub Pages部署

新建仓库

文件配置

每次更新静态文件后操作

每次写完文章更新静态文件后，进入public文件夹下操作

git add -A
git commit -m "<描述信息>"
git push -u origin main

三、服务器部署

主要是将生成的静态文件进行对外访问，这里采用Nginx进行网站配置

Nginx 安装、配置

安装、验证Nginx

sudo apt update
sudo apt install nginx -y
nginx -v
sudo nginx -t

启动Nginx

sudo systemctl start nginx
sudo systemctl enable nginx

打开浏览器访问http://服务器IP,可以看到 Nginx 欢迎页

启用Hugo站点

配置网站根目录，假设你将站点部署到 /var/www/mysite,将Hugo生成的静态文件复制到该目录下

cd 
sudo cp -r /opt/mysite/public/* /var/www/mysite/

进行 Nginx 配置，新建配置文件：

sudo vim /etc/nginx/sites-available/mysite

添加如下内容，并将<yourdomain.xxx>、<www.yourdomain.xxx>按实际域名地址进行替换：

server {
    listen 80;
    server_name <yourdomain.xxx> <www.yourdomain.xxx>;

    root /var/www/mysite;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

启用mysite站点，添加访问权限后并重载Nginx

sudo ln -s /etc/nginx/sites-available/mysite /etc/nginx/sites-enabled/
sudo chown -R www-data:www-data /var/www/mysite
sudo nginx -t
sudo systemctl reload nginx

绑定域名后，配置https以及证书并自动续期，以我的域名artorias.life为例操作如下

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d artorias.life -d www.artorias.life

打开浏览器访问https://artorias.life即可查看站点

每次更新后操作

cd /opt/mysite
hugo
sudo cp -r public/* /var/www/mysite/
sudo chown -R www-data:www-data /var/www/mysite
sudo systemctl reload nginx