AI编程网站开发备忘录

开发环境

nodejs

nvm

serverless部署

本篇记录网站从本地开发到 Serverless 部署的完整备忘。适用于本项目（Next.js + TypeScript + Tailwind + shadcn/ui，包管理采用 pnpm）。

开发环境

Node.js 与包管理

• 建议使用 LTS 版本 Node.js（配合 nvm/nvm-windows 管理多版本）
• 本仓库使用 pnpm

nvm（Windows）

1. 安装 nvm-windows（从 https://github.com/coreybutler/nvm-window 下载）
2. 常用命令：
   • 查看版本：nvm list available
   • 安装版本：nvm install 22
   • 使用版本：nvm use 22
   • 查看已装：nvm list
3. 建议在项目根目录放置 .nvmrc，写入 Node 版本（例如 22.14.0）：

# 使用 .nvmrc 指定 Node 版本
nvm use

pnpm

• 安装：npm i -g pnpm
• 常用：
  • 安装依赖：pnpm i
  • 启动开发：pnpm dev
  • 构建产物：pnpm build
  • 生产运行：pnpm start

推荐 VS Code 插件

• ESLint、Prettier、Tailwind CSS IntelliSense、PostCSS Language Support、Markdown All in One

目录结构速览

• src/app：Next.js App Router 页面与布局
• src/components：通用组件与 UI 组件封装（含 ui/）
• src/blog：博客模块（文章、渲染工具、类型）
• public/：静态资源（图片、图标等）

写作指南（博客）

新建文章

在 src/blog/posts/ 新建 .md，参考本文前置字段：

---
title: "标题"
slug: "url-友好短链"
excerpt: "摘要"
author:
  name: "作者名"
  avatar: "/MRIwiki-Logo.jpeg"
  bio: "一句话简介"
publishedAt: "YYYY-MM-DD"
updatedAt: "YYYY-MM-DD"
tags: ["标签1", "标签2"]
category: "分类名称"
readTime: 5
featured: false
coverImage: "/路径/封面.jpeg"
---

字段说明：

• title：文章标题
• slug：用于生成路由 blog/[slug]
• excerpt：列表页摘要
• tags / category：用于标签页与分类页聚合
• readTime：阅读时长（分钟，手动估算）
• featured：是否在博客首页置顶/推荐
• coverImage：封面图，建议放在 public/ 下并用绝对路径引用

Markdown 约定

• 标题层级从 # 开始，最多到 ####
• 代码块使用三反引号并标注语言：

export function example() {
  return "ok";
}

• 图片：将文件放入 public/，使用绝对路径：![](/images/xxx.png)

本地运行与构建

# 安装依赖
pnpm i

# 本地开发
pnpm dev

# 生产构建
pnpm build

# 本地预览生产构建
pnpm start

默认开发地址：http://localhost:3000

配置与优化

• 全局样式：src/app/globals.css
• 站点布局与 Metadata：src/app/layout.tsx
• 导航与页脚：src/components/Navbar.tsx、src/components/Footer.tsx
• UI 组件：src/components/ui/*
• 性能建议：
  • 图片用 next/image 或优化尺寸/格式
  • 按需引入组件，减少首屏体积
  • 谨慎使用客户端组件，优先服务端组件

Serverless 部署

Vercel（推荐）

1. 将仓库推送至 GitHub
2. 打开 Vercel，新建项目，选择本仓库
3. 框架自动识别 Next.js，构建命令/输出目录保持默认
4. 环境变量（如需）在 Project Settings → Environment Variables 配置
5. 关联主分支，保存并部署。后续 push 自动触发预览/生产构建

其他平台（参考）

• Netlify：同样支持 Next.js 自动构建
• Cloudflare Pages：可选 Node 兼容运行时；如使用 Edge Function，请确认中间件兼容性

常见问题（FAQ）

• 构建失败（Node 版本问题）：使用 nvm use 与 .nvmrc 对齐版本
• 样式异常：确认 globals.css 与 tailwind.config.ts 是否生效，重启 dev 服务器
• 文章未显示：检查 frontmatter 是否完整、slug 是否与路由匹配

变更记录（本文）

• 2025-09-23：初稿与开发/部署备忘补全