Git+宝塔面板部署Hugo博客

发布于:2025-07-28 ⋅ 阅读:(10) ⋅ 点赞:(0)

目前国内的git服务厂商逐渐停止了对git pages的支持,而git lab的访问速度又不太稳定,于是改成了云端自建的方案,总结成文。

示例站点:http://www.janborn.fun/


本文所使用的系统环境如下:

  • 本地:win11
  • 云服务器:腾讯云轻量服务器,OpenCloudOS

需要了解linux系统的基本操作。

准备工作

在正式开始之前,需确保本地已安装以下组件:

  • go
  • Hugo
  • Git

若已具备,可跳过本节。

安装go环境

官网下载适合本地环境的安装包。

本文使用的是“Featured downloads”下的go1.24.5.windows-amd64.msi

运行安装包,自定义安装路径,之后一路点下一步即可。

在命令行输入命令,验证是否安装成功:go version,返回版本号表示安装成功。

安装Hugo

通过执行命令行语句来安装(需魔法):

winget install Hugo.Hugo.Extended

注:卸载命令为winget uninstall --name "Hugo (Extended)"

验证是否安装成功:

hugo version

返回版本号表示成功。

更多安装方法见官方文档:https://gohugo.io/installation/windows/

安装Git

Git官方文档讲解了各系统的安装方式。对于Windows系统,建议直接使用安装包,点击这里将自动下载。

安装完成后,请确认:

  • 系统环境变量Path中是否已新增路径安装目录/cmd
  • git version命令可正常执行。

若一切顺利,就可以着手建站啦!

步骤二:在本地创建站点

创建站点文件夹

选择一个合您眼缘的文件夹,右键点击“在终端中打开”,执行以下代码,将your_site_name替换为站点名称:

hugo new site your_site_name

执行后,本地将会新增一个同名的文件夹。

此时执行下面的命令,将默认在1313端口启动hugo博客服务,可在浏览器输入url地址localhost:1313访问博客主页。

hugo server 
# Ctrl+C可以停止服务

挑选心仪的主题,下载到本地

Hugo社区提供了丰富的站点主题,下面介绍更换主题的方法。

  • 获取主题的源码链接:在主题的介绍页点击“Download”按钮,将跳转到git仓库页面。点击页面上的“Clone”按钮,选择“HTTPS”,复制下方的web URL。

    例:

    • 主题名:ananke
    • web URL:https://github.com/theNewDynamic/gohugo-theme-ananke.git
  • 克隆仓库代码:这个步骤中,我们将把主题的代码下载到前面新建的站点下的theme文件夹下。在git bash终端中执行下面的命令:

    cd your_site_root_dir # 进入站点根目录
    git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
    

    https://github.com/theNewDynamic/gohugo-theme-ananke.git是前一步得到的web URL。

    ananke是主题的名字。

修改配置文件

个人习惯直接用theme.toml中的内容覆盖hugo.toml

  • 将站点根目录下的hugo.toml文件重命名为_hugo.toml
  • theme/主题名称下的theme.toml文件拷贝到站点根目录下,重命名为hugo.toml

在命令行执行hugo server --buildFuture命令,重新启动服务,再次访问localhost:1313,即可确认主题的应用情况。

步骤三:将站点代码部署到云服务器

本步骤将实现:

  • 把站点代码托管至云服务器;
  • 用Git管理代码版本;
  • 通过Git Hook自动化更新站点静态代码;
  • 一条命令完成博文更新。

在云端搭建Git服务

登录服务器。

1、创建git用户

adduser git

2、给git用户配置管理员权限

执行sudo visudo命令打开系统配置文件sudoers.tmp,新增一行配置,内容如下:

git ALL=(ALL) NOPASSWD: ALL

将管理员权限赋予用户组git,且无需使用密码登录。保存并退出文件,之后执行以下命令:

sudo usermod -aG git git # 将管理员权限赋予用户git,第一个git指用户组,第二个git指用户
sudo su git # 切换到用户git

3、初始化git服务

执行以下命令:

cd ~
git config --global init.defaultBranch main
git init --bare repository_name.git # repository_name 替换为仓库文件夹的名字,可以使用站点名,下同
sudo chown -R git:git repository_name.git
mkdir repository_name

4、配置git hook钩子文件

通过配置git hook文件,可以实现在云端git服务收到变更后,执行指定的命令。配置方法如下。

打开配置文件:

vim /home/git/repository_name.git/hooks/post-receive

写入代码:

#!/bin/bash

# exec > /home/git/hugo.git/post-receive.log 2>&1 # 将日志写入文件

git --work-tree=/home/git/repository_name--git-dir=/home/git/repository_name.git checkout -f

LOCK_FILE="/home/git/myrsyncscript.lock" # 有权限写入的目录,用于加锁,防止同步写带来的数据不一致性
SOURCE_DIR="/home/git/repository_name/public" # git仓库下站点静态代码文件夹
DEST_DIR="/www/wwwroot/blog/repository_name" # 站点应用文件夹

# 打开文件描述符 9,绑定到锁文件
exec 9>"$LOCK_FILE"

# 尝试加锁,不等待(-n)
flock -n 9 || { echo "Another instance is running."; exit 1; }

