LittleQ Tech

Appearance

Chapter 09 // CDN篇⏱️11 min read📅2026-09-17
#Cloudflare Pages #CI/CD #Anycast
生产实测通过

09. 全球加速：GitHub + Cloudflare Pages 博客自动化部署实战 ​

在前面的章节中，我们打造了专属的 AI 开发机与跨网远程协同架构。本章记录如何将这一套基于 VitePress 打造的个人技术博客，通过 GitHub + Cloudflare Pages 实现全球 CDN 秒开与全自动发布。

一、为什么选择 Cloudflare Pages？ ​

传统自建博客通常需要自己租用云主机、配置 Nginx、申请并定期续期 SSL 证书，遇到高并发或跨网访问时网络容易波动。

使用 GitHub + Cloudflare Pages 的核心优势：

  • 全球 Anycast CDN：动静资源缓存在 Cloudflare 全球数百个边缘节点，国内和海外访问速度均有显著提升；
  • 全自动 CI/CD：只需一条 git push 命令，云端自动拉取最新源码并完成构建，30 秒内发布生效；
  • 原生支持私有仓库：即便你的 GitHub 仓库是 Private（私有），Cloudflare Pages 依然可以免费拉取并部署。这不仅能保护未公开发布的草稿与架构笔记，静态网页依然能公开提供服务；
  • 终身免费：Cloudflare Pages 免费版每月提供高达 500 次构建额度，访问带宽和请求次数不限量，零运营成本。

二、关键概念避坑：Workers vs Pages 怎么选？ ​

在刚接触 Cloudflare 时，很多开发者容易把 Cloudflare Workers 与 Cloudflare Pages 混淆，甚至踩入无法访问的坑：

维度Cloudflare WorkersCloudflare Pages
主要定位Serverless 计算、函数计算、API 代理网关静态网站托管（VitePress、Vue、React、Astro）
默认分配域名*.workers.dev*.pages.dev
国内直连访问❌ 严重受限（域名已被运营商 DNS 污染）⚠️ 部分可用（建议配合自定义域名使用）
构建方式需手写 Worker 代码或复杂构建脚本原生支持 Git 自动监听并执行 npm run build
博客适用度不适合新手或纯静态博客最佳实践，强烈推荐

血泪经验： 如果你发现部署完成后通过分配的 https://<name>.workers.dev 访问时一直报连接超时，这是因为 workers.dev 根域名在中国大陆大部分运营商网络中已被 DNS 污染重定向。托管静态博客请务必使用 Pages！

三、方式一：Cloudflare 网页控制台配置指南 ​

如果你习惯在浏览器界面操作，只需按以下步骤一次性完成 Git 关联：

1. 授权 GitHub 仓库 ​

  1. 登录 Cloudflare Dashboard；
  2. 在左侧菜单点击 Workers 和 Pages ➔ 点击 创建 (Create)；
  3. 关键操作：顶部默认选中 Workers，请务必点击切换到「Pages」选项卡；
  4. 点击 连接到 Git (Connect to Git)；
  5. 在 GitHub 授权列表选中你的博客仓库（例如 tech-blog）。如果列表为空，点击下方的 管理 GitHub 应用程序权限 将该仓库打勾授权。

2. 填写构建参数（常见疑难点解答） ​

在「设置构建和部署」页面中，如果找不到名为 VitePress 的框架预设，完全不用纠结，选择 None（无） 即可。预设本质上只是自动填充输入框的模板，直接手动填写以下核心参数：

  • 项目名称 (Project name)：tech-blog
  • 生产分支 (Production branch)：main
  • 构建命令 (Build command)：
    bash
    npm run docs:build
  • 构建输出目录 (Build output directory)：
    text
    docs/.vitepress/dist
    (注意：由于 VitePress 文档位于 docs/ 目录下，务必写全路径，不要只填默认的 dist)
  • 环境变量 (Environment variables)： 展开底部的「环境变量」菜单，添加一行：
    • 变量名称：NODE_VERSION
    • 变量值：20（或 22，避免云端默认 Node 运行时版本过低引发编译异常）。

点击 保存并部署 (Save and Deploy)，等待约 30 秒至 1 分钟即可完成初次线上构建。

四、方式二：使用 Wrangler CLI 极客命令行全自动部署 ​

如果你更喜欢在终端中快速搞定，Cloudflare 官方提供的 wrangler CLI 可以在 Linux/Mac/WSL 终端中全自动完成创建、构建与发布。

1. 终端设备快速授权 ​

在终端执行设备授权命令（适合远程 SSH 或容器环境）：

bash
npx wrangler login --device

控制台会输出一个带有验证码的官方授权链接，在任意浏览器中打开并点击 允许 (Approve)，终端即可在 5 秒内自动登录完成。

2. 一键创建 Pages 项目 ​

bash
npx wrangler pages project create tech-blog --production-branch main --force

3. 本地编译与直推边缘节点 ​

bash
# 1. 静态产物构建
npm run docs:build

# 2. 部署到 Cloudflare Pages
npx wrangler pages deploy docs/.vitepress/dist --project-name tech-blog --branch main

