Featured image of post Hugo 博客搭建教程
指南

Hugo 博客搭建教程

如何使用 Cloudflare 和 Github 搭建 Hugo 网站

本指南将涵盖以下内容:

  1. 安装 Hugo
  2. 使用 Hugo 创建站点
  3. 安装 Hugo 主题
  4. 将站点推送到 Github
  5. 使用 Cloudflare 托管站点

安装 Hugo

Hugo 是一个用 Go 语言编写的静态站点生成器。要安装 Hugo，我们需要确保已安装以下软件:

  1. Git
  2. Go
  3. Dart Sass

✅ 你可以参考 官方安装指南 并选择你的操作系统，以获取最新的安装说明。以下是一些常见的示例。

Mac (使用 brew 安装): brew install hugo

💡 Homebrew 是 macOS 的包管理器。如果你还没有安装，可以运行以下安装脚本进行安装。

1

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

安装 Homebrew 后，你就可以使用上面的 brew install hugo 命令了。

Debian/Ubuntu 系统:

1
2

sudo apt update
sudo apt install hugo

Windows 系统 (使用 Chocolatey):

1

choco install hugo -confirm

💡 Chocolatey 是 Windows 的包管理器。如果你还没有安装，可以按照他们的网站上的说明进行安装。

Hugo 快速入门

安装 Hugo 和 Git 后，我们就可以开始在命令行中创建站点了。

1. 首先检查 Hugo 是否已安装及其版本

打开你的终端或命令提示符并运行:

1

hugo version

这应该输出你安装的 Hugo 版本。如果出现错误，请重新检查你的 Hugo 安装。

2. 初始化 Hugo 项目

在你的终端中运行以下命令 (将 blog_name 替换为你喜欢的项目名称，例如 my-awesome-blog):

参考: Hugo 官方快速入门

1
2

hugo new site blog_name
cd blog_name

hugo new site blog_name 将创建一个名为 blog_name 的新文件夹，并初始化 Hugo 站点的基本模板。

cd blog_name 将你的当前目录更改为新创建的 blog_name 文件夹。本教程中所有后续命令都将在此目录中运行，除非另有说明。

3. 启动 Hugo 服务器 (现在可选，但建议测试)

要快速查看你的站点的基本版本，你可以启动 Hugo 开发服务器:

1

hugo server -D

💡 -D 标志包含草稿。我们将在稍后创建内容时讨论草稿。

此命令将启动本地开发服务器。默认情况下，它将在 http://localhost:1313/ 上可用。在你的 Web 浏览器中打开此地址以查看你的新 Hugo 站点。在没有主题的情况下，它将非常基础。按 Ctrl+C 在终端中停止服务器。

安装 Hugo 主题

Hugo 主题决定了你网站的外观和感觉。有许多免费和开源的主题可供选择。

  1. 浏览 Hugo 主题: 访问 https://themes.gohugo.io/ 并浏览可用的主题。找到一个你喜欢的主题。在本教程中，我们将使用流行的主题 Ananke。

  2. 将主题添加为 Git 子模块: 推荐的主题安装方式是使用 Git 子模块。在你的 blog_name 目录中，运行以下命令，将 your-chosen-theme-git-repo-url 替换为你选择的主题的 Git 仓库 URL。 对于 Ananke 主题，使用以下命令:

    1
2

    git init  # 如果你还没有初始化 git (hugo new site 应该已经完成了)，则初始化 git