# 执行 rsync
sudo rsync -avz --delete --exclude='.user.ini' --timeout=600 "$SOURCE_DIR/" "$DEST_DIR/"

if [ $? -eq 0 ]; then
  echo "rsync succeed."
else
  exit 1
fi

# 释放锁(可选)
flock -u 9

给配置文件赋予足够的权限:

sudo chmod +x /home/git/repository_name.git/hooks/post-receive

在本地创建ssh key

使用ed25519算法,在git bash中执行:

ssh-keygen -t ed25519 -C "beizhu" # beizhu(备注)可自定义,建议使用英文字母

命令执行后返回公钥和私钥的存储路径。

打印公钥:

cat ~/.ssh/id_ed25519.pub

输出类似于:

ssh-ed25519 AAAAC3N… beizhu

将公钥登记到云端git服务

cd ~
mkdir -p ~/.ssh
echo "ssh-ed25519 AAAAC3Nz.. beizhu" >> ~/.ssh/authorized_keys # 将前面打印出的公钥贴到双引号中
chmod 600 ~/.ssh/authorized_keys # 设置权限
chmod 700 ~/.ssh # 设置权限

测试git服务的ssh连通性

在本地git bash中执行:

ssh -p 22 git@ip # ip为云服务器的公网ip,22为ssh端口,根据实际情况来写

之后根据提示填写信息。当出现以下提示信息时,输入yes

Are you sure you want to continue connecting (yes/no/[fingerprint])?

登录成功后将展示类似如下的信息:

Last login: Sun Jul 27 09:45:04 2025
[git@VM-8-11-opencloudos ~]$

将本地代码推送至服务器

1、在本地打开git bash,进入站点根目录,执行下面的命令,渲染静态代码:

hugo --gc --minify

2、创建自动化推送脚本

在站点根目录创建文件git_push.sh,内容如下:

#!/bin/bash

# 删除 public 目录
rm -rf public

# 生成静态文件
hugo --gc --minify

# 推送更新
git add .
git commit -m 'update'
git push origin main

# 提示用户确认退出(使用绿色高亮)
echo -e "\033[1;32m推送完成。按Enter键退出...\033[0m"
read

3、初始化本地仓库

git init
git branch -M main
git remote add origin ssh://git@ip:22/home/git/repository_name.git # 添加到远程仓库,ip替换为服务器ip
git remote -v # 确认远程仓库配置

4、进行第一次推送

git add .
git commit -m 'First Commit'
git push -u origin main 

若推送成功,服务器端的home/git/repository_name目录下的文件将与本地站点目录下的文件一致。

在宝塔面板创建站点应用

前提:已安装nginx。

1、创建站点应用目录

打开宝塔面板,点击左侧菜单中的“文件”,在/www/wwwroot目录下创建站点应用目录,用于部署站点静态页面。

注意,站点应用目录需和前面/home/git/repository_name.git/hooks/post-receive文件中的参数DEST_DIR保持一致。

2、创建html站点应用

点击左侧菜单中的“网站”,在“HTML项目”下点“添加HTML项目”,根目录填写刚才DEST_DIR,即刚才创建的站点应用目录。

域名一栏中至少要填写服务器的ip。填写个人域名后可通过域名访问博客(注意合规)。

测试自动化脚本

在本地打开git bash,在站点根目录下执下面的命令,新建一篇post文章:

hugo new posts/my-first-post.md

调用git_push.sh脚本:

bash git_push.sh

观察命令行输出:

  • 出现“rsync succeed.”:表示git hook钩子post-receive正常执行完成;
  • 出现“推送完成。按Enter键退出…”:表示git_push.sh脚本正常执行完成。

确认服务器以下目录下的文件是否符合预期:

  • home/git/repository_name:与本地站点根目录下文件一致;
  • 站点应用目录(如/www/wwwroot/blog/repository_name)下的文件与home/git/repository_name/public下的文件一致,且如期更新。

确认服务上的页面是否正常。

完成!

附录

Hugo目录结构

  • archetypes :hugo new时基于archetypes,可自行预设。
  • assets :存储Hugo Pipes用到的所有文件。不是默认创建。文件用到.Permalink或者.RelPermalink的才publish到public文件夹。
  • config :设置文件夹。不是默认创建。
  • content :content文件夹中的子文件夹结构代表着网站的sections。Hugo用sections分配默认的content types。
  • data :内容的configuration files和data templates that pull from dynamic content。
  • layouts :.html的模板文件,用于生成静态文件
  • staticimages, CSS, JavaScript等。
    注意: 图片放在static中的images文件夹中。引用时用 /images/aa.jpg

md文章元数据

---
slug: " "
title: " "
date: "2099-12-31T23:59:59"
lastmod: "2099-12-31T23:59:59"
description: "  "
tags: [aaa, bbb, ccc, ddd]
featured_image: "/images/pic.jpg"
categories: " "
comment: true
draft: false
---
  • slug:用来生成链接url,如果不设,使用title生成链接。
  • date:日期的位数一定要严格。例如:“2022-01-01”正确,“2022-1-1”错误。
  • draft:true(true,不处理,不发布)
  • publishdate :date value (如果是未来的,不处发)
  • expirydate:date value (如果过期了,不处发)

参考


网站公告

今日签到

点亮在社区的每一天
去签到