← 返回作品集
tech

个人博客

基于 Next.js 的静态博客

个人博客

项目背景

作为一名后端开发者，我一直想拥有一个个人网站来展示博客和项目，但由于缺乏前端开发经验，也不想投入时间学习复杂的 CSS 和 React 生态，一直未能落地。听说"AI 辅助编程"（Vibe Coding）很火，于是决定做一次尝试：完全依靠 AI 辅助，看看零前端经验的人是否也能做出一个现代化的个人网站。

整个过程中，我主要负责提出需求并描述想法，代码实现全部交给 Claude Code。这次实验也让我对 AI 编程的边界有了更直观的认识。（其实这篇文章也是AI生成的 ）

技术栈

核心框架

  • Next.js 15 - React 全栈框架，支持 App Router 和 ISR
  • React 19 - 最新的 React 版本
  • TypeScript - 类型安全，减少运行时错误

    • 样式与 UI

  • Tailwind CSS 4 - 原子化 CSS，不用写传统 CSS 文件
  • shadcn/ui - 现成的 UI 组件库（按钮、卡片等）

    • 数据与部署

  • Notion API - 作为 CMS（内容管理系统），在 Notion 里写文章自动同步到网站
  • Vercel - 一键部署，自动 SSL，全球 CDN

    • 功能特性

    内容管理

  • 博客文章在 Notion 里编写，网站自动同步更新
  • 支持代码块、图片、列表等富文本内容
  • ISR 增量静态再生：更新 Notion 后 1 小时内自动刷新网站

    • 页面结构

  • 首页：个人简介 + 最新文章 + 精选项目
  • 博客列表：卡片式布局，支持标签筛选
  • 文章详情：完整渲染 Notion 内容
  • 作品集：展示 GitHub 项目和个人作品
  • 关于页面：技能栈 + 联系方式

    • 响应式设计

  • 移动端、平板、桌面端自适应
  • 暗黑模式支持（可选）

    • 实现难点

    1. Notion 块渲染

    Notion API 返回的是"块"结构（paragraph、heading、code...），需要写一个解析器把这些块转换成 React 组件。起初我以为可以直接拿到 Markdown，后来才发现需要自行实现映射逻辑。

    2. ISR 缓存策略

    需要在更新频率和页面加载速度之间做权衡：

  • 博客列表 1 小时刷新（可能有新文章）
  • 首页 24 小时刷新（内容相对固定）

    • 3. Vibe Coding 的边界

  • ✅ AI 擅长：组件结构、API 调用、Tailwind 样式
  • ⚠️  需要人工：UI 微调、整体视觉风格把控、需求描述的精确性

    • 代码仓库

    🔗 GitHub: https://github.com/yuanmenglong-cn/my-website

    经验总结

  • Vibe Coding 可行 - 对于这类标准 CRUD 项目，AI 可以完成 80% 以上的代码工作
  • 需求描述是关键 - 越清晰的 Prompt，生成的代码越符合预期
  • 仍需基础理解 - 虽然不用写代码，但需要理解 Next.js 的基本概念（ISR、App Router）才能有效提问

    • 下一步计划：尝试接入评论系统（Giscus）和 Newsletter 订阅功能。