睡前读物第1期: Hugo 建站与部署
Hugo 建站与 Github Actions 自动部署
Hugo 是一个快速且灵活的静态网站生成器，适合用于创建博客、文档和其他类型的网站。 本文旨在记录我自己使用 Hugo 创建个人博客时遇到的问题记录和解决方案。
安装 Hugo 并建站
安装 Hugo 与主题
由于我使用的 loveit 主题需要最新版本的 extended hugo， 因此需要从 Hugo Releases 下载对应的二进制文件。 可以选择通过 Github Releases 页面下载， 也可以使用 wget 命令下载
{hugo_version} 需要替换为最新版本号，比如 0.147.9wget https://github.com/gohugoio/hugo/releases/download/{hugo_version}/hugo_extended_{hugo_version}_Linux-64bit.deb
sudo dpkg -i hugo_extended_{hugo_version}_Linux-64bit.deb
hugo version
创建 Hugo 站点
由于我的站点已经存放在 GitHub 上，因此可以直接克隆仓库到本地。
git clone https://github.com/{username}/{sitename}.git
cd {sitename}
如果是新建站点，可以使用以下命令创建：
hugo new site {sitename}
cd {sitename}
hugo new content posts/{postname}.md
本地构建与预览
本地生成静态文件并预览站点：
hugo build --minify
hugo server -D -e production
然后访问 http://localhost:1313 就可以看到站点预览了。
使用 Nginx 提供对外服务
安装 Nginx
# Ubuntu下安装 Nginx
sudo apt update
sudo apt install nginx
# 检查 Nginx 是否安装成功
nginx -v
sudo systemctl status nginx
# 启动 Nginx 服务
sudo systemctl start nginx
sudo systemctl enable nginx
# 重启/停止 Nginx 服务
sudo systemctl reload nginx
sudo systemctl stop nginx
# 检查默认的 Nginx 配置是否正常
# 可以使用 curl 或是打开浏览器查看
curl localhost:80
配置 Nginx
把 Hugo 生成的静态文件 public/* 放到 Nginx 的根目录下，通常是 /var/www/html 或者 /var/www/{sitename}。
# 创建站点目录
sudo mkdir -p /var/www/[sitename]
sudo cp -r {sitename}/public/* /var/www/{sitename}/
sudo chown -R www-data:www-data /var/www/{sitename}
创建一个新的 Nginx 配置文件，通常位于 /etc/nginx/sites-available/ 目录下。
sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/{sitename}
cd ../sites-enabled
sudo ln -s /etc/nginx/sites-available/{sitename} {sitename}
rm /etc/nginx/sites-enabled/default
# 删除默认配置文件之前可以测试一下默认配置是否正常
编辑 Nginx 配置文件，通常位于 /etc/nginx/sites-available/default 或 /etc/nginx/conf.d/default.conf 。
采用 neovim 编辑器进行编辑可以使用如下命令 sudo nvim {sitename}。
server {
listen 80;
server_name example.com www.example.com; # 替换为你的域名
location / {
root /var/www/{sitename};
index index.html index.htm;
error_page 404 /404.html;
try_files $uri $uri/ =404;
}
}
测试并重启 Nginx
sudo nginx -t
sudo systemctl reload nginx
现在访问 http://example.com 应该就可以看到 Hugo 生成的静态页面了。
配置 HTTPS
如果已有域名，可以使用 Let’s Encrypt 免费申请 SSL 证书。
sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d example.com
根据提示输入你的电子邮件地址，并同意服务条款。Certbot 会自动配置 Nginx 使用 HTTPS。
使用 Github Actions 自动部署
使用 scp 或 rsync 手动部署
scp -r public/ {username}@{hostname}:/var/www/{sitename}
rsync -avz --delete public/ {username}@{hostname}:/var/www/{sitename}
# 注意替换 username 和 hostname 为你的用户名和服务器地址
ssh {username}@{hostname} "sudo chown -R www-data:www-data /var/www/{sitename}"
# 注意把 /var/www/{sitename} 的所有权改为当前用户
Github Actions 工作流
在你的 GitHub 仓库中创建一个 .github/workflows/deploy.yml 文件，内容如下：
name: Deploy Hugo Site
on:
push:
branches:
- main
pull_request:
workflow_dispatch:
jobs:
deploy:
runs-on: ubuntu-24.04
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
steps:
- uses: actions/checkout@v3
with:
submodules: true
fetch-depth: 0
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: '0.147.9'
extended: true
- name: Build
run: hugo --minify
- name: Deploy
uses: burnett01/rsync-deployments@5.2
with:
switches: -avzr --delete
path: ./public/*
remote_path: /var/www/{sitename}/ # 替换为你的站点路径
remote_host: ${{ secrets.DEPLOY_HOST }}
remote_port: ${{ secrets.DEPLOY_PORT }}
remote_user: ${{ secrets.DEPLOY_USER }}
remote_key: ${{ secrets.DEPLOY_KEY }}
配置 GitHub Secrets
在 GitHub 仓库的 Settings -> Secrets and variables -> Actions 中添加以下 Secrets
DEPLOY_HOST: 你的服务器地址DEPLOY_PORT: 服务器 SSH 端口，通常是 22DEPLOY_USER: 服务器 SSH 用户名DEPLOY_KEY: 你的 SSH 私钥内容
生成 SSH 密钥对并把公钥添加到服务器的~/.ssh/authorized_keys 文件中
ssh-keygen -t rsa -C "github action" -f rsa_id
cat rsa_id.pub >> ~/.ssh/authorized_keys
总结
通过以上步骤，你可以使用 Hugo 创建一个静态网站，并通过 Nginx 提供服务，同时使用 GitHub Actions 实现自动部署。这样可以大大简化网站的维护和更新流程。 如果你在部署过程中遇到任何问题，可以参考 Hugo 和 Nginx 的官方文档，或者在社区中寻求帮助。 希望这篇文章对你有所帮助！如果有任何问题或建议，欢迎通过邮箱或Github与我联系