git submodule add [https://github.com/theNewDynamic/gohugo-theme-ananke.git](https://www.google.com/search?q=https://github.com/theNewDynamic/gohugo-theme-ananke.git) themes/ananke
    • git init 初始化你的项目文件夹中的 Git 仓库 (如果尚未初始化)。 hugo new site 应该已经完成了此操作，但最好确保一下。
    • git submodule add ... themes/ananke 将 Ananke 主题仓库作为子模块添加到你的 themes/ananke 目录中。这使你的主题保持独立，并使更新更容易。

  3. 配置 Hugo 使用主题: 打开你 blog_name 目录根目录下的 hugo.toml 文件。添加以下行，告诉 Hugo 使用 Ananke 主题:

    1

    theme = "ananke"

    如果你选择了其他主题，请将 "ananke" 替换为你的主题目录的名称 (通常是主题名称)。

  4. 在本地测试主题: 再次启动 Hugo 服务器以查看应用新主题后的站点:

    1

    hugo server -D

    刷新浏览器中的 http://localhost:1313/。你现在应该看到你的站点使用了 Ananke 主题 (或你选择的主题) 的样式。

创建你的第一篇文章

让我们创建一个示例博客文章。

  1. 创建一个新的内容文件: 使用 hugo new 命令为你的文章创建一个新的 markdown 文件。 例如，要在 posts 部分中创建名为 “my-first-post.md” 的文章:

    1

    hugo new posts/my-first-post.md

    此命令将在 content/posts/my-first-post.md 创建一个文件。

  2. 打开并编辑内容文件: 在你喜欢的文本编辑器中打开 content/posts/my-first-post.md。 你将在顶部看到一些 front matter，用 --- 分隔符括起来:

    1
2
3
4
5

    ---
title: "My First Post"
date: 2025-02-07T15:55:52+08:00
draft: true
---
    • title: 你的博客文章的标题。将 "My First Post" 更改为更具描述性的内容。
    • date: 你的文章的日期。你可以修改它。
    • draft: true: 这篇文章目前标记为草稿。 默认情况下，Hugo 不会发布草稿，除非你在生成站点时使用 -D 或 --buildDrafts 标志。

    编辑 front matter 并在 --- 分隔符下方添加一些内容。例如:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

    ---
title: "你好世界！我的第一篇 Hugo 文章"
date: 2025-02-07T15:55:52+08:00
draft: false
---

欢迎来到我的 Hugo 博客!

这是我的第一篇文章。我很高兴开始使用 Hugo 写作博客并分享我的想法和经验。

你可以使用 Markdown 编写内容，Hugo 会将其转换为静态网站。

让我们在接下来的文章中探索更多功能!

    重要: 将 draft: true 更改为 draft: false 以发布你的文章 (或者如果你不想发布，则保持 true)。

  3. 在本地查看你的文章: 再次启动 Hugo 服务器:

    1

    hugo server -D

    在浏览器中访问 http://localhost:1313/posts/my-first-post/。你应该看到你的第一篇博客文章了!

将站点推送到 Github

现在你已经有了一个基本的 Hugo 站点，让我们将其推送到 Github，以便可以使用 Cloudflare Pages 托管它。

  1. 初始化 Git 仓库 (如果尚未完成): hugo new site 应该会初始化一个 Git 仓库，但如果不是，请运行:

    1

    git init

  2. 添加和提交你的文件:

    1
2

    git add .
git commit -m "feat: 初始提交，包含 Hugo 站点和 Ananke 主题"

  3. 在 Github 上创建一个仓库:

    • 访问 Github 并登录你的帐户。
    • 点击右上角的 “+” 按钮，然后选择 “New repository”。
    • 选择一个仓库名称 (例如 hugo-blog)。
    • 根据需要选择 “Public” 或 “Private”。
    • 你可以取消选中 “Initialize this repository with:” 选项。
    • 点击 “Create repository”。

  4. 将本地仓库链接到你的 Github 仓库: 从你新创建的 Github 仓库页面复制仓库 URL。 它看起来像 https://github.com/your-username/hugo-blog.git。 然后，在你的终端中运行:

    1

    git remote add origin <你的-github-仓库-URL>

    将 <你的-github-仓库-URL> 替换为你复制的 URL。

  5. 将你的本地仓库推送到 Github:

    1

    git push -u origin main

    这将把你的 Hugo 站点文件推送到你的 Github 仓库。你可能会被提示登录你的 Github 帐户。

  6. (可选) 创建一个 .gitignore 文件: 为了防止不必要的文件被推送到你的仓库 (例如 Cloudflare Pages 将生成的 public 文件夹)，在你的项目根目录中创建一个名为 .gitignore 的文件，并添加以下行:

    1
2

    public/
themes/*/resources/_gen/

    然后，提交此 .gitignore 文件:

    1
2
3

    git add .gitignore
git commit -m "chore: 添加 .gitignore 文件"
git push origin main

使用 Cloudflare Pages 托管站点

Cloudflare Pages 是一项出色的服务，可以免费托管静态网站，并且与 Github 无缝集成。

  1. 注册 Cloudflare 并转到 Cloudflare Pages:

    • 访问 Cloudflare 并注册一个免费帐户 (如果你还没有帐户)。
    • 登录后，在 Cloudflare 仪表板中导航到 “Pages”。

  2. 创建一个新的 Cloudflare Pages 项目:

    • 点击 “Create a new project” 按钮。
    • 点击 “Connect to Git”。

  3. 连接到 Github 并授权 Cloudflare Pages:

    • 选择 “Github” 作为 Git 提供商。
    • 你可能会被要求授权 Cloudflare Pages 访问你的 Github 仓库。授予必要的权限。
    • 选择你为 Hugo 博客创建的 Github 仓库 (例如 hugo-blog)。
    • 点击 “Begin setup”。

  4. 配置构建设置:

    • Framework preset: 选择 “Hugo”。
    • Build command: 这应该会自动填充为 hugo。 如果没有，请输入 hugo。
    • Publish directory: 这应该会自动填充为 public。 如果没有，请输入 public。
    • Environment variables (可选): 对于基本的 Hugo 设置，你通常不需要设置环境变量。
    • 点击 “Save and Deploy”。

  5. 等待部署: Cloudflare Pages 现在将自动从你的 Github 仓库构建和部署你的 Hugo 站点。此过程可能需要几分钟。你可以在 Cloudflare Pages 仪表板中监控构建进度。

  6. 访问你的站点: 部署完成后，Cloudflare Pages 将为你提供一个 *.pages.dev 子域名，你的站点将在该子域名上生效。 你可以在 Cloudflare Pages 仪表板的项目概览中找到此 URL。 点击它以访问你的实时 Hugo 博客!

  7. (可选) 设置自定义域名: 要使用你自己的域名 (例如 www.your-blog.com):

    • 在你的 Cloudflare Pages 项目仪表板中，转到 “Custom domains”。
    • 输入你的自定义域名。
    • Cloudflare 将提供有关如何更新你的域名注册商处的 DNS 记录以指向 Cloudflare 的说明。 请按照这些说明操作。
    • DNS 传播完成后 (这可能需要一些时间)，你的 Hugo 博客将可以通过你的自定义域名访问。 Cloudflare Pages 还会自动处理你的自定义域名的 SSL 证书。
© 2024 - 2025 Jerry's Blog
~~~Thank you for visiting~~~

Theme Stack designed by Jimmy