BDBugDuo
← 返回技术分享

用 Next.js 静态导出 + 腾讯云 COS 部署个人站点

·
Next.js部署腾讯云

个人站点没必要养一台服务器。用 Next.js 静态导出把站点预渲染成纯 HTML，再丢到腾讯云 COS + CDN 上，就能获得：

  • 接近零的运维成本（COS 按量付费，个人站点通常几毛钱/月甚至免费额度内）；
  • 搜索引擎友好的完整 HTML 内容；
  • CDN 加速带来的稳定访问体验。

本文记录完整的搭建思路。

1. 静态导出配置

在 next.config.mjs 中开启静态导出，并生成干净目录结构：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true,
  images: { unoptimized: true },
}

export default nextConfig

trailingSlash: true 会让 /blog/hello 输出为 blog/hello/index.html，配合 COS 的静态网站托管可以直接按目录访问。

然后构建：

npm run build

产物在 out/ 目录里，全部是静态文件。

2. 上传到 COS

在腾讯云控制台创建一个存储桶，权限设为公有读私有写，开启静态网站托管，索引文档填 index.html，错误文档填 404.html。

用 coscmd 命令行工具上传：

pip install coscmd

coscmd config -a <SecretId> -s <SecretKey> \
  -b <bucket-name-appid> -r ap-guangzhou

coscmd upload -r ./out/ /

3. 绑定域名与 HTTPS

  1. 在 COS 的「域名与传输管理」中绑定自定义域名（或使用 CDN 加速域名）；
  2. 在腾讯云申请免费 SSL 证书并开启 HTTPS；
  3. 到 DNSPod 添加 CNAME 记录指向 CDN 提供的加速域名。

对于 bugduo.com 与 www.bugduo.com 可以各配一条解析，并设置强制跳转统一到主域名。

4. 缓存策略

HTML 文件建议不缓存或短缓存（保证更新及时生效），静态资源（JS/CSS/图片）可以设置较长缓存：

文件类型 建议缓存时间
*.html 不缓存或 60s
_next/static/* 30 天
图片 30 天

小结

静态导出的关键在于构建期预渲染：所有需要 SEO 的内容在构建时就写进了 HTML，既利于抓取，又让部署变得极其简单。个人技术站用这套方案非常合适。

提示：本文站点本身就用这套方案部署，相关配置可以在仓库源码里直接看到。