AI 建站

AI 生成的网站怎么上线：GitHub Pages + Cloudflare 自定义域名完整流程

把 AI 生成的静态网站发布到 GitHub Pages，并用 Cloudflare 配置自定义域名、HTTPS、sitemap 和后续 SEO 流量验证。

更新：2026-05-01 · 预计阅读 12 分钟

链接说明：本文优先给出可执行方法。若未来接入返佣链接，会保持清晰披露，不影响正文步骤。

很多人已经能用 AI 写出一个 HTML 页面，但卡在真正上线：域名怎么解析、为什么 404、HTTPS 为什么证书不匹配、sitemap 怎么提交、以后怎么持续更新。这个流程解决的是最后一公里。

如果你只是要一个商业官网，并且不想碰 Git、DNS 和构建流程，可以考虑托管建站或主机服务。若你愿意把内容和代码都交给 Git 管理，GitHub Pages + Cloudflare 是低成本、透明、适合长期内容实验的方案。

查看 Hostinger 建站和 VPS 方案查看 Cloudways 托管方案

适合这种方案的人

你有静态网站文件，例如 index.html、styles.css、图片和文章页。
你希望每次改动都有 Git 记录。
你想用自己的域名，而不是默认的 github.io 子路径。
你要验证 SEO 长尾流量，而不是先做复杂后台。
你能接受登录 GitHub 和 Cloudflare 做基础配置。

不适合的人：

需要登录、支付、数据库和后台管理。
每天都要让非技术同事大量改页面。
对可视化编辑器依赖很强。

总体路径

静态网站代码
  -> GitHub 仓库
  -> GitHub Actions 构建
  -> GitHub Pages 发布
  -> Cloudflare CNAME 指向 GitHub Pages
  -> 自定义域名访问
  -> Search Console 提交 sitemap

关键点：DNS 只是把域名指到 GitHub，GitHub Pages 还必须知道这个域名属于哪个仓库。只配置 CNAME，不配置 Pages custom domain，常见结果就是 404 或 HTTPS 证书不匹配。

第一步：准备仓库和构建目录

最简单的静态站可以直接把 index.html 放在仓库根目录。但如果你有 Markdown、模板或构建脚本，更推荐输出到 public/，再用 GitHub Actions 上传。

一个基础结构：

content/
scripts/
static/
public/
package.json
.github/workflows/pages.yml

public/ 是构建产物，可以不提交到 Git。每次部署由 workflow 生成。

第二步：GitHub Pages workflow

如果你用 Node 构建，可以用这个思路：

name: Deploy static site to GitHub Pages

on:
  push:
    branches: ["main"]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
      - run: npm run build
      - uses: actions/upload-pages-artifact@v3
        with:
          path: public

  deploy:
    runs-on: ubuntu-latest
    needs: build
    steps:
      - uses: actions/deploy-pages@v4

第一次运行前，仓库 Pages 要启用 workflow 部署。启用后，每次 push 到 main 都会构建并发布。

第三步：Cloudflare DNS 怎么配

如果使用子域名，例如 spotlight.example.com：

Type: CNAME
Name: spotlight
Target: yourname.github.io
Proxy status: DNS only
TTL: Auto

这里建议先用 DNS only。等 GitHub Pages 自己签发证书、HTTPS 正常后，再考虑是否需要 Cloudflare 代理。很多 GitHub Pages 自定义域名问题，本质是 DNS、Pages custom domain 和证书签发状态没有对齐。

第四步：在 GitHub Pages 绑定自定义域名

GitHub Pages 需要 custom domain，例如：

spotlight.example.com

绑定之后，GitHub 会做 DNS health check，并给这个域名签发 HTTPS 证书。证书状态可能会短暂显示 pending，通常需要等待 DNS 和证书验证完成。

如果看到这些现象：

SSL: no alternative certificate subject name matches：GitHub 还没给你的域名签好证书。
GitHub Pages 404：DNS 指到了 GitHub，但 GitHub 不知道这个 host 应该对应哪个仓库。
CSS 丢失：项目站点用了子路径，资源链接却写成了根路径。

第五步：处理项目站点和根路径

GitHub Pages 项目站点默认是：

https://username.github.io/repository-name/

如果改成自定义域名：

https://spotlight.example.com/

资源路径会变化。生成器最好用 SITE_URL 统一生成 canonical、sitemap、CSS 和文章链接。这样从 github.io/repo/ 切到自定义域名时，不会留下错误路径。

第六步：上线后立刻做流量验证

上线只是开始。要让它变成 CPS 资产，需要马上做验证闭环：

生成 sitemap.xml。
在 Google Search Console 添加域名或 URL 前缀资源。
提交 sitemap。
记录页面被索引的日期。
每周看实际 query，不再靠猜。
对有 impressions 但 CTR 低的页面改标题。
对有 impressions 但排名低的 query 补内容。

如果目标是 CPS，不要急着塞一堆广告。先让页面真正解决问题，再把用户自然分流到合适的工具。

CPS 转化怎么做才不伤内容

这个主题适合的转化点：

不想折腾 GitHub Pages 的读者：托管建站或主机服务。
想自建更多项目的读者：VPS、域名、备份、监控工具。
已经上线的读者：SEO、邮件订阅、统计工具。

推荐写法是「场景分流」，不是硬插广告。比如：如果读者只是要快速上线官网，就给托管建站入口；如果读者要批量做内容站，就继续引导到 Git 自动部署和 SEO 验证。

参考资料

GitHub Pages 自定义域名官方文档：https://docs.github.com/articles/adding-a-cname-file-to-your-repository
GitHub Pages REST API 官方文档：https://docs.github.com/rest/pages/pages
Cloudflare Pages 自定义域名说明：https://developers.cloudflare.com/pages/configuration/custom-domains/