1. 为什么想做个人博客

• 完全免费，薅互联网大厂的羊毛，不用花一分钱即可上线一款网站应用
• 个人品牌，记录真实生活片段，分享技术心得，作为求职的重要背书
• 技术实践，全栈开发，自由设计，无拘无束

2. 技术选型

• 编辑器：Cursor、VSCode
• 前端：Next.js、Responsive Design、Internationalization、Tailwind CSS、Shadcn UI、Zustand
• 后端：Next.js API Routes、GraphQL
• 数据库：PostgreSQL、Prisma
• 部署：Vercel
• 存储: AWS S3
• 登录: Auth0

3. 创建项目

• 前端项目初始化

npx create-next-app@latest my-blog

用最新的Next.js创建应用，选择typescript、eslint、tailwind css、app router、src/app目录结构。

• Pnpm 配置

// .npmrc
registry="https://registry.yarnpkg.com/"

使用Pnpm安装依赖，节省磁盘空间，配置npm源，使用yarn的源，解决npm源被墙的问题。

• 配置编辑器

// .VSCode settings.json
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": "explicit",
},
"[typescript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},

编辑器设置保存自动使用Prettier格式化代码，使用ESLint检查代码。

• Prettier 配置

// prettier.config.js
module.exports = {
  plugins: ['prettier-plugin-tailwindcss'],
  semi: false,
  singleQuote: true,
  'prettier.printWidth': 120,
}
// .eslintrc.json
{
  "extends": ["next/core-web-vitals", "prettier"],
}

Prettier 配置，使用Tailwind CSS插件，可以自动调整样式顺序，使用单引号，120字符换行，不需要分号。

ESLint 配置，使用Next.js核心规则，使用Prettier规则。

• 启动项目

pnpm i
pnpm dev

完成以上配置，即可开始开发，访问 http://localhost:3000 即可看到效果。