超低成本展示型独立站部署上线

上一篇完成了页面与内容规划，现在可以把展示站真正上线了。

本篇教你用 Vercel / Netlify 一键部署 + 自定义域名，完整流程包含：

• Vercel 一键部署
• Netlify 一键部署
• Cloudflare 加速 + 免费 SSL
• GitHub Pages 部署
• 自定义域名绑定
• Supabase 免费集成

部署前的准备工作

1. 确保你的项目已经正常运行

   npm run build
   # 或者
   npm run dev

2. 确保 astro.config.mjs 中的 site 设置正确

   site: 'https://yourdomain.com', // 稍后改成你自己的域名

3. 在 Vercel/Netlify 控制台登录账号（推荐用 Vercel）

部署到 Vercel（最推荐）

第一步：连接 GitHub

1. 访问 vercel.com 注册/登录
2. 点击「新增」 → 「项目」
3. 选择「连接 GitHub」
4. 搜索你的仓库（blktech-showcase 或你自己仓库名）

第二步：配置部署

1. 选择你的仓库分支（推荐 main）

2. 环境变量（可选）：

   # 如果你用 Supabase
   SUPABASE_URL=
   SUPABASE_ANON_KEY=

3. 点击「部署」

Vercel 会自动为你生成一个预览链接（https://your-project-name.vercel.app）

第三步：自定义域名

1. 在 Vercel 仪表盘里找到你的项目
2. 点击「设置」 → 「自定义域名」
3. 输入你的域名（如 yourname.com）
4. 在 Cloudflare 添加 CNAME 记录：
   • 记录类型：CNAME
   • 主机名：@（根域名）
   • 值：your-project-name.vercel.app

提示：建议先用 yourname.com 作为子域测试，然后再绑定主域名。

部署到 Netlify（备选方案）

1. 访问 netlify.com 注册/登录
2. 点击「新增站点」 → 「从 Git 部署」
3. 连接 GitHub 仓库
4. 选择分支
5. 点击「部署」

Netlify 也会自动生成预览链接。

Cloudflare 加速 + 免费 SSL（强烈推荐）

即使你用 Vercel/Netlify 部署，也强烈建议再走一圈 Cloudflare：

步骤：

1. 访问 cloudflare.com 注册/登录
2. 点击「+ 添加站点」
3. 输入你的域名（yourname.com）
4. 选择「我已经在其他地方部署了我的网站」
5. 选择你部署的平台（Vercel / Netlify / GitHub Pages）

Cloudflare 带来的免费福利：

• 免费 CDN 加速（全球加速）
• 免费 SSL（HTTPS）
• 免费 Workers（Edge Functions）
• 免费 DDoS 保护
• 免费域名解析

GitHub Pages 部署（纯免费方案）

如果你不想用 Vercel/Netlify：

1. 把你的 dist 文件夹（npm run build 后生成的文件夹）上传到 GitHub
2. 仓库设置为 GitHub Pages 源代码
3. 域名设置为 https://yourusername.github.io/your-repo-name

缺点：自定义域名较麻烦，性能不如 Vercel

Supabase 免费集成（如果你需要）

如果你的展示站需要数据库或表单，可以直接集成 Supabase：

1. 在 Supabase 控制台创建新项目
2. 记下 SUPABASE_URL 和 SUPABASE_ANON_KEY
3. 在 Vercel/Netlify 环境变量中添加
4. 在你的 Astro 项目中导入 Supabase

部署后要做的几件事

1. 检查 404 页面

   • 在 Vercel/Netlify 后台设置 404.html

2. 添加 Analytics

   • Vercel Analytics
   • Netlify Analytics
   • Plausible（免费）

3. 设置 https 强制

   • 在 Cloudflare 页面规则中添加 Always Use HTTPS

4. 测试移动端

   • 确保在手机上能正常访问

总结：和第一篇选型内容对应

第一篇选型总结：

• Astro（核心）
• Vercel / Netlify（部署首选）
• Supabase free tier（数据库）
• Cloudflare（加速 + SSL）

本篇部署总结：

• Vercel / Netlify 一键部署（推荐）
• Cloudflare 加速 + 免费 SSL
• GitHub Pages 作为备选
• 自定义域名绑定
• Supabase 免费集成

系列导航

1. 选型与原理：Astro + 托管平台组合
2. 快速搭建：Astro + Tailwind 展示模板
3. 内容规划：页面结构、SEO 与 GEO
4. 当前：部署上线
5. 进阶优化：性能、Analytics 与个性化
6. 配套资源：模板、组件与 Prompt
7. 从 0 到 1 完整指南