从零开始搭建个人博客

引言

本指南将详细介绍在中国大陆建立我的个人技术博客 ruhui.me 的具体操作步骤。我将涵盖从域名申请购买（阿里云）、云主机申请（华为云，IP 地址为 120.46.15.185）、域名解析，到必须完成的工信部备案和公安备案，再到 Hugo 本地开发环境的配置、Git 版本管理以及自动化部署等关键环节。

第一步：域名获取

域名 ruhui.me 是在阿里云域名服务上注册的。接下来，需要确保域名已完成实名认证，这是在中国大陆进行网站备案的前提条件。

第二步：选择和申请云主机

选择了华为云作为的云主机提供商，并且服务器的 IP 地址是 120.46.15.185。云服务器运行着熟悉和需要的操作系统（例如，CentOS, Ubuntu 等），并已做好基本的安全设置。

第三步：配置域名解析

在购买域名和设置好云服务器后，需要将的域名 ruhui.me 指向的华为云服务器 IP 地址 120.46.15.185。需要在阿里云的域名管理后台进行域名解析设置。

登录阿里云账号，进入域名管理控制台。
找到的域名 ruhui.me，点击"解析"或"DNS 设置"。
添加一条 A 记录，将主机记录设置为 @（代表根域名），记录值设置为的华为云服务器 IP 地址 120.46.15.185
可以再添加一条 CNAME 记录，将主机记录设置为 www，记录值设置为的根域名 ruhui.me

这样，无论是访问 ruhui.me 还是 www.ruhui.me，都会指向的服务器。

请注意，DNS 解析生效需要一定的时间，通常为几分钟到几小时不等。可以使用 ping 命令或在线 DNS 查询工具来检查解析是否生效。

第四步：进行ICP备案

在中国大陆托管网站是强制要求进行 ICP 备案的。需要登录阿里云 ICP 备案系统，按照要求填写的个人信息、域名信息、服务器信息等，并上传所需的相关证件照片。

个人进行 ICP 备案通常需要提供身份证照片、域名证书等。备案过程中，阿里云会进行初审，初审通过后，需要等待工信部的最终审核，审核通过后会发放 ICP 备案号。这个过程通常需要 20 个工作日到一个月左右。

获得 ICP 备案号后，需要在的博客网站底部显著位置添加 ICP 备案号，并链接到工信部网站。

第五步：进行公安备案

如果网站有交互功能，需要在获得 ICP 备案号后的 30 天内，还需要进行公安备案。公安备案需要在全国互联网安全管理服务平台https://beian.mps.gov.cn/。

公安机关会对提交的备案信息进行审核，审核结果会通过平台或短信通知。审核通过后，将获得公安备案号。请将公安备案号和公安部的徽标放置在的网站底部。

第六步：Hugo 本地开发环境配置

在 Windows 上安装 Hugo

可以使用包管理器Winget 来安装 Hugo:

打开 PowerShell 或命令提示符。
运行命令：

winget install Hugo.Hugo.Extended

安装完成后，可以在终端中运行以下命令来验证 Hugo 是否成功安装：

hugo version

在 Mac 上安装 Hugo

可以使用包管理器 Homebrew 或 MacPorts 来安装 Hugo:

打开终端。
如果尚未安装 Homebrew，请运行以下命令进行安装：

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

安装完成后，运行以下命令安装 Hugo：

brew install hugo

将 Hugo 集成到 Cursor IDE 中

在 Cursor 中打开的 Hugo 博客项目文件夹。
可以使用 Cursor 的文件资源管理器浏览和编辑 content 目录下的 Markdown 文件。
Cursor 提供了 AI 辅助功能，例如可以使用 insert hugo yaml markdown frontmatter 命令快速生成文章的 YAML 元数据。
可以使用 Cursor IDE 集成的终端来预览的 Hugo 站点。点击 “View” -> “Terminal” 打开终端，然后运行以下命令：

hugo server

Hugo 会在本地启动一个开发服务器，并在终端中显示访问地址（通常是 http://localhost:1313/）。可以在浏览器中打开该地址来预览的博客。Hugo 支持自动刷新，当在 Cursor 中保存文件时，浏览器会自动更新。

第七步：Git 版本管理

为的 Hugo 博客初始化 Git 仓库

在的 Hugo 项目根目录下（包含 config.toml 等文件的目录），打开终端（macOS/Linux）或 Git Bash（Windows）。
运行命令：

git init

创建一个名为 .gitignore 的文件，并在其中添加以下内容，以排除 Hugo 生成的 public 目录和一些临时文件：

/public
/.DS_Store
/tmp

管理博客内容的常用 Git 命令

git add .：将所有更改添加到暂存区。
git commit -m "的提交消息"：提交暂存区的更改，并附上一条描述本次提交的消息。
git status：查看当前仓库的状态，包括已修改但未暂存的文件、已暂存但未提交的文件等。
git log：查看提交历史。
git pull：从远程仓库拉取最新的更改并合并到当前分支。
git push：将本地提交推送到远程仓库。

将本地仓库连接到 GitHub 等远程平台

在 GitHub 上创建一个新的仓库。
在本地 Hugo 项目的终端中，运行命令：

