让2015年的MacBook Pro重获新生：AI辅助博客开发全记录

前言

今天，我想和大家分享一个特殊的经历：使用AI工具，在一台已经服役近10年的MacBook Pro上，从零开始搭建了一个个人博客网站。这个过程充满挑战，但也让我深刻体会到AI工具如何让"老旧设备"焕发新生。

故事的开始：LookWord Troupe

事情是这样的，我一直想创建一个个人博客，用来记录：

• 使用AI工具的心得
• 对人生的见解
• 对时事的看法

我给这个博客起了个名字叫 LookWord Troupe，希望它能成为一个温暖的文字空间。

技术选型

在开始之前，我需要选择合适的技术栈。经过和AI助手的讨论，我选择了：

• 框架: Next.js 16 (App Router)
• 语言: TypeScript
• 样式: Tailwind CSS
• 风格: 温暖人文风格（琥珀色/橙色渐变）

为什么选择Next.js？因为它现代、快速、SEO友好，非常适合内容型网站。

第一个挑战：Node.js版本问题

当我满怀期待地运行 npm run dev 时，遇到了第一个拦路虎：

You are using Node.js 16.20.2. For Next.js, Node.js version ">=20.9.0" is required.

我的MacBook Pro是2015年的，系统比较老旧自带的Node.js版本是16.20.2，但Next.js 16需要20.9.0以上的版本。

解决方案：手动安装Node.js

AI助手帮我想了一个办法：手动下载并安装Node.js 20.18.0到用户目录。

# 下载Node.js二进制文件
cd ~ && curl -O https://nodejs.org/dist/v20.18.0/node-v20.18.0-darwin-x64.tar.gz

# 解压到用户目录
mkdir -p ~/nodejs
tar -xzf ~/node-v20.18.0-darwin-x64.tar.gz -C ~/nodejs --strip-components=1

# 验证安装
~/nodejs/bin/node -v

现在，新版本的Node.js安装在了 ~/nodejs/bin/node，而不影响系统原有的Node.js。

第二个挑战：Tailwind CSS v4兼容性问题

解决了Node.js问题后，项目终于可以启动了。但当我打开浏览器时，又遇到了新的错误：

Error: Cannot find native binding
npm has a bug related to optional dependencies
Please try `npm i` again after removing both package-lock.json and node_modules directory.

原来是Tailwind CSS v4在macOS上存在兼容性问题，导致原生模块无法正常加载。

解决方案：降级到Tailwind CSS v3

AI助手建议我降级到更稳定的Tailwind CSS v3。步骤如下：

1. 更新 package.json

{
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "autoprefixer": "^10.0.0",
    "eslint": "^9",
    "eslint-config-next": "16.2.6",
    "postcss": "^8.0.0",
    "tailwindcss": "^3.4.0",
    "typescript": "^5"
  }
}

2. 创建 Tailwind v3 配置文件

// tailwind.config.js
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        amber: { /* 琥珀色配置 */ },
        orange: { /* 橙色配置 */ },
        yellow: { /* 黄色配置 */ },
      },
    },
  },
  plugins: [],
}

3. 创建 PostCSS 配置

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

4. 更新全局样式

/* app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

5. 重新安装依赖

# 删除旧的依赖
rm -rf node_modules package-lock.json .next

# 重新安装
npm install

项目结构

经过一番折腾，LookWord Troupe的项目结构终于成型：

lookword-troupe/
├── app/
│   ├── page.tsx              # 首页
│   ├── about/page.tsx        # 关于页面
│   ├── archive/page.tsx       # 归档页面
│   └── article/
│       └── [id]/page.tsx     # 文章详情页
├── components/
│   ├── Header.tsx            # 页头导航
│   ├── Footer.tsx            # 页脚
│   ├── ArticleCard.tsx       # 文章卡片
│   └── FeaturedArticle.tsx   # 精选文章
├── lib/
│   └── articles.ts           # 文章数据管理
└── public/
    └── images/               # 图片资源

运行项目

每次启动项目时，记得使用新安装的Node.js：

export PATH=~/nodejs/bin:$PATH
cd lookword-troupe
npm run dev

访问 http://localhost:3000 就能看到你的博客了！

感悟与收获

通过这次经历，我有了几点深刻体会：

1. AI工具让复杂问题变得简单

如果不是AI助手的帮助，我可能需要花费数小时甚至数天来解决这些配置问题。AI不仅告诉我答案，还解释了为什么会出问题。

2. 老旧设备依然有价值

2015年的MacBook Pro虽然"年事已高"，但通过合理的配置和优化，依然可以胜任现代Web开发工作。这让我重新审视了"设备寿命"这个概念。

3. 技术问题的解决思路很重要

遇到问题时，AI助手并没有直接帮我跳过问题，而是：

1. 诊断问题的根本原因
2. 提供多个解决方案
3. 解释每个方案的利弊
4. 让我理解为什么要这样做

这种解决问题的思路，对我今后遇到新问题很有帮助。

4. 选择稳定的技术版本

虽然总是想用最新版本，但有时候稳定性和兼容性更重要。Tailwind CSS v3虽然不是最新版，但它的稳定性让我省去了很多麻烦。

未来计划

LookWord Troupe博客已经成功运行，接下来我计划：

• 添加更多精彩文章
• 优化移动端体验
• 增加评论功能
• 探索更多AI工具的使用场景

总结

今天，我不仅创建了一个博客，更重要的是：

• 学会了如何解决Node.js版本冲突问题
• 掌握了Tailwind CSS的配置方法
• 体验了AI工具在实际项目中的巨大帮助
• 证明了老旧MacBook依然可以焕发新生

如果你也在使用老旧设备，不必急于换新。合理的配置和适当的工具，可以让你的设备继续发光发热。

---

如果你有任何问题或想法，欢迎在评论区留言交流！ 记住：工具只是手段，创造才是目的。