部署完成后，控制台将直接返回当前版本的永久访问 URL 和全局默认域名。

五、访问博客：默认域名与域名解析 ​

部署完成后，Cloudflare Pages 会自动为该项目分配一个专属二级域名：

text
https://<project-name>.pages.dev
  • 这个链接已经部署在全球 CDN，自带 HTTPS 证书；
  • 没有自己的域名也可以直接使用它，可直接将此链接分享给朋友或作为日常查阅手册。

六、进阶扩展：绑定自有域名（可选） ​

提示：绑定自定义域名是完全可选的。如果你暂时没有购买域名，使用默认的 .pages.dev 已经足够日常使用。

如果你希望博客更有个人品牌辨识度（例如使用 blog.littleq.com.cn），且域名托管在第三方平台（如腾讯云 DNSPod 或 阿里云万网），可以按以下指引操作：

1. 在 Cloudflare Pages 发起域名绑定 ​

  1. 进入 Cloudflare 控制台 ➔ Workers 和 Pages ➔ 点击你的 tech-blog 项目；
  2. 顶部切换到 自定义域 (Custom domains) ➔ 点击 设置自定义域；
  3. 输入你的专属二级域名（例如 blog.littleq.com.cn）并点击继续；
  4. 页面将提示你需要配置的目标地址（通常为你的项目专属地址，如 tech-blog-020.pages.dev）。

2. 在腾讯云 / 阿里云添加 CNAME 解析 ​

登录你的域名解析控制台，给主域名添加一条解析记录：

配置项填写内容解释说明
主机记录blog即二级域名前缀
记录类型CNAME别名指向
线路类型默认保持默认即可
记录值tech-blog-020.pages.dev粘贴 Cloudflare Pages 页面提示的目标地址
TTL600默认 600 秒

保存后，腾讯云通常在 1 分钟内生效。Cloudflare 检测到 CNAME 记录后，会自动通过权威 CA 机构申请并配置免费的 SSL 证书。稍等 2~5 分钟刷新，状态变为绿色的 有效 (Active) 后，即可通过自定义域名全网 HTTPS 直连秒开。

七、日常极简写作发布流 ​

完成了上述一次性配置后，以后的写作与更新变得极其优雅简单：

text
[本地撰写 Markdown]
       ↓
[npm run docs:build 校验]
       ↓
[git push origin main]
       ↓
[Cloudflare Pages 自动构建分发]
       ↓
[全球 CDN 30 秒内实时生效]

你无需关心任何服务器运维、证书续期或静态同步脚本，专注于技术输出与内容本身即可！

八、进阶实战：现代技术博客的 SEO 与 GEO（生成式引擎优化）落地指引 ​

当你的技术博客拥有了持续的高质量技术干货输出后，如何让全世界的同行、搜索引擎（Google、Bing、Baidu）以及新兴的 AI 搜索智能体（Perplexity、ChatGPT Search、Claude、Cursor、Kimi） 能在毫秒级内精准检索并引用你的文章？

这便引出了从传统 SEO（Search Engine Optimization，搜索引擎优化） 到现代 GEO（Generative Engine Optimization，生成式引擎优化） 的全套落地策略。

1. 认知升级：传统 SEO vs 现代 GEO 有何本质不同？ ​

  • 传统 SEO（面向关键词倒排索引）： Google、Baidu 等传统爬虫依赖关键词密度、反向外链数量、PageRank 权重与页面加载速度（Core Web Vitals）。只要页面结构合理、加载飞快，就能在搜索结果列表中排上好位置；
  • 现代 GEO（面向大模型 RAG 与向量知识库）： 当用户向 Perplexity 或 ChatGPT 提问“如何排查 Claude Code 换行失效？”或“对称型 NAT 打洞原理是什么？”时，AI 引擎会在后台直接爬取全网高质量页面，进行分块（Chunking）、语义向量化（Embedding）与重排序（Rerank），并直接总结成文并附带你的博客链接作为事实引证源！
    • GEO 最青睐的内容特征：原创推导公式、严谨的协议参数解释、高信息密度的架构图表、清晰的 Markdown 标题层级以及拒绝空话套话的实战代码。

2. 基础 SEO 护城河：一键自动化全站站点地图（Sitemap）与 Robots 协议 ​

静态站点最怕的是“孤岛页面”——新写的文章由于没有被爬虫发现而迟迟无法被收录。

开启 VitePress 原生 Sitemap 自动生成 ​

在 docs/.vitepress/config.ts 中声明站点的权威域名：

typescript
export default defineConfig({
  // 开启静态站点地图自动构建
  sitemap: {
    hostname: 'https://tech-blog-020.pages.dev' // 或替换为你的自定义绑定域名
  }
})

每次执行 npm run docs:build 时，VitePress 编译器会自动扫描全量 Markdown 页面与最后修改时间（lastmod），并在编译产物根目录下生成标准的 sitemap.xml。

规范 public/robots.txt 爬虫指引 ​

