AI AI 知识库 记录 AI 工具、教程和实战经验
主页 / 归档 / 站点建设

部署方案

介绍这个静态博客的写作方式、目录结构和部署流程。

2026/05/27 17 分钟 10,808 字
AstroMarkdown自动部署

🏆 最优方案：Cloudflare Pages（完全免费 + 国内外双快）

根据你的需求（免费/低成本 + 国内外访问快 + 稳定），我给出明确推荐：

⭐ 最佳答案：Cloudflare Pages

为什么是 Cloudflare Pages？

1. 完全免费

  • ✅ 无限带宽和请求 [20]
  • ✅ 免费 .pages.dev 子域名
  • ✅ 自动 HTTPS 证书
  • ✅ 无隐藏费用 [22]

2. 国内外访问都快

  • ✅ Cloudflare 在全球 335+ 个城市部署了 CDN 节点 [23]
  • ✅ 覆盖全球 95% 人口，延迟低于 50ms [23]
  • ✅ 亚洲很多地区可以正常访问，因为部署了全球 CDN 加速器 [22]
  • ✅ Cloudflare 与中国战略合作伙伴合作，提供高性能网络服务 [20]

3. 最稳定

  • ✅ Cloudflare 是全球最大的 CDN 服务商之一
  • ✅ 内置 DDoS 防护 [20]
  • ✅ 99.99% 可用性保证
  • ✅ 自动故障转移

4. 零配置 CI/CD

  • ✅ 连接 Gitee/GitHub 后自动部署
  • ✅ 每次 push 自动构建
  • ✅ 预览环境支持

📊 三大平台对比（2026年最新）

特性Cloudflare PagesVercelNetlify
价格💰 完全免费💰 免费（有限额）💰 免费（有限额）
带宽限制✅ 无限制⚠️ 100GB/月⚠️ 100GB/月
构建时间✅ 500次/月⚠️ 100分钟/月⚠️ 300分钟/月
国内访问✅ 快速稳定 [22]⚠️ 较慢/不稳定⚠️ 较慢/不稳定
国外访问✅ 极快✅ 快✅ 快
CDN 节点✅ 335+ 城市 [23]⚠️ 主要美欧⚠️ 主要美欧
Astro 支持✅ 原生支持✅ 原生支持✅ 原生支持
自定义域名✅ 无限制✅ 支持✅ 支持

结论：Cloudflare Pages 在所有维度都是最优选择 [24] [25]。

👍 好的！方案 B：直接使用 GitHub 作为 origin

既然你选择了方案 B，那我们继续完成后续步骤。

✅ 确认当前状态

你应该已经执行了：

# 删除原来的 origin（Gitee）
git remote remove origin

# 添加 GitHub 作为新的 origin
git remote add origin <https://github.com/aluruihua-ui/zhengzaihun-blog.git>

🚀 接下来的完整步骤

第一步：推送代码到 GitHub

# 推送到 GitHub（首次需要 -u 参数）
git push -u origin main

可能遇到的情况：

情况 1：提示输入用户名和密码

GitHub 已不支持密码登录，需要使用 Personal Access Token：

快速获取 Token：

  1. 访问：https://github.com/settings/tokens/new
  2. 填写：
    • Note（备注）：Cloudflare Pages Deploy
    • Expiration（过期时间）：No expiration（永不过期）
    • 勾选权限：repo（全部勾选）
  3. 点击 Generate token
  4. 立即复制 token（只显示一次！）

使用 Token 推送：

git push -u origin main

# 用户名：你的 GitHub 用户名（aluruihua-ui）
# 密码：粘贴刚才复制的 token

情况 2：提示分支名不匹配

如果提示 main 分支不存在，可能你的本地分支是 master：

# 查看当前分支名
git branch

# 如果是 master，重命名为 main
git branch -M main

# 再次推送
git push -u origin main

情况 3：推送成功

看到类似输出：

