网站部署指南

使用 GitHub + Cloudflare Pages 免费部署和更新 YinDesign 官方网站

整体流程概览

YinDesign 官方网站采用纯静态 HTML/CSS/JS 构建，无需服务器端运行环境。我们使用 GitHub 作为代码仓库，Cloudflare Pages 作为免费托管平台，实现零成本、全自动的网站部署方案。

为什么选择这个方案？ GitHub 提供免费的代码托管和版本管理，Cloudflare Pages 提供免费的全球 CDN 加速和 SSL 证书。两者联动后，每次更新 GitHub 代码，Cloudflare 会自动重新构建和部署网站，无需任何手动操作。

部署流程图

  1. 在本地编辑网站文件（HTML、CSS、JS、图片等）
  2. 将文件推送到 GitHub 仓库
  3. Cloudflare Pages 自动检测更新并构建
  4. 网站自动部署到全球 CDN 节点
  5. 访问者通过自定义域名访问最新内容

准备工作

在开始部署之前，需要准备以下账号和工具：

必要账号

平台用途注册地址
GitHub 代码仓库托管，存储网站文件 github.com/signup
Cloudflare 网站托管、CDN 加速、SSL 证书 dash.cloudflare.com/sign-up

推荐工具（Mac 用户）

  • GitHub Desktop：GitHub 官方图形界面工具，无需记忆命令，点按钮即可完成上传和更新。下载地址：desktop.github.com
  • 代码编辑器：VS Code、Sublime Text 或其他任意文本编辑器，用于修改 HTML/CSS 文件。
费用说明： 以上所有服务和工具均为免费。GitHub 公开仓库无限制，Cloudflare Pages 免费版提供无限带宽、每月 500 次构建，完全满足个人和小型项目需求。

上传文件到 GitHub

这一步将本地的网站文件上传到 GitHub 仓库中。推荐使用 GitHub Desktop 进行操作。

方法一：GitHub Desktop（推荐）

  1. 下载安装 GitHub Desktop，使用 GitHub 账号登录。
  2. 点击菜单 File → Add Local Repository，选择本地的 yindesign-website 文件夹。
  3. 系统提示"这不是一个 Git 仓库"，点击 create a repository 创建。
  4. 在弹出窗口中填写仓库名（如 yindesign-website），取消勾选 "Initialize with README"，点击 Create Repository。
  5. 在左下角 Summary 输入提交说明（如"初始版本"），点击 Commit to main。
  6. 点击顶部蓝色的 Publish repository 按钮，将仓库推送到 GitHub。
  7. 在浏览器中打开 GitHub 仓库页面，确认所有文件已成功上传。

方法二：网页直接上传

  1. 登录 GitHub，点击右上角 + → New repository 创建新仓库。
  2. 填写仓库名，选择 Public，不要勾选任何初始化选项，点击 Create repository。
  3. 在仓库页面点击 uploading an existing file 链接。
  4. 将本地 yindesign-website 文件夹内的所有文件（注意是文件夹内的文件，不是文件夹本身）拖拽到上传区域。
  5. 填写提交说明，点击 Commit changes。
重要提醒： 确保 index.html 在仓库的根目录（最顶层），不要嵌套在子文件夹中。否则部署后会出现 404 错误。

连接 Cloudflare Pages

GitHub 仓库准备好后，将其连接到 Cloudflare Pages 实现自动部署。

  1. 登录 Cloudflare，左侧菜单点击 Workers & Pages。
  2. 点击 Create application，切换到 Pages 选项卡。
  3. 点击 Connect to Git，选择 GitHub。
  4. 在授权页面点击 Authorize Cloudflare，允许访问 GitHub 仓库。
  5. 选择刚才创建的 yindesign-website 仓库，点击 Begin setup。

构建设置（关键步骤）

按照以下配置填写，不要随意修改：

设置项配置值说明
Project nameyindesign-website项目名，会出现在 pages.dev 域名中
Production branchmain保持默认
Framework presetNone纯静态网站，无需框架
Build command留空纯静态网站不需要构建命令
Build output directory留空 或 /index.html 在根目录

确认设置无误后，点击 Save and Deploy。等待 1-2 分钟，部署成功后会获得一个 *.pages.dev 的免费域名，点击即可预览网站。

验证部署： 部署成功后，在 Deployments 页面点击最新记录，检查 Assets 列表中是否包含所有文件（index.html、tutorial.html、buy.html 等）。如果有缺失，说明上传时文件没有全部提交。

绑定自定义域名

