前言：用好已经买下的域名

你已经有了自己的顶级域名（比如 maquren.top），也用上了 Cloudflare 的 DNS 和 SSL。
接下来，只需要再加一点点“工程化”，就可以：

  • 零服务器成本 搭建一个长期可维护的技术博客；
  • 支持 评论互动（Giscus），方便和读者交流；
  • 把你写在公众号 / 小红书 / 视频号里的内容，系统化沉淀 到自己的站点；
  • 为以后所有技术内容、个人品牌、变现打好基础。

这篇文章就是一份完整的实战教程：
用 Hugo + PaperMod + Cloudflare Pages + Giscus，从 0 到线上，一个域名的“免费网站搭建”流程。

本文假设你使用的是 macOS，域名为 maquren.top，源代码托管在 GitHub，托管平台为 Cloudflare Pages。
你可以按需替换为自己的系统、域名或代码托管平台。

一、整体方案概览

整套方案的组件：

  • Hugo：静态网站生成器，负责把 Markdown 文章变成 HTML 页面；
  • PaperMod 主题：干净现代的 Hugo 主题，适合技术博客；
  • GitHub：存放网站源码，顺便版本管理；
  • Cloudflare Pages：免费托管静态网站，自动构建 + 全站 HTTPS；
  • Giscus：基于 GitHub Discussions 的评论系统，0 自建后端。

你后续的日常工作流程非常简单：

  1. 本地写一篇 Markdown 文章；
  2. git commit && git push；
  3. Cloudflare Pages 自动构建并发布到 https://maquren.top；
  4. 读者可以在文章下方通过 Giscus 登录 GitHub 账号评论互动。

二、前置条件准备

在开始之前，建议准备好以下内容：

  • 一台已安装 Homebrew 的 macOS 电脑；
  • 一个 GitHub 账号，且能创建公开仓库；
  • 域名 maquren.top 已接入 Cloudflare，并开启 HTTPS；
  • 终端（Terminal / iTerm2）基础操作没问题。

如果你还没有把域名接入 Cloudflare，或者不太熟悉 Cloudflare 的 DNS / SSL / 邮箱配置，可以先阅读这篇“前传”：

如果你已经在用 Git、GitHub 和 Cloudflare，这一节可以直接跳过。

三、本地环境：安装 Hugo 与 Git

  1. 安装 Git

macOS 一般自带 Git，可先在终端里确认：

git --version

如果版本信息正常输出，就可以直接用。如果没有安装，可以通过 Xcode Command Line Tools 或 Homebrew 安装：

xcode-select --install

或：

brew install git
  1. 安装 Hugo（推荐扩展版 hugo-extended）
brew install hugo

安装完成后，验证：

hugo version

看到类似 hugo v... 的输出就可以了。

四、创建 Hugo 站点：从空目录到可运行博客

  1. 创建项目目录

在合适的位置新建一个目录（例如在 ~/work 下）：

mkdir -p ~/work/maquren-blog
cd ~/work/maquren-blog
  1. 初始化 Hugo 站点
hugo new site .

执行完成后，当前目录会生成 Hugo 的基础结构，例如：

  • config.toml / config.yaml：站点配置文件；
  • content：存放文章内容（Markdown）；
  • themes：主题目录；
  • static：静态资源（图片、脚本等）；
  • layouts：自定义模板。

五、添加 PaperMod 主题

这里以 PaperMod 为例，它是一个非常流行且适合技术博客的主题。

  1. 添加主题为 Git 子模块（推荐）

在项目根目录（maquren-blog）执行：

git init
git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
  1. 配置站点使用 PaperMod

将默认的 config.toml 改为 config.yaml（也可以继续用 toml，这里用 yaml 更直观）。
你可以删除原有 config.toml，新建 config.yaml：

baseURL: "https://maquren.top/"
title: "maquren · 技术与环境搭建"
theme: "PaperMod"
languageCode: "zh-cn"
paginate: 10

params:
  defaultTheme: auto
  ShowReadingTime: true
  ShowShareButtons: false
  ShowPostNavLinks: true
  ShowBreadCrumbs: true
  ShowCodeCopyButtons: true
  ShowRssButtonInSectionTermList: true

  # 这里以后会配置 Giscus 评论，先占位
  comments: true

menu:
  main:
    - identifier: posts
      name: 文章
      url: /posts/
      weight: 1
    - identifier: about
      name: 关于
      url: /about/
      weight: 2

taxonomies:
  category: categories
  tag: tags
  series: series
  1. 创建第一篇文章（例如：本篇“域名免费网站搭建”）
hugo new posts/域名免费网站搭建.md

编辑生成的文件，将内容替换为当前这篇文章的正文即可（去掉前面的 Front Matter 或按需要调整）。

  1. 本地预览
hugo server -D

浏览器打开 http://localhost:1313，即可看到博客初始页面和文章列表。

确认无误后，可以进入部署阶段。

