HOW - 从0到1搭建自己的博客站点（一）

从 0 到 1 搭建一个属于自己的博客站点是一个非常有成就感的项目。我们可以按以下几个阶段来一步步实现：

项目规划

明确你的需求

你需要先想清楚以下问题：

• 博客内容是否要支持Markdown格式？
• 是否需要后台管理界面？（发布文章、管理标签等）
• 是否需要支持评论系统？
• 是否打算上线部署？使用 Vercel、Netlify、或者自己的服务器？
• 是否希望博客具有响应式设计，适配移动端？

技术栈选择（推荐）

实战步骤

第一步：初始化项目

npx create-next-app@latest my-blog --typescript
cd my-blog
npm install

你可以选择添加 Tailwind：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

然后在 tailwind.config.js 和 globals.css 中做对应配置。

第二步：支持 Markdown 博客内容

使用 Markdown 文件作为内容来源是最简单的方式。

1. 创建 posts/ 文件夹，并放入 .md 文件
2. 使用 gray-matter 提取元数据
3. 使用 remark / next-mdx-remote 进行渲染

npm install gray-matter remark remark-html

第三步：博客页面开发

1. 创建首页 /pages/index.tsx：展示文章列表
2. 创建动态路由 /pages/posts/[slug].tsx：展示文章详情页

第四步：美化页面

使用 Tailwind 或者 UI 框架如 shadcn/ui 来构建响应式、优雅的页面。

第五步（可选）：后台管理

如果你希望可视化管理博客内容：

• 快速方案：使用 Notion + Vercel + Next.js
• 自建后台：用 Next.js API Routes + Prisma（数据库 ORM）+ Admin 面板（如 React + Ant Design）

第六步：评论系统接入

推荐 giscus：

1. 登录 GitHub 创建一个公开仓库
2. 前往 https://giscus.app/ 配置评论系统
3. 将其嵌入到你的博客文章详情页面中

第七步：部署上线

推荐使用 Vercel 部署：

# 注册登录后
npx vercel

你也可以绑定自定义域名（如 blog.yourdomain.com）