git remote add origin <的 GitHub 仓库 URL>

将 <的 GitHub 仓库 URL> 替换为在 GitHub 上创建的仓库地址。 3. 运行命令：

git push origin main

（如果的主分支是 main）或

git push origin master

（如果的主分支是 master），将的本地提交推送到 GitHub 仓库。

个人博客工作流程中使用 Git 的最佳实践

频繁提交： 养成经常提交代码的习惯，每次提交都应该是一个逻辑上完整的更改。
清晰的提交消息： 编写清晰、简洁的提交消息，说明本次提交所做的更改。
使用分支（可选）： 对于较大的功能开发或实验性更改，可以考虑创建新的分支进行开发，完成后再合并回主分支。
定期推送： 定期将本地更改推送到远程仓库，作为备份，并方便在不同设备上同步。

第八步：自动化网站部署

可以使用以下脚本自动化将本地 Hugo 生成的网站文件上传并部署到的华为云服务器：

#!/bin/bash

# 确保脚本在出错时停止
set -e

# 自动更新CSS版本号以破坏缓存
echo "更新CSS版本号..."
TIMESTAMP=$(date +%s)
sed -i.bak "s/custom_css = \[\"\(.*\)?v=[0-9]*\"\]/custom_css = \"/" config.toml
rm -f config.toml.bak

# 保存当前状态到Git
echo "保存当前更改到Git..."
git add .
git commit -m "更新网站内容 $(date +"%Y-%m-%d %H:%M:%S")" || echo "没有新的更改需要提交"
git push origin main || echo "没有更改可推送"

# 构建网站
echo "开始构建Hugo站点..."
hugo --gc
hugo --minify

# 显示要上传的文件总数
echo "准备上传文件..."
find public -type f | wc -l

# 使用rsync上传文件到服务器
echo "开始上传到服务器..."
rsync -avz --delete public/ root@120.46.15.185:/var/www/hugo/public/

# 设置正确的缓存控制头 - 在服务器上执行
echo "设置适当的缓存控制..."
ssh root@120.46.15.185 "cat > /tmp/cache_headers.conf << 'EOL'
# 对HTML文件设置无缓存
location ~* \.html$ {
    add_header Cache-Control \"no-cache, must-revalidate\";
    add_header Pragma \"no-cache\";
    expires 0;
}

# 对资源文件设置合适的缓存时间
location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg)$ {
    add_header Cache-Control \"public, max-age=2592000\";
    expires 30d;
}
EOL"

# 检查Nginx配置中是否已包含cache_headers.conf
echo "检查并应用Nginx缓存配置..."
ssh root@120.46.15.185 "if ! grep -q 'include /tmp/cache_headers.conf;' /etc/nginx/sites-available/ruhui.me; then
  # 备份当前配置
  cp /etc/nginx/sites-available/ruhui.me /etc/nginx/sites-available/ruhui.me.bak

  # 将缓存配置插入到Hugo网站的location块中
  sed -i '/location \/ {/a\\    include /tmp/cache_headers.conf;' /etc/nginx/sites-available/ruhui.me

  # 测试Nginx配置
  nginx -t && systemctl reload nginx

  echo '缓存控制头已添加并应用'
else
  echo '缓存控制头已存在，无需修改'
fi"

# 清除可能的CDN缓存（如果使用了CDN）
# 如果使用Cloudflare，取消下面注释并填入你的API信息
# echo "清除CDN缓存..."
# curl -X POST "https://api.cloudflare.com/client/v4/zones/你的区域ID/purge_cache" \
#     -H "Authorization: Bearer 你的API令牌" \
#     -H "Content-Type: application/json" \
#     --data '{"purge_everything":true}'

echo "部署完成！访问 https://ruhui.me 查看更新"

请注意：

需要将脚本中的 root@120.46.15.185 替换为的服务器用户名和 IP 地址。
需要在服务器上配置 SSH 密钥，以便实现免密码登录。
脚本中更新 CSS 版本号的部分假设的 Hugo 配置文件是 config.toml，并且希望通过修改 custom_css 参数来强制浏览器更新 CSS。请根据的实际配置进行调整。
脚本中关于 Nginx 配置的部分假设的 Nginx 配置文件路径是 /etc/nginx/sites-available/ruhui.me，并且希望将缓存控制相关的配置包含在 Hugo 网站的 location / {… } 块中。请根据的实际 Nginx 配置进行调整。

要使用此脚本，请将其保存为例如 deploy.sh，然后在的本地 Hugo 项目根目录下运行：

chmod +x deploy.sh
./deploy.sh

来部署的博客。

引言#

第一步：域名获取#

第二步：选择和申请云主机#

第三步：配置域名解析#

第四步：进行ICP备案#

第五步：进行公安备案#

第六步：Hugo 本地开发环境配置#

在 Windows 上安装 Hugo#

在 Mac 上安装 Hugo#

将 Hugo 集成到 Cursor IDE 中#

第七步：Git 版本管理#

为的 Hugo 博客初始化 Git 仓库#

管理博客内容的常用 Git 命令#

将本地仓库连接到 GitHub 等远程平台#

个人博客工作流程中使用 Git 的最佳实践#

第八步：自动化网站部署#

引言