← 返回文章列表 / Back to Posts

使用 Cloudflare Pages 与 DNSHE 域名上线个人博客指南

作者 / Author: DGF •
#Cloudflare#域名解析#运维#部署

概述

Cloudflare Pages 是 Cloudflare 推出的静态网站托管服务，提供无限带宽、全球 CDN 加速、自动 HTTPS 证书配置，并且深度集成了 Git 持续集成与部署（CI/CD）。

本文记录如何将本博客部署至 Cloudflare Pages 并将 DNSHE 注册的域名 dgf.ccwu.cc 进行绑定的具体操作步骤。

步骤 1：本地构建与代码准备

在本地根目录下运行构建命令：

npm run build

Astro 会在 dist/ 目录中生成优化后的全部静态 HTML、CSS 与资源文件。

步骤 2：连接 GitHub 仓库与 Cloudflare Pages

  1. 将博客代码推送到自己的 GitHub 仓库（例如 dgf-blog）。
  2. 打开 Cloudflare 控制台。
  3. 在左侧菜单中选择 Workers 和 Pages (Workers & Pages) -> 点击 创建应用程序 (Create application) -> 选择 Pages 选项卡。
  4. 点击 连接到 Git (Connect to Git) 并授权 GitHub。
  5. 选择刚创建的 dgf-blog 仓库。
  6. 构建预设选择 Astro：
    • 构建命令 (Build command): npm run build
    • 输出目录 (Output directory): dist
  7. 点击 保存并部署 (Save and Deploy)。

部署完成后，Cloudflare 会生成一个类似 dgf-blog.pages.dev 的默认访问地址。

步骤 3：绑定 DNSHE 自定义域名 (dgf.ccwu.cc)

  1. 在 Cloudflare Pages 项目页面中，点击 自定义域 (Custom domains) -> 设置自定义域 (Set up a custom domain)。
  2. 输入您的完整域名：dgf.ccwu.cc，点击继续。
  3. Cloudflare 会提示您添加一条 CNAME 解析记录 指向 <您的项目名>.pages.dev。
  4. 登录 DNSHE 控制台：
    • 找到域名 dgf.ccwu.cc 的 DNS 解析设置。
    • 新增一条记录：
      • 记录类型 (Type): CNAME
      • 主机记录 (Host): @（或控制台要求的子域名前缀 dgf）
      • 记录值 (Target): xxx.pages.dev（填入 Cloudflare Pages 分配的地址）
      • TTL: 保持默认或 600
    • 保存解析。
  5. 返回 Cloudflare 页面点击激活/确认。通常 1~5 分钟内，状态会显示为 Active (有效)，SSL 证书也会自动签发完成！

总结

至此，一个具备全球 CDN 加速、自动 HTTPS 加密与 Git 联动自动更新的现代化博客系统就正式运行在 https://dgf.ccwu.cc 之上了！