记录从购买域名、搭建 Hugo 站点到使用 Cloudflare Pages 部署的完整过程。

在玩网易爆米花时，看到了资源库可以导入多种文件源，然后利用AI对每个文件源进行了简单的了解。其中就有WebDAV，想试试怎么操作，使用rclone通过WebDAV将本地一个文件夹（文件夹中存了一部电影）暴露出来，操作后可以在局域网内访问到。 之后又考虑把它部署在公网上，买了域名后，发现上传速率感人，根本没法正常看，所以这个想法破灭了。 但域名已经买了，于是想到可以用它创建一个自己的博客网站。

1. 域名

我是在spaceship上买的。顶部可以选择语言和货币，搜索自己想要的域名，选择一个，支付宝支付。在顶部的Launchpad中的域名管理器中可以看到购买的域名，默认是自动续订的，可以关闭。我购买的是.top域名，首年￥10.79。

2. CloudFlare托管

cloudflare 登录后进入控制台，点击Workers & Pages -> Overview，选择Add a site（添加站点），输入购买的域名，选择Free计划。Cloudflare会给出两个Nameserver，在Spaceship的域名管理器中，点击你的域名 -> 名称服务器和DNS，更改为自定义名称服务器，将Cloudflare给出的两个Nameserver复制进去，并且只留这两个。然后返回Cloudflare一路确定，等待生效即可。返回控制台查看域名的状态，显示Active即可。

3. Hugo

在Hugo中下载并安装Hugo,安装后可添加环境变量，打开环境变量，选择系统变量中的Path,点击编辑，添加Hugo的安装目录，确定。 在PowerShell中输入，检查版本。

hugo version

安装完成后，创建博客项目blog并进入目录：

hugo new site blog
cd blog

配置博客页面 创建 Hugo 项目后，目录中只有基础结构，还没有完整的博客页面。Hugo 通常有两种使用方式：

  • 安装别人制作的主题；
  • 自己编写 HTML 模板和 CSS。（在 layouts目录中编写模板，在 static/css目录中编写样式。）

运行下面的命令启动本地预览：

hugo server -D

终端出现本地地址后，在浏览器中打开它。如果能看到博客首页，说明 Hugo 已经可以正常运行。

4.Git

在Git中下载Git，安装后检查版本

git --version

输入GitHub账号和邮箱号，设置 Git 提交记录中的作者信息。

git config --global user.name "你的 GitHub 用户名"
git config --global user.email "你的邮箱"

在blog项目中打开PowerShell，初始化git

git init

新建记事本，内容如下，该文件名为.gitignore

public/
.DS_Store
*.log

在 GitHub 新建仓库，

  • Repository name 填 blog
  • 选 Private（内容可能涉及学习笔记，私有更稳妥）
  • 不要勾选 “Add a README file”，也不要加 .gitignore
  • 点 Create repository 在blog项目中打开PowerShell，提交并推送。
git add .
git commit -m "初始化博客"
git branch -M main
git remote add origin https://github.com/你的github用户名/blog.git
git push -u origin main

5.Cloudflare Page

创建 Pages 项目

  1. 打开 cloudflare 并登录。
  2. 左侧菜单找到Build –> Compute –> Workers & Pages，点进去。
  3. 点 Create / 创建，选择 Pages。
  4. 选择 Connect to Git / 连接到 Git。
  5. 如果 Cloudflare 还没连接过 GitHub，会让你授权，登录你的新 GitHub 账号并授权。
  6. 在仓库列表里找到 ACAE62005/Blog，选中它，点 Begin setup / 开始设置。

在构建设置页面按下面填：

  • Production branch：main
  • Framework preset：选 Hugo
  • Build command：hugo --minify
  • Build output directory：public

绑定域名

  1. 进入 Cloudflare 的 Workers & Pages → 找到你刚创建的项目。
  2. 打开项目的 Settings / 设置 → Custom domains / 自定义域。
  3. 点 Add custom domain / 添加自定义域，输入：你购买的域名
  4. 确定后，等状态变成 Active / 已激活，通常几分钟内会好

一个博客网站就此而生

基本指令

  1. 发布
    git add .
git commit -m "发布新文章"
git push
    双引号中内容为本次操作的备注
  2. 修改 在项目文件夹中修改文件后
    git add -A
git commit -m "修改文章"
git push
  3. 删除 在项目文件夹中删除文件后
    git add -A
git commit -m "删除文章"
git push