我的第一篇博客文章

March 28, 2025

我的第一篇博客文章

找到前进的方向后，这是第一篇博客教程文章，内容我就打算写写关于使用 Cloudflare+Hugo+GitHub 搭建一个最简单的个人博客。

接下来，让我来梳理一下使用 Cloudflare Pages 和 Hugo 部署一个最简单网站的步骤。这里的“最简单”意味着：

使用 Hugo 官方推荐的基础主题（如 Ananke），不做任何自定义修改。
只包含一篇文章。
利用 Cloudflare Pages 的 Hugo 预设进行部署。

前提条件：

你已经安装了 Git 。
你已经安装了 Hugo 。 (可以通过 hugo version 命令检查)
你有一个 GitHub 账号。
你有一个 Cloudflare 账号。

步骤：

第一步：本地创建 Hugo 站点并添加内容

打开终端或命令行工具。
创建新的 Hugo 站点：
```
hugo new site my-simple-blog
cd my-simple-blog
```
将 my-simple-blog 替换为你想要的项目名称。
初始化 Git 仓库：
```
git init
```
添加 Ananke 主题（或其他基础主题）： 我们使用 Git Submodule 来添加主题，这是推荐的方式。
```
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
```
配置 Hugo 使用该主题： 打开项目根目录下的 hugo.toml 文件（如果是旧版本 Hugo，可能是 config.toml），添加或修改 theme 配置行：
```
# hugo.toml
baseURL = 'http://example.org/' # 稍后会被 Cloudflare 覆盖
languageCode = 'en-us'          # 或 'zh-cn'
title = 'My Simple Blog'
theme = 'ananke'                # 确保这行存在且正确
```
注意： baseURL 在本地测试时随意写一个，部署到 Cloudflare Pages 后它会自动处理。

创建第一篇文章：

hugo new content posts/my-first-post.md

编辑文章内容： 打开 content/posts/my-first-post.md 文件，修改内容。确保将 draft: true 改为 draft: false，否则文章不会被构建。

---
title: "My First Post"
date: 2025-03-28T12:00:00+08:00 # 修改为当前日期时间
draft: false                  # 设为 false 来发布
---

Hello World! This is my first post using Hugo and Cloudflare Pages.

(可选) 本地预览： 在项目根目录运行：
```
hugo server -D
```
然后在浏览器中打开 http://localhost:1313 (或终端提示的地址)，你应该能看到带有 Ananke 主题和你的第一篇文章的网站。按 Ctrl+C 停止本地服务器。

这是在本地浏览器中看到的效果

第二步：将代码推送到 GitHub

创建 .gitignore 文件： 在项目根目录创建一个名为 .gitignore 的文件，添加以下内容，防止不必要的文件被提交：
```
# Hugo generated files
public/
resources/
.hugo_build.lock

# OS generated files
.DS_Store
Thumbs.db
```
添加所有文件到 Git：
```
git add .
```

提交更改：

git commit -m "Initial Hugo site setup with Ananke theme and first post"

在 GitHub 或 Gitee 创建仓库：
- 登录 GitHub 或 Gitee。
- 创建一个新的空仓库（不要勾选初始化 README、.gitignore 或 license）。仓库名称最好和你的本地文件夹名称 my-simple-blog 一致。
- 复制仓库的 HTTPS 或 SSH URL。

关联本地仓库与远程仓库：

# 将 <your-repo-url> 替换为你复制的 URL
git remote add origin <your-repo-url>

推送代码到远程仓库：

# 假设你的主分支是 main，如果是 master 请替换
git push -u origin main

第三步：在 Cloudflare Pages 上部署

登录 Cloudflare 控制台。
导航到 Pages： 在左侧菜单选择 “Workers & Pages”，然后点击 “创建应用程序” -> “Pages” -> “连接到 Git”。
连接 Git 提供商： 选择你使用的平台（GitHub 或 GitLab），授权 Cloudflare 访问你的仓库。你可能需要选择授权给所有仓库或仅特定仓库。选择你刚刚创建的 my-simple-blog 仓库。
配置构建和部署：
- 选择你要部署的仓库 my-simple-blog，点击 “开始设置”。
- 项目名称： Cloudflare 会根据仓库名自动生成一个，你可以修改。这将是你的 *.pages.dev 子域的一部分。
- 生产分支： 选择 main (或 master)。
- 框架预设： 选择 Hugo。
- 构建设置 (通常 Hugo 预设会自动填充好):
  - 构建命令： 应该会自动设置为 hugo 或类似命令。
  - 构建输出目录： 应该会自动设置为 public。
  - 根目录: 保持为空（除非你的 Hugo 项目在仓库的子目录中）。
- 环境变量 (非常重要！)：
  - 点击 “环境变量” -> “添加变量”。
  - 变量名称： HUGO_VERSION
  - 值：输入你本地使用的 Hugo 版本号。你可以通过在终端运行 hugo version 来查看。例如，如果版本是 0.145.0，就填入 0.145.0。
  - 原因： Cloudflare 需要知道使用哪个版本的 Hugo 来构建你的网站，以确保兼容性。
保存并部署：
- 点击 “保存并部署”。
- Cloudflare 将开始拉取你的代码、构建 Hugo 站点并将其部署到全球网络。
- 你可以看到部署的实时日志。首次部署可能需要一两分钟。

第四步：验证

部署成功后，Cloudflare 会提供一个 *.pages.dev 的 URL (例如 my-simple-blog.pages.dev)。
访问这个 URL，你应该能看到和你本地预览时一样的、使用 Ananke 主题的简单博客，包含你的第一篇文章。

后续更新：

之后，你只需要在本地修改你的 Hugo 网站（比如添加新文章 hugo new content posts/another-post.md，修改内容），然后执行：

git add .
git commit -m "Added another post"
git push origin main

Cloudflare Pages 会自动检测到 main 分支的更新，并重新构建和部署你的网站。

这样就完成了一个最简单的 Hugo 网站在 Cloudflare Pages 上的部署！