如果拥有自定义域名（如 yindesign.vip），可以绑定到 Cloudflare Pages。

  1. 在 Cloudflare 顶部确保已添加你的域名（如未添加，点击 Add Site 按提示操作）。
  2. 进入 Pages 项目页面，切换到 Custom domains 选项卡。
  3. 点击 Set up a custom domain，输入你的域名（如 yindesign.vip）。
  4. Cloudflare 会自动添加 DNS 记录，点击 Activate domain 完成激活。
  5. 等待几分钟，SSL 证书签发完成后，即可通过自定义域名访问网站。

DNS 服务器设置

如果域名在其他注册商（如万网/阿里云）购买，需要将域名的 DNS 服务器修改为 Cloudflare 提供的两个地址：

aron.ns.cloudflare.com
zelda.ns.cloudflare.com

具体地址以你的 Cloudflare 域名概览页面显示为准。DNS 修改后最多 24 小时全球生效，通常几分钟即可。

SSL/TLS 加密模式： 在 Cloudflare 域名设置的 SSL/TLS 页面，确保加密模式设置为 Full（完整），不要使用 Flexible，否则可能导致重定向循环错误（ERR_TOO_MANY_REDIRECTS）。

更新网站内容

网站部署完成后，每次更新内容只需要修改本地文件并推送到 GitHub，Cloudflare 会自动完成部署。

使用 GitHub Desktop 更新

  1. 在本地修改网站文件（编辑 HTML、替换图片等）。
  2. 打开 GitHub Desktop，它会自动检测到改动的文件。
  3. 在左侧确认改动的文件，点击单个文件可查看具体修改内容。
  4. 在左下角 Summary 填写修改说明（如"更新了订阅方案价格"），点击 Commit to main。
  5. 点击顶部的 Push origin 按钮，将改动推送到 GitHub。
  6. 等待 1-2 分钟，Cloudflare Pages 会自动检测更新并重新部署。

强制刷新查看更新

有时候浏览器会缓存旧版本的网站。如果更新后刷新看不到变化：

  • Mac：按 Cmd + Shift + R 强制刷新
  • Windows：按 Ctrl + F5 强制刷新
  • 或使用浏览器的无痕/隐私模式访问
  • 如仍有缓存，可在 Cloudflare 域名设置的 Caching 页面点击 Purge Everything 清除所有缓存

常见问题排查

1. 访问网站显示 404 Not Found

原因：99% 是构建输出目录配置错误，或者 index.html 不在仓库根目录。

解决：

  • 确认 GitHub 仓库中 index.html 在最顶层
  • 在 Pages 项目设置 → Builds & deployments 中确认 Build output directory 为空或 /
  • 修改后点击最新部署记录的 Retry deployment 重新部署

2. ERR_TOO_MANY_REDIRECTS（重定向次数过多）

原因：SSL/TLS 加密模式设置为 Flexible 导致 HTTP/HTTPS 重定向循环。

解决：在 Cloudflare 域名设置 → SSL/TLS 页面，将加密模式改为 Full。

3. 样式错乱或图片不显示

原因：CSS 和图片的引用路径错误。

解决：确保所有引用使用相对路径，例如：

  • ✅ 正确：<link rel="stylesheet" href="styles.css">
  • ❌ 错误：<link rel="stylesheet" href="/yindesign-website/styles.css">

4. 某个页面（如 tutorial.html）打不开

原因：该文件没有上传到 GitHub，或者文件名大小写不一致。

解决：

  • 确认 GitHub 仓库中存在该文件
  • 确认文件名和 URL 中的大小写完全一致（GitHub 区分大小写）
  • 确认 Cloudflare Pages 最新部署的 Assets 列表中包含该文件
  • 如文件缺失，重新提交并推送所有文件到 GitHub

5. 更新后还是显示旧内容

原因：浏览器缓存或 Cloudflare 缓存。

解决：

  • 按 Cmd + Shift + R 强制刷新浏览器
  • 使用无痕模式确认是否已更新
  • Cloudflare → Caching → Purge Everything 清除缓存
  • 确认 Pages 最新部署状态为 Success

6. 域名过户后网站无法访问

原因：域名过户后 DNS 服务器被注册商重置为默认值。

解决：

  • 登录域名注册商控制台，将 DNS 服务器改回 Cloudflare 提供的两个地址
  • 等待 DNS 生效（几分钟到 24 小时）
  • 在 Cloudflare Pages 项目 → Custom domains 中检查域名状态，必要时点击重试验证