在 docs/public/robots.txt 中明确对各大搜索引擎开放抓取，并指明站点地图的绝对网络地址：

text
User-agent: *
Allow: /

# Sitemaps 站点地图全局信标
Sitemap: https://tech-blog-020.pages.dev/sitemap.xml

3. 社交传播与分享卡片：Open Graph 与 Twitter Card 协议 ​

当你把技术博客链接分享到微信、Telegram、Twitter/X、Slack 或飞书群聊时，如果只显示干瘪的纯文本 URL，点击率会非常低；而配置了 Open Graph 协议后，聊天软件会自动展开精美的“标题 + 描述摘要 + 大图封面”的富媒体极客卡片。

在 docs/.vitepress/config.ts 的 head 数组中注入全套协议标签：

typescript
head: [
  ['link', { rel: 'icon', href: '/logo.svg' }],
  ['meta', { name: 'theme-color', content: '#3eaf7c' }],
  
  // Open Graph 协议 (微信 / Telegram / 飞书富媒体卡片)
  ['meta', { property: 'og:site_name', content: 'LittleQ Tech' }],
  ['meta', { property: 'og:type', content: 'article' }],
  ['meta', { property: 'og:title', content: 'LittleQ Tech // 极客技术手札' }],
  ['meta', { property: 'og:description', content: '探索系统底层架构、网络穿透原理、云原生与 AI 智能体前沿实战手札' }],
  ['meta', { property: 'og:image', content: 'https://tech-blog-020.pages.dev/logo.svg' }],
  
  // Twitter Card 协议 (X / Twitter 摘要卡片)
  ['meta', { name: 'twitter:card', content: 'summary' }],
  ['meta', { name: 'twitter:title', content: 'LittleQ Tech // 极客技术手札' }],
  ['meta', { name: 'twitter:description', content: '探索系统底层架构、网络穿透原理、云原生与 AI 智能体前沿实战手札' }],
  ['meta', { name: 'twitter:image', content: 'https://tech-blog-020.pages.dev/logo.svg' }]
]

4. 面向 AI 时代的专属索引信标：llms.txt 规范实战 ​

2024 年底由开源 AI 社区发起的 llms.txt 规范（llmstxt.org），正迅速成为 AI 智能体和大模型爬虫抓取站点的全新标准，堪称“大模型时代的 robots.txt”。

由于普通 HTML 页面中充斥着复杂的 CSS 样式、Vue 运行时脚手架、JS 脚本与导航 DOM 树，大模型在爬取解析时会消耗海量的 Token 并可能发生信息混淆。

llms.txt 提供了一份专门为 LLM 设计的高密度、纯 Markdown 格式的知识库目录清单。当开发者在 Cursor、Claude Code 中输入 @https://tech-blog-020.pages.dev/llms.txt，或者 AI 搜索智能体访问站点时，能够直接读取这份清单，精准定位全站每一篇文章的权威摘要与原文链接。

在 docs/public/llms.txt 中定义如下规范结构：

markdown
# LittleQ Tech 极客技术专栏 (llms.txt)

> 本文件遵循 llmstxt.org 规范，为 LLM / AI 搜索智能体提供全站高密度知识地图。

## 站点概述
- 名称：LittleQ Tech
- 主页：https://tech-blog-020.pages.dev
- 定位：专注系统底层调优、网络穿透原理、云原生与现代 AI 智能体工程落地。

## 核心文章索引
- [15. 穿透哲学：从 NAT 状态机诱导到零信任博弈](https://tech-blog-020.pages.dev/guide/15-nat-traversal-principles): 阻断三座大山、RFC 4787 二维正交矩阵、对称型 NAT 死锁推导与零信任架构重构。
- [14. 程序员的 AI 认知重构：Token、Embedding 与 KV Cache](https://tech-blog-020.pages.dev/guide/14-ai-mental-model): BPE 分词协议、KV Cache 显存爆炸推导、vLLM PagedAttention 分页思想与大厂高频面试标准回答。
... (列出全站核心精选文章)

5. 权重保护与防分流：Canonical 规范链接 ​

在 Cloudflare Pages 部署场景下，你的博客通常会同时拥有：

  • 默认免费分配的二级域名：tech-blog-020.pages.dev；
  • 自定义绑定的独立域名：blog.littleq.com.cn。

如果两个域名同时在线，百度和 Google 会认为它们是“重复内容（Duplicate Content）”，导致搜索权重被生生腰斩分流。通过配置 VitePress 的 sitemap 与权威 Canonical 标签，明确指定一个全局唯一的主域名，就能把全网所有爬虫的权重全部汇聚在一个权威入口，形成持久的技术个人品牌沉淀！

💡 觉得有收获？互动与分享
💬

交流讨论

🔒
隐私与交流保障

游客无需填写昵称，输入内容即可秒级留评。邮箱为选填项，前台展示时严格打码脱敏（如 s***7@domain.com），绝不对外泄漏；仅用于博主技术解答回复与商业合作对接，请放心选填。

基于 MIT 协议开源发布 | 配套 10 分钟实战视频

Copyright © 2026 LittleQ Tech