九十九Alan

文章归档

用 Next.js 搭一个可维护的静态博客

从 MDX 写作到 Cloudflare Pages 发布，记下静态部署的基本流程。

九十九

这篇示例文章记录一条静态部署流程。写好的 MDX 在构建阶段变成 HTML，Cloudflare Pages 负责托管，Pagefind 则为公开文章建立中文搜索索引。

准备项目

在 Next.js 配置中启用静态导出，保留稳定的文章路径。

import type { NextConfig } from 'next';
 
const config: NextConfig = {
  output: 'export',
  trailingSlash: true,
  images: { unoptimized: true },
};
 
export default config;

发布前检查

步骤命令检查结果
内容校验npm run validate:content日期、图片与元数据
静态构建npm run buildHTML、静态资源与搜索索引
浏览预览npm run preview文章、搜索、图库与 404

检查搜索

试着搜索「静态部署」，再试试技术名词 Next.js 或同时输入「Next.js 静态部署」。

检查搜索

构建后的索引只收录公开文章。再输入一个只存在于草稿里的词，确认搜索结果为空。

发布

确认预览后把变更推到生产分支。每次提交都对应一个可追溯的版本，可以在 GitHub 查看改动，也可以在 Pages 查看构建日志。