AI AI 工具指南
独立开发 / 建站指南

Vercel 是否适合内容站

Vercel 因 Next.js 出名，但做 Astro 内容站也很好。用这套 vercel.json 配置、图片设置和流量公式判断该不该选。

发布于: 作者: AI Productivity Guide Team 🌐 查看英文版本

Vercel 靠 Next.js 应用打出名气，让一些内容站作者以为给博客用是杀鸡用牛刀。不是的。Astro / Next.js 内容站在 Vercel 上能拿到快速 build、图片优化、preview deploy、分析，全零配置。真正的问题是规模化之后的流量费——下面有公式。

问题背景

纯静态内容站在 Vercel 上几乎不花算力——就是 CDN 发字节。但 Vercel 计费带观点：Hobby 流量大方但有上限，Pro 超出包含部分按 GB 收费。绝大多数独立内容站这数算下来没问题。月百万 PV 以上的站，Cloudflare Pages 或 Firebase Hosting 可能更便宜。

判断标准

  • 你在用 Astro / Next.js / 其它支持的框架做内容。
  • 月流量稳稳在包含额度内（Pro 是 1 TB）。
  • 你看重图片优化、ISR、按分支 preview deploy。
  • 你想一个面板看分析、部署、预览。
  • 你的站是商业站——挂广告或联盟（意味着 Hobby 不能用，必须 Pro）。

快速结论

2026 年 99% 的独立内容站，Vercel 是好选择。只有月流量稳定超 1 TB，或者技术栈已经在别处，才需要重新考虑。

开始前准备

  • 仓库在 GitHub / GitLab / Bitbucket，已绑定 Vercel team。
  • 生产域名准备好、DNS 有权限。
  • 知道 framework 的 build 命令和输出目录。

实操步骤

  1. 选 framework 并起项目。 纯内容选 Astro；要嵌入 React 应用选 Next.js。从零开始：
npm create astro@latest mysite -- --template blog
cd mysite
npm install @astrojs/sitemap
  1. 加一份最小 vercel.json 控制响应头、跳转、cleanUrls：
{
  "cleanUrls": true,
  "trailingSlash": true,
  "redirects": [
    { "source": "/blog/(.*)", "destination": "/articles/$1", "permanent": true }
  ],
  "headers": [
    {
      "source": "/_astro/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
      ]
    },
    {
      "source": "/(.*)\\.html",
      "headers": [
        { "key": "Cache-Control", "value": "public, max-age=300, s-maxage=3600" }
      ]
    }
  ]
}
  1. astro.config.mjs 里设主站：
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';
import vercel from '@astrojs/vercel/static';

export default defineConfig({
  site: 'https://yourdomain.com',
  trailingSlash: 'always',
  build: { format: 'directory' },
  output: 'static',
  adapter: vercel(),
  integrations: [sitemap()],
});
  1. 连仓库部署：
npm install -g vercel
vercel link
vercel --prod
# Production: https://yourdomain.vercel.app

Vercel 面板：Project → Domains → 加 yourdomain.com。按提示配 DNS（通常 CNAME www → cname.vercel-dns.com 和 A @ → 76.76.21.21）。

  1. 面板里开 Speed Insights 和 Web Analytics。 客户端 snippet 加进根 layout：
---
import SpeedInsights from '@vercel/speed-insights/astro';
import Analytics from '@vercel/analytics/astro';
---
<SpeedInsights />
<Analytics />
  1. 用内置图片优化。 Astro：
---
import { Image } from 'astro:assets';
import hero from '../assets/hero.jpg';
---
<Image src={hero} alt="hero" widths={[400, 800, 1200]} formats={['avif', 'webp']} />

Vercel 边缘自动产 AVIF/WebP。

  1. 大推之前估流量。 快速核算：
# 平均 HTML + 已缓存静态资源的单页重量
curl -sLI https://yourdomain.com/articles/some-slug/ \
  | grep -i content-length

# 项目总大小：
du -sh dist/
# (单页 KB * 月 PV) / 1024 / 1024 ≈ GB/月

10 万 PV/月的独立博客大约 5-30 GB——Hobby 也能装。500 万 PV/月大约 250 GB-1.5 TB，需要 Pro + 严格的图片管理。

  1. 主域提交 Search Console，全站 canonical 只指生产域，不能有 *.vercel.app：
grep -ROIE 'rel="canonical"|og:url' dist | grep -v yourdomain.com | head
# 有输出 = 漏

执行检查清单

  • vercel.json 显式控制缓存、跳转、cleanUrls。
  • astro.config.mjs 配好 site、trailingSlash、Vercel adapter。
  • Speed Insights 和 Web Analytics 在根 layout 里。
  • 图片流水线产出 AVIF/WebP 头图。
  • Search Console 验证生产域名，没有 *.vercel.app 漏出。

上线后验证

  • curl -sI https://yourdomain.com/_astro/index.abc.css | grep cache-control 显示 immutable。
  • Vercel Dashboard → Analytics 显示生产域流量，不是 preview。
  • Search Console → Pages → Indexed 在 4-8 周内增长。

容易踩的坑

  • 忘了 Hobby 不能商用——挂推广和广告都算。
  • 图片不优化，流量一涨就慌。
  • 能静态的内容用 Next.js SSR，多花算力没必要。
  • sitemap / canonical 里还留着 *.vercel.app。
  • 把 preview URL 当线上——默认 noindex，但容易因共享文档泄漏。
  • Vercel 开了 cleanUrls: true 但 framework 输出 about/index.html——导致跳转歧义。cleanUrls 与 framework 文件命名要一致。

FAQ

  • 静态 Astro 站需要 ISR 吗？: 不需要。纯静态 Astro 走 CDN。ISR 是给请求时才能拿到数据的页面用的。
  • 相比”真正”的 host，Vercel 影响 SEO 吗？: 不会。Vercel CDN 很快、Core Web Vitals 一般非常好、Google 不关心你用哪家 CDN。
  • Preview deploy 能给客户审稿用吗？: 可以。每个分支 / commit 都有独立 preview URL。客户项目建议用密码保护（Pro）。
  • 什么时候 Vercel 做内容会变贵？: 月流量稳定超 Pro 包含的 1 TB，按 GB 超额开始累积。多数独立站离这远。
  • Vercel CDN 比 Cloudflare 快吗？: 对大多数用户体感相当。差异在平台功能（preview deploy、图片优化），不在边缘原始速度。

相关阅读

标签: #独立开发 #Vercel #部署 / 托管 #SEO #对比

相关文章