静态网站部署指南

静态网站的优势

静态网站（Static Site）相比动态网站有很多优势：

优势	说明
🚀 性能	预先生成的 HTML，加载极快
🔒 安全	无数据库，无服务器端代码
💰 成本	可以完全免费托管
📈 扩展性	CDN 全球分发，无限扩展
🔧 维护	无需服务器维护

Cloudflare Pages 介绍

Cloudflare Pages 是一个优秀的静态网站托管平台：

• ✅ 完全免费 - 无限带宽和请求
• ✅ 全球 CDN - 200+ 节点覆盖全球
• ✅ 自动 HTTPS - 免费 SSL 证书
• ✅ 自动部署 - Git 推送自动构建
• ✅ 预览环境 - 每个 PR 都有预览链接

部署步骤

1. 准备代码

确保你的项目有以下结构：

my-woshicai-tech/
├── src/
│   ├── pages/
│   └── layouts/
├── public/
├── astro.config.mjs
└── package.json

2. 推送到 GitHub

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/your-username/my-woshicai-tech.git
git push -u origin main

3. 连接 Cloudflare Pages

1. 登录 Cloudflare Dashboard
2. 进入 Workers & Pages → Create application → Pages
3. 选择 Connect to Git
4. 授权 GitHub 并选择你的仓库

4. 配置构建设置

在构建配置中填写：

设置	值
Project name	my-woshicai-tech
Production branch	main
Build command	bun run build
Build output directory	dist
Root directory	/ (留空)

5. 添加自定义域名

如果你的域名已经在 Cloudflare：

1. 在 Pages 项目设置中点击 Custom domains
2. 添加你的域名（如 my.woshicai.tech）
3. Cloudflare 会自动配置 DNS

环境变量

如果需要使用环境变量（如 API Key）：

1. 在项目设置中找到 Environment variables
2. 添加变量，如：
   • PUBLIC_SITE_URL=https://my.woshicai.tech
   • CONTACT_FORM_ENDPOINT=https://formspree.io/f/xxx

自动部署

配置完成后，每次你推送代码到 main 分支，Cloudflare 会：

1. 自动拉取最新代码
2. 运行 bun install 安装依赖
3. 运行 bun run build 构建网站
4. 将 dist 目录部署到全球 CDN

整个过程通常在 1-2 分钟内完成！

总结

使用 Cloudflare Pages 部署静态网站非常简单：

• 无服务器维护
• 完全免费
• 自动 HTTPS
• 全球 CDN
• 自动部署

如果你有域名托管在 Cloudflare，那更是无缝集成。开始部署你的静态网站吧！