六、将站点推送到 GitHub

  1. 在 GitHub 创建仓库
  • 仓库名可以叫 maquren-blog；
  • 建议选择 Public（公开），方便后续 Giscus 使用；
  • 不要勾选 “Initialize this repository with a README”（空仓库更方便本地推送）。
  1. 本地关联并推送

在 maquren-blog 根目录：

git branch -M main
git remote add origin [email protected]:your-github-username/maquren-blog.git
git add .
git commit -m "init hugo blog with PaperMod"
git push -u origin main

注意：将 your-github-username 替换成你自己的 GitHub 用户名。

七、使用 Cloudflare Pages 免费托管

  1. 在 Cloudflare 后台创建 Pages 项目
  • 打开 Cloudflare 控制台，选择你的账号；
  • 左侧导航找到 Pages；
  • 点击 “创建项目” → 选择 “连接到 Git”；
  • 选择刚刚创建并推送的 maquren-blog 仓库；
  • 构建设置：
    • 构建命令：hugo
    • 输出目录：public
  1. 首次构建并预览

保存后，Cloudflare 会自动进行首次构建。
构建成功后，会产生一个临时的 *.pages.dev 域名，例如：

https://maquren-blog.pages.dev

此时你已经可以通过这个地址访问你的博客。

  1. 绑定自定义域名 maquren.top
  • 在 Pages 项目中找到 “自定义域”；
  • 添加自定义域：maquren.top（或 www.maquren.top）；
  • Cloudflare 会自动生成一条 CNAME 或 A 记录；
  • 确认 DNS 中这条记录生效；
  • 等待数分钟后，访问 https://maquren.top 即可看到你的博客。

Cloudflare 会自动为你的域名签发 SSL 证书，全站 HTTPS 无需额外设置。

八、接入 Giscus 评论系统

静态博客无法自己存评论，所以我们用 Giscus 把评论存到 GitHub Discussions 中。

1. 为仓库开启 Discussions

在 GitHub 打开 maquren-blog 仓库：

  • 进入仓库 → Settings；
  • 左侧选择 General；
  • 找到 Features 区块，勾选 Discussions；
  • 保存设置。

这样，仓库就具备了 Giscus 所需的讨论区功能。

2. 在 Giscus 官网生成配置

访问 https://giscus.app，按步骤选择：

  1. 选择仓库：your-github-username/maquren-blog；
  2. 选择 Discussions 分类（例如：General，如果没有就创建一个）；
  3. 设置语言为 zh-CN；
  4. 选择外观（浅色 / 深色 / 自动）；
  5. 右侧会实时生成一段配置代码，其中包括：
    • data-repo
    • data-repo-id
    • data-category
    • data-category-id

把这些参数记录下来，后面要填入 Hugo 配置中。

3. 在 PaperMod 中开启 Giscus

PaperMod 内置了对 Giscus 的支持，你只需要在 config.yaml 中增加相关配置即可，例如：

params:
  comments: true
  giscus:
    repo: "your-github-username/maquren-blog"
    repoID: "从 giscus.app 复制的 repo-id"
    category: "General"
    categoryID: "从 giscus.app 复制的 category-id"
    mapping: "pathname"
    reactionsEnabled: "1"
    emitMetadata: "0"
    inputPosition: "bottom"
    lang: "zh-CN"
    loading: "lazy"

请将上述字段中的 your-github-username、repoID、categoryID 替换为你实际在 giscus.app 页面中生成的值。

修改完成后，重新推送一次配置：

git add config.yaml
git commit -m "enable giscus comments"
git push

等待 Cloudflare Pages 自动构建完成，刷新 https://maquren.top 的文章页面，就可以在每篇文章下方看到评论区了。

九、日常写作与发布流程（超简单）

当上述一切搭建完成后，你的日常工作就变成了：

  1. 新建文章
cd ~/work/maquren-blog
hugo new posts/你的新文章标题.md
  1. 用你熟悉的编辑器（VS Code / Cursor 等）写 Markdown 内容；
  2. 本地预览确认效果
hugo server -D
  1. 推送到 GitHub
git add .
git commit -m "add new post: xxx"
git push
  1. 等待 Cloudflare Pages 自动部署完成（通常几十秒内）， 然后在 https://maquren.top 上验证即可。

你可以在公众号 / 小红书 / 视频号里同步发布这篇文章的内容，并在结尾放上：

  • “完整图文和评论互动见：https://maquren.top/posts/xxx/”

这样，所有平台的流量最终都会沉淀到你的域名网站上。

十、总结：这就是你的第一块“自留地”

通过 Hugo + PaperMod + Cloudflare Pages + Giscus：

  • 你用 极低的时间成本，搭好了一个可长期运营的技术博客；
  • 内容归你自己所有，不受任何平台规则变化的影响；
  • 未来可以自然地叠加：工具推荐、环境搭建教程、AI 编程实战、课程、咨询服务等。

这篇《域名免费网站搭建》本身，也可以作为你的第一篇文章发布到 maquren.top 上：
一边记录搭建过程，一边真正用它完成这个过程——算是一个完美的起点。

相关阅读