Hero
构建个人网站的技术选型：为什么选择 Astro + Cloudflare Pages
AstroCloudflare技术选型前端
作为独立开发者，拥有一个个人网站几乎是必需品。它不仅是作品集，更是你的数字名片。但技术选型往往让人纠结——框架太多，平台太多，如何做出正确的选择？
需求分析
在开始选型之前，我先梳理了核心需求：
- 内容为主：网站以展示内容为主，不需要复杂的交互
- SEO 友好：希望通过博客吸引搜索流量
- 零成本：作为个人项目，尽量不花钱
- 性能优先：页面加载要快，用户体验要好
- 开发体验：写起来要舒服，部署要方便
框架对比
我主要对比了以下几个方案：
Next.js
功能最强大，但对于纯内容网站来说太重了。SSR/SSG 混合模式很灵活，但默认会加载大量 JavaScript。而且部署到 Vercel 免费版有一些限制。
Hugo / 11ty
纯静态生成器，性能极好。但模板语法不太直观，组件化开发体验一般。
Astro
最终选择。原因如下：
// Astro 的 island 架构：默认零 JS
// 只有需要交互的组件才会加载 JavaScript
---
import StaticComponent from './Static.astro'; // 零 JS
import InteractiveComponent from './Interactive.tsx'; // 按需加载
---
<StaticComponent />
<InteractiveComponent client:visible />
- 零 JS 默认：内容页面不会加载任何 JavaScript
- 组件化：支持
.astro组件，语法类似 JSX - 内容集合：内置 Markdown/MDX 支持，自带类型安全
- 框架无关：需要时可以混用 React/Vue/Svelte
部署平台选择
Cloudflare Pages 是我的首选，理由很简单：
- 完全免费：无限带宽，无限请求
- 全球 CDN：Cloudflare 的网络覆盖全球
- 自动部署：连接 GitHub 后自动构建
- 自定义域名：免费 SSL 证书
对比 Vercel 和 Netlify，Cloudflare Pages 在免费额度上最慷慨，没有带宽限制。
实际效果
网站上线后的 Lighthouse 得分：
- Performance: 100
- Accessibility: 100
- Best Practices: 100
- SEO: 100
这就是选择正确工具的力量——不需要额外优化，开箱即满分。
总结
对于个人网站和博客，Astro + Cloudflare Pages 是一个近乎完美的组合。如果你也在纠结技术选型，希望这篇文章能给你一些参考。
最好的技术选型不是选最强的，而是选最合适的。