Enumerating objects: 100, done.
Counting objects: 100% (100/100), done.
Writing objects: 100% (100/100), 1.23 MiB | 2.00 MiB/s, done.
Total 100 (delta 0), reused 0 (delta 0)
To <https://github.com/aluruihua-ui/zhengzaihun-blog.git>
 * [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.

✅ 成功！ 代码已经在 GitHub 上了。

第二步：验证 GitHub 仓库

访问你的 GitHub 仓库确认代码已上传：

<https://github.com/aluruihua-ui/zhengzaihun-blog>

你应该能看到所有文件，包括：

  • src/ 目录
  • astro.config.mjs
  • package.json
  • README.md
  • 等等

第三步：连接 Cloudflare Pages

现在开始配置自动部署！

1. 访问 Cloudflare Dashboard

打开浏览器访问：https://dash.cloudflare.com/

登录你的 Cloudflare 账户。

2. 进入 Workers & Pages

  • 在左侧菜单找到 Workers & Pages
  • 点击进入

3. 创建新项目

  • 点击右上角的 Create application 按钮
  • 选择 Pages 标签
  • 点击 Connect to Git 按钮

!image.png

4. 连接 GitHub

  • 选择 GitHub
  • 点击 Connect GitHub 按钮
  • 会跳转到 GitHub 授权页面
  • 点击 Authorize Cloudflare Pages
  • 可能会要求输入 GitHub 密码确认

!image.png

5. 选择仓库

!image.png

回到 Cloudflare 页面后：

  • 在仓库列表中找到 aluruihua-ui/zhengzaihun-blog
  • 点击仓库名称旁边的 Begin setup 按钮

如果看不到仓库：

  • 点击 Configure GitHub app
  • 选择 All repositories 或者选择特定仓库
  • 保存后返回 Cloudflare

6. 配置构建设置

填写以下信息：

项目名称 (Project name)：
  zhengzaihun-blog
  （或者你喜欢的名字，只能用小写字母、数字、连字符）

生产分支 (Production branch)：
  main

框架预设 (Framework preset)：
  Astro
  （从下拉菜单选择，会自动填充下面的配置）

构建命令 (Build command)：
  npm run build
  （如果选择了 Astro 预设会自动填充）

构建输出目录 (Build output directory)：
  dist
  （如果选择了 Astro 预设会自动填充）

根目录 (Root directory)：
  /
  （保持默认，留空或填 /）

环境变量 (Environment variables)：
  （暂时留空，除非你的项目需要特殊配置）

7. 保存并部署

  • 检查配置是否正确
  • 点击底部的 Save and Deploy 按钮

第四步：等待部署完成

Cloudflare 会开始构建和部署：

你会看到：

  1. Initializing build environment（初始化构建环境）
  2. Cloning repository（克隆仓库）
  3. Building application（构建应用）
    • Installing dependencies（安装依赖）
    • Running build command（运行构建命令）
  4. Deploying to Cloudflare’s global network（部署到全球网络）
  5. Success!（成功！）

整个过程大约 2-5 分钟。

!image.png

第五步：访问你的网站

部署成功后，页面会显示：

✨ Success! Your site is live at:
<https://zhengzaihun-blog.pages.dev>

点击链接或复制到浏览器访问！ 🎉

!image.png

🎁 以后更新内容的流程

现在你已经配置好自动部署，以后更新非常简单：

方式一：命令行

# 1. 编辑文章或修改代码
# ...

# 2. 提交更改
git add .
git commit -m "新增文章：我的第一篇博客"

# 3. 推送到 GitHub
git push origin main

# 4. 等待 2-3 分钟，Cloudflare 自动部署完成
# 访问 <https://zhengzaihun-blog.pages.dev> 查看更新

就这么简单！ 每次 git push 后，Cloudflare 会自动：

  • 检测到代码变更
  • 运行 npm run build
  • 部署新版本到全球 CDN
  • 2-3 分钟后更新生效

方式二：创建快捷脚本

# 创建一键部署脚本
cat > deploy.sh << 'EOF'
#!/bin/bash

echo "📝 添加文件..."
git add .

# 获取提交信息
read -p "请输入提交信息: " commit_message
git commit -m "$commit_message"

echo "🚀 推送到 GitHub（触发自动部署）..."
git push origin main

echo ""
echo "✨ 推送成功！"
echo "⏳ Cloudflare 正在自动部署，预计 2-3 分钟完成"
echo "🌐 访问地址：<https://zhengzaihun-blog.pages.dev>"
echo ""
echo "💡 提示：可以在 Cloudflare Dashboard 查看部署进度"
echo "   <https://dash.cloudflare.com/>"
EOF

# 添加执行权限
chmod +x deploy.sh

以后更新只需运行：

./deploy.sh

输入提交信息，自动完成推送和部署！

📊 在 Cloudflare 查看部署状态

实时查看部署进度

  1. 访问：https://dash.cloudflare.com/
  2. 进入 Workers & Pages
  3. 点击你的项目 zhengzaihun-blog
  4. 可以看到：
    • 最新部署状态（Building / Success / Failed）
    • 部署历史（所有版本）
    • 构建日志（点击查看详细日志）
    • 访问统计（流量、请求数等）

查看构建日志

如果部署失败，点击失败的部署记录查看日志，通常会显示：

  • 哪一步出错
  • 错误信息
  • 如何修复

⚙️ Cloudflare Pages 高级功能

1. 预览部署（Preview Deployments）

每次推送到非 main 分支，Cloudflare 会自动创建预览环境：

# 创建新分支测试功能
git checkout -b feature/new-article
git add .
git commit -m "测试新文章"
git push origin feature/new-article

# Cloudflare 会自动生成预览链接：
# <https://abc123.zhengzaihun-blog.pages.dev>

这样可以在不影响正式网站的情况下测试新功能！

2. 回滚到历史版本

如果新版本有问题，可以一键回滚：

  1. 进入 Cloudflare Dashboard → 你的项目
  2. 点击 Deployments 标签
  3. 找到想要恢复的版本
  4. 点击 Rollback to this deployment

3. 自定义域名

如果你有自己的域名（或申请了免费的 EU.org 域名）：

  1. 在项目页面点击 Custom domains
  2. 点击 Set up a custom domain
  3. 输入域名（如 yourblog.eu.org）
  4. 按提示配置 DNS（添加 CNAME 记录）
  5. 等待 SSL 证书自动签发（5-10 分钟）

❓ 常见问题

Q1：部署失败，显示 “Build failed”

查看构建日志：

  1. 进入 Cloudflare Dashboard
  2. 点击失败的部署
  3. 查看 Build log

常见原因：

  • ❌ npm run build 在本地能成功，但在 Cloudflare 失败

    • 解决：检查 package.json 的 engines 字段，指定 Node 版本
    {
  "engines": {
    "node": ">=18.0.0"
  }
}

  • ❌ 依赖安装失败

    • 解决：确保 package-lock.json 已提交到 Git

  • ❌ 构建输出目录不对

    • 解决：检查 Cloudflare 配置的输出目录是否为 dist

Q2：网站部署成功但显示 404

检查：

  1. 构建输出目录是否正确（应该是 dist）
  2. dist/ 目录下是否有 index.html
  3. Astro 配置是否正确（output: 'static'）

Q3：每次推送都要输入 GitHub 用户名和 Token？

配置 Git 凭据缓存：

# macOS/Linux
git config --global credential.helper store

# 下次输入用户名和 token 后会自动保存

或者使用 SSH：

# 生成 SSH 密钥
ssh-keygen -t ed25519 -C "your_email@example.com"

# 复制公钥
cat ~/.ssh/id_ed25519.pub

# 添加到 GitHub：
# <https://github.com/settings/keys> → New SSH key

# 修改远程地址为 SSH
git remote set-url origin git@github.com:aluruihua-ui/zhengzaihun-blog.git

🎯 总结：你的下一步

现在立即做（5 分钟）：

# 1. 推送代码到 GitHub
git push -u origin main

# 2. 访问 Cloudflare Dashboard
# <https://dash.cloudflare.com/>

# 3. Workers & Pages → Create application → Pages → Connect to Git

# 4. 选择 GitHub 仓库 → 配置构建设置 → Save and Deploy

# 5. 等待 2-5 分钟部署完成

# 6. 访问你的网站
# <https://zhengzaihun-blog.pages.dev>

部署成功后：

  • ✅ 你的博客已经上线，全球可访问
  • ✅ 国内外访问都很快（Cloudflare 全球 CDN）
  • ✅ 自动 HTTPS，安全可靠
  • ✅ 每次 git push 自动部署，无需手动操作

现在就开始吧！ 有任何问题随时告诉我，我会帮你解决！💪

需要我提供 Cloudflare Pages 配置页面的详细截图说明吗？😊

💰 完全免费！不要钱！

✅ Cloudflare Pages 免费套餐

Cloudflare Pages 提供非常慷慨的免费套餐，对于个人博客来说完全够用！

📊 免费套餐包含什么

🎁 完全免费的功能：

功能免费额度说明
带宽✅ 无限制不限流量！
请求次数✅ 无限制不限访问量！
构建次数✅ 500次/月足够个人使用
并发构建✅ 1个同时只能构建1个项目
项目数量✅ 100个可以部署100个网站
自定义域名✅ 无限制免费绑定域名
HTTPS 证书✅ 自动签发永久免费 SSL
全球 CDN✅ 335+节点全球加速
DDoS 防护✅ 包含安全防护
预览环境✅ 无限制每个分支都有预览链接
部署历史✅ 保留所有可以回滚到任意版本
团队协作✅ 支持可以邀请成员

💡 对比其他平台

平台免费带宽免费构建国内访问费用
Cloudflare Pages✅ 无限✅ 500次/月✅ 快💰 $0
Vercel⚠️ 100GB/月⚠️ 100分钟/月⚠️ 慢💰 $0-20/月
Netlify⚠️ 100GB/月⚠️ 300分钟/月⚠️ 慢💰 $0-19/月
GitHub Pages⚠️ 100GB/月✅ 无限⚠️ 很慢💰 $0

结论：Cloudflare Pages 是最慷慨的免费方案！

🔍 什么时候需要付费？

免费套餐的限制（对个人博客影响极小）：

  1. 构建次数：500次/月
    • 相当于每天可以更新 16 次
    • 对个人博客来说完全够用
    • 超出后：$0.50 每 500 次构建
  2. 并发构建：1个
    • 同时只能构建 1 个项目
    • 个人使用不会有影响
    • 升级后：可以同时构建 5 个项目
  3. 构建时间：无限制
    • 但单次构建不能超过 20 分钟
    • Astro 项目通常 1-2 分钟就够了

💸 付费套餐（你不需要）

Pro 套餐：$20/月

提供的额外功能：

  • 并发构建：5个
  • 优先支持
  • 高级分析

对个人博客来说：完全不需要！

✅ 实际使用场景分析

你的博客使用情况：

假设你：

  • 每天更新 1 篇文章
  • 每篇文章修改 3 次才满意
  • 每月 30 天

计算：

每月构建次数 = 30天 × 3次 = 90次
免费额度 = 500次/月

剩余额度 = 500 - 90 = 410次

结论：免费额度绰绰有余！ ✅

🎯 成本对比

方案一：Cloudflare Pages（推荐）

月费用：$0
年费用：$0
总成本：$0 ✅

包含：
✅ 无限带宽
✅ 无限请求
✅ 全球 CDN
✅ 自动 HTTPS
✅ 自动部署

方案二：自己买服务器

月费用：
- 服务器：$5-10/月
- 域名：$10-15/年 ≈ $1/月
- SSL 证书：免费（Let's Encrypt）
总计：$6-11/月 ❌

年费用：$72-132/年

还需要：
⚠️ 自己维护服务器
⚠️ 自己配置 Nginx
⚠️ 自己更新系统
⚠️ 自己处理安全问题

对比：Cloudflare Pages 省钱又省心！

🆓 其他免费资源

如果你想要自定义域名：

免费域名选项：

  1. EU.org（推荐）
    • 费用：完全免费
    • 示例：yourblog.eu.org
    • 可信度：高
    • 审核时间：1-2周
  2. Freenom（不推荐）
    • 费用：免费
    • 域名：.tk、.ml、.ga 等
    • 问题：容易被回收，不稳定
  3. 使用 Cloudflare Pages 默认域名
    • 费用：完全免费
    • 域名：zhengzaihun-blog.pages.dev
    • 优点：立即可用，稳定可靠

📋 完整免费方案总结

零成本建站方案：

1. 代码托管：GitHub（免费）
2. 网站部署：Cloudflare Pages（免费）
3. 域名：
   - 选项A：使用 .pages.dev 域名（免费）
   - 选项B：申请 EU.org 域名（免费）
4. HTTPS 证书：Cloudflare 自动签发（免费）
5. CDN 加速：Cloudflare 全球网络（免费）
6. 自动部署：Git push 触发（免费）

总成本：$0/月，$0/年 ✅

⚠️ 需要注意的地方

免费套餐的”陷阱”（其实不是陷阱）：

  1. 不会自动扣费
    • Cloudflare Pages 免费套餐永久免费
    • 不会突然收费
    • 超出限制会停止构建，不会扣钱
  2. 不需要绑定信用卡
    • 注册 Cloudflare 账户不需要信用卡
    • 使用免费套餐不需要付费信息
  3. 没有隐藏费用
    • 带宽：真的无限
    • 请求：真的无限
    • 不会有额外收费

🎉 总结

问：Cloudflare Pages 要钱吗？

答：完全不要钱！ ✅

  • ✅ 免费注册
  • ✅ 免费部署
  • ✅ 免费带宽（无限）
  • ✅ 免费请求（无限）
  • ✅ 免费 HTTPS
  • ✅ 免费 CDN
  • ✅ 免费自定义域名
  • ✅ 没有隐藏费用
  • ✅ 不需要信用卡

适合人群：

  • ✅ 个人博客
  • ✅ 作品集网站
  • ✅ 文档站点
  • ✅ 小型项目
  • ✅ 学习练习

什么时候需要付费？

只有当你：

  • 每月构建超过 500 次（几乎不可能）
  • 需要同时构建多个项目（个人用户不需要）
  • 需要企业级支持（个人用户不需要）

对于你的个人博客：永远免费！ 🎁

放心使用吧！完全免费，没有任何隐藏费用！ 😊

现在可以继续部署了，点击页面底部的 “Get started” 开始吧！🚀

许可协议

除特别说明外，本站文章采用 CC BY-NC-SA 4.0 协议。转载请注明来源。