建立自己的个人博客站点，我有以下几个要求：

1. 首先要完全免费，且在可以预见的未来里不会无故关闭；
2. 在国内访问顺畅，图片能正常加载；
3. 拥有完全掌控权，且管理相对方便，也不容易丢失数据。

根据以上三点，我建立起了一个基于 Hugo + Cloudflare Pages 的个人博客网站：AQiuの个人博客，并在下文对搭建、自动化部署等过程进行详解，希望对您有所帮助。

使用Hugo生成静态站点

Hugo是近年来新兴的博客建站工具，使用Go实现，并采用Markdown进行文章编辑。主题多样且安装快捷，自定义程度很高，也可以通过js嵌入评论系统等高级功能。而且因为生成的是静态站点，所以几乎不对服务器性能有要求。但由于配置过程没有可视化，所以只在程序员圈子里比较流行。

安装Hugo

可以根据Hugo官方网站的讲解一步步进行，在这里只列出了重点步骤，如果在安装过程中遇到问题请参阅官方文档。如果不习惯英文也可以参考Hugo中文网站的说明，但该网站似乎已经年久失修，也许会出现与现在版本不相符的情况。

MacOS 系统

如果您还没有安装Homebrew或者MacPorts，请先点击前面的链接安装其中之一，这里推荐安装Homebrew。您也可以使用国内源安装：链接

然后在终端中执行以下命令来安装Hugo：

1
2

brew install hugo    //使用Homebrew
port install hugo    //使用MacPorts

Linux 系统

使用以下命令来安装Hugo：

1
2
3

sudo apt-get install hugo    //对于Debian、Ubuntu等
sudo pacman -Syu hugo    //对于Arch Linux、Manjaro等
sudo dnf install hugo    //对于Fedora、Red Hat、CentOS等

Windows 系统

Windows系统安装Hugo会稍微繁琐一些，因为绝大多数的Windows用户并不会安装包管理器，所以这里不会列出使用Chocolatey或者Scoop来安装Hugo的办法，如有需要，您可以前往官网查看：链接

以下为安装Hugo最快速的办法：

1. 前往Hugo的GitHub Release页面：链接
2. 找到并下载适合您电脑的版本，一般情况下为Windows-64bit

3. 将压缩包中的hugo.exe放入C:\Windows\System32\文件夹下
4. 打开命令提示符（cmd）输入以下指令

1

hugo version

如果正确显示了Hugo版本而没有报错的话，就代表安装正确了。

创建Hugo站点

通过终端找到要放置网站的目录后，使用以下命令建立新Hugo站点：

1

hugo new site blog-name    //将blog-name替换成您的博客名

Hugo会在当前目录下新建一个以“blog-name”命名的新文件夹，并在其中释放站点文件。之后请您cd进入此目录。

安装Hugo主题

Hugo社区提供了丰富的主题供用户使用，可以通过官网的Themes页面根据预览挑选喜欢的主题。一般主题的README页面都会提供详细的安装配置说明，这里我以hugo-theme-stack为例，简单演示一下配置过程。

您可以直接将主题仓库克隆到themes文件夹下来使用，但这不方便后面的版本管理和主题更新，如果您选择的主题已有很长时间没有更新其实也可以这样做。推荐的做法是，使用Git的submodule子模块功能配置依赖关系。这也要求您的整个网站使用Git来进行版本管理。

1
2

git init    //初始化Git
git submodule add https://github.com/AQiu-2003/hugo-theme-stack themes/hugo-theme-stack

需要注意的是，如果您之后有使用GitHub等管理网站，在其他设备上克隆项目时子模块并不会一起被克隆，需要在git clone后加上--recursive，或者在克隆到本地后执行以下步骤：

1
2

git submodule init    //初始化本地子模块配置文件  
git submodule update    //更新项目，抓取子模块内容。

主题安转完毕后，将./themes/hugo-theme-stack/exampleSite/文件夹中的文件复制到站点根目录下覆盖，并删除原有的config.toml文件。config.toml或config.yaml为Hugo站点的配置文件，里面也包含了大部分主题的可配置字段。您可以根据配置文件中的注释和主题说明文档来配置站点和主题。

发布与管理文章

可以通过hugo new命令发布新文章，如：

1

hugo new post/about.md

和直接在./content/post/下新建about.md的效果一样，之后您可以继续使用VSCode等对文章进行编辑。您也可以将./content/post/文件夹加入如Obsidian这样的编辑器实现更好的编辑体验。

编辑文章需要您有Markdown语法基础，如果您还不会使用Markdown，互联网上可以找到许多教程，如：链接

Markdown文件开头使用 — 隔离的部分存储了文章的标题、时间和一些参数（与使用的主题有关）。当参数draft为true时，Hugo在生成静态页面时会自动跳过此文件，将true改为false来真正发布文章。

本地调试站点

1

hugo server

Hugo 包含了内置的高性能 Web Server 。通过简单的运行上面这条指令， Hugo 将会找一个有效的端口运行服务器（一般为http://localhost:1313)用于您的文章，并且可以自动检测文章更新来刷新网页，无需每次都重新生成。

生成静态站点

1

hugo

在站点根目录执行hugo命令生成最终页面，最终页面会储存在public文件夹内。之后您就可以将网站上传至GitHub，或直接进行部署。

将网站部署到 Cloudflare Pages

访问 Cloudflare官网点击页面右上角的“注册”按钮进行注册，如果您已经有Cloudflare账号可以直接登陆。

登陆后点击控制台页面左侧的Pages，然后是创建项目。因为我之前已经部署过Pages，您看到的页面可能与我的不同，但没关系，总体功能是一样的。

连接到Git

如果您已将站点push到GitHub或者GitLab，可以选择连接到Git并链接您的账户，选择要部署的存储库。

值得注意的是，如果您将整个站点根目录使用Git进行管理，需要将根目录（高级）中的路径改为public才能正确部署。

直接上传

您可以将整个public文件夹直接上传并部署到Cloudflare Pages，但从长远角度来看不推荐这样做，除非您的网站不会经常发生改变（如一些不经常更新的说明文档等）。

设置别名

如果您对Cloudflare提供的pages.dev一级域名不满意，您也可以设置别名来访问到您的站点。鉴于Cloudflare上的域名相对较贵，您可以从其他服务商购买域名后通过CNAME解析到原网址。