← 所有文章

我是怎么搭建我的博客网站的

技术栈选型和依赖包

为什么要搭博客

为什么要有自己的博客网站，很明显，他有我也要有。开个玩笑，不过确实是因为看到技术大牛都会有自己的博客网站，这也是自己技术实力的一种体现。向他们看齐，我当然也想开设自己的博客网站。

工作中一定会产生很多自己的思考和沉淀。自己平常会写很多笔记，博客网站就是经过自己笔记的汇总和提总。

技术栈选型

之前在data.ai(已被Sensor Tower收购)上班时，公司用的前端框架就是Next.js, 而在富途和店小秘的业务组都是主要用Vue。对React的理解使用在回国之后慢慢弱了一些，但是后来在进行面试准备的时候发现一线大厂更偏向React。所以为了保持对技术栈的熟悉，我决定自己的博客还是要用Next.js来写。

Agent搭建

Cursor是平常使用最多的工具，所以博客当然是通过Cursor来搭建的，

本来想过v0选一个好看点的主题，后来觉得还是一切从简，按需添置就好。

而且Cursor本身搭出来的网站我也足够满意了。

这是我的next.js博客项目，教教我怎么添加我的第一篇博客

在我输入上述命令后，Cursor直接搭出来一套完整的博客系统，共做了以下几件事：

1. 安装了 3 个依赖

  • gray-matter —— 解析 Markdown 文件顶部的 frontmatter（title、date 这些元数据）
  • remark + remark-html —— 把 Markdown 正文转成 HTML
  • @tailwindcss/typography —— 让 Markdown 渲染出来的 HTML 有好看的排版样式

2. 创建了第一篇文章 posts/hello-world.md

posts/
└── hello-world.md   ← 你以后每篇文章都放在这里

文件顶部是 frontmatter（--- 包裹的部分），定义标题、日期、描述；下面是正文 Markdown 内容。

3. 创建了 lib/posts.ts

两个工具函数：

  • getAllPosts() —— 读取 posts/ 目录下所有 .md 文件，解析 frontmatter，按日期倒序排列，用于列表页
  • getPostBySlug(slug) —— 根据文件名读取单篇文章，把 Markdown 转成 HTML，用于详情页

4. 新增了示列页面并改造首页

从原来的 Next.js 默认欢迎页，换成了展示最近 3 篇文章 + "全部文章 →" 链接的博客首页。

| 路由 | 文件 | 作用 |
|------|------|------|
| `/blog` | `app/blog/page.tsx` | 文章列表，展示所有文章 |
| `/blog/hello-world` | `app/blog/[slug]/page.tsx` | 文章详情，动态路由 |
|------|------|------|

5. 改造了首页 app/page.tsx

以后写新文章只需一步： 在 posts/ 目录下新建一个 .md 文件，按这个格式写 frontmatter，文章就自动出现了：

---
title: "文章标题"
date: "2026-03-18"
description: "一句话简介"
---

正文内容...

分析

依赖包很好用

但是列表渲染得不够好