Next.js搭建博客网站手记（一）

手把手教你搭建个人博客网站——博客的技术选项、主题选择以及项目启动流程。

中文简体

引言

作为一名前端开发者，我始终相信“实践是最好的学习方式”。在查看了无数教程和开源项目后，我决定将自己的技术思考沉淀下来——于是我的个人博客诞生了。本文将分享我的建站历程，涵盖技术选型的纠结时刻、主题定制的设计哲学以及那些只有亲自踩坑才能领悟的实战经验。

一、为什么选择建立个人博客？

1.1 技术人的「数字名片」

在行业不景气的今天，一个精心设计的个人博客能立体化展示技术能力。通过亲手搭建的博客：

  • 用博客文章证明深度思考能力

  • 用真实案例证明项目编码能力

  • 用技术探索证明事物学习能力

  • 用故障排除证明问题解决能力

1.2 知识管理的「复利效应」

将开发经验系统化沉淀为技术博客，构建可检索的知识库，让个人复盘与团队协作都能高效复用解决方案。这种「穿越时空的协作」让我意识到：

  • 技术博客是个人成长的数字快照

  • 公开写作倒逼知识体系化

  • 读者的反馈常带来意外启发

1.3 技术视野的「破界窗口」

维护博客的过程，本质上是一次技术认知的越狱行动。当聚焦于解决具体问题时，我不得不突破前端开发的舒适区，在多个领域完成认知升级：

  • 设计领域：从「能用就行」到视觉工程学

  • 运维领域：从「部署小白」到流水线架构

  • 产品思维：从「功能实现」到数据驱动

二、技术选型：为什么是 Next.js？

2.1 框架竞技场

在技术选型初期，我针对国内开发者生态和实际开发体验，对主流框架进行了多维度对比。以下是详细分析表：

框架优点缺点
Hexo- 中文教程全面
- 主题市场丰富
- 零配置快速上手		- 动态功能扩展困难
- 社区活跃度较低
VuePress- Vue 技术栈专属优化
- 默认主题强SEO
- 插件开发友好		- 仅适合文档类站点
- 社区迭代缓慢
Next.js- 混合渲染（SSG/SSR/ISR）自由切换
- Vercel 官方深度支持
- 无缝集成 React 18 新特性		- 中文社区活跃度较低
- 深度实践文章较少
- 错误排查依赖英文资源
Nuxt.js- Vue 版的 Next.js
模块化设计清晰		- 国内企业采用率低
- 中文问答资源陈旧
Gatsby- 插件化内容生态成熟
GraphQL 数据层统一管理		- 构建速度在大型站点较慢
- 中文社区近乎停滞（2022年后）

2.2 决策时刻

当需要同时实现：

  • Markdown 的极简写作流

  • 动态路由实现技术标签分类

  • 按需预渲染提升 SEO

  • 无缝集成 API 路由

Next.js 的混合渲染模式成为最优解。特别是 Incremental Static Regeneration (ISR) 功能，让数千篇技术文章也能保持毫秒级加载。

对于想深入 Next.js 的国内开发者，推荐以下资源：

2.3 关键技术栈

  • 内容层：MDX + gray-matter（支持 React 组件嵌入技术文章）

  • 样式层：Tailwind CSS + CSS Modules（原子化与组件化样式并存）

  • 部署层：Vercel Edge Network（全球 CDN 自动生效）

三、主题选择：enjidev 的极简力量

在选择主题时，我浏览了众多的主题模板网站，而且陷入了一种选择困境——那些华丽动效的主题让博客像过度设计的展厅，而极简风格的作品又往往简陋如记事本。

直到遇见 enjidev，它极简的设计击中了我的内心，让我理解了技术博客最本质的需求：让内容成为绝对主角。

3.1 内容至上的设计逻辑

  • 零视觉干扰：清晰的层级划分引导读者专注文字

  • 智能空间管理：留白与密度的平衡让长文阅读更流畅

  • 功能性交互：目录锚点定位、代码复制等操作无缝融入阅读流

3.2 开发者友好的工程实践

  • 暗色模式默认适配 IDE 视觉习惯，降低夜间码字疲劳

  • 响应式布局优先保障代码块、图表等专业内容的展示

  • 内置性能优化策略，页面加载速度稳定在 1s 内

3.3 极简驱动的创作觉醒

使用后显著改变创作模式：

  • 写作时自发剔除冗余描述，逻辑密度提升

  • 主题轻量化使博客维护成本大幅降低

四、enjidev项目启动

为了顺利开始，我推荐先 安装 pnpm，因为这是本仓库使用的包管理器。具体项目运行如下：

4.1 fork仓库并克隆到本地

enjidev源代码仓

git clone <your-fork>

因fork的enjidev源代码仓是public的，所以我们fork下来的仓库是无法改为private的。而我们需要提交一些涉及隐私相关的代码，比如后续操作4.4中的数据库链接，为防止泄密，建议再新建一个私有代码仓并且将我们fork下来的仓库设置上游仓库（方便同步更新代码）。这样的话，我们就可以将不涉及隐私的代码同步提交两个代码仓，而涉及隐私相关的代码仅提交到私有代码仓。

4.2 进入项目根目录

cd ./enji.dev

4.3 复制环境配置文件（开发版）

cp ./apps/enji.dev/env.example ./apps/enji.dev/env.local

4.4 配置环境变量

打开生成的 env.local 文件，填入以下关键信息：

DATABASE_URL = 你的数据库连接字符串
SALT_IP_ADDRESS = 自定义加密盐值
Terminal
UTF-8

🔑 DATABASE_URL：推荐使用MongoDB免费版，创建数据库后获取连接字符串

🔒 SALT_IP_ADDRESS：任意自定义密钥，用于哈希加密用户IP地址

4.5 安装依赖（确保位于项目根目录）

pnpm install

4.6 部分依赖手动打包

因项目的部分依赖下载到pacages目录而非node_modules中，比如：

  // enji.dev\apps\enji.dev\package.json
  "rehype-plugins": "workspace:*",
  "remark-plugins": "workspace:*",
JSON
UTF-8

故需要进行手动打包，找到packages文件夹，分别进入rehype-plugins和remark-plugins目录，执行打包指令：

pnpm build

如果不打包依赖直接运行项目，会报如下错误：

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'E:\WorkSpace\enji.dev\apps\enji.dev\node_modules\rehype-plugins\' imported from E:\WorkSpace\enji.dev\apps\enji.dev\next.config.mjs

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'E:\WorkSpace\enji.dev\apps\enji.dev\node_modules\remark-plugins\' imported from E:\WorkSpace\enji.dev\apps\enji.dev\next.config.mjs
Terminal
UTF-8

4.7 启动开发服务器

pnpm dev

🎉 完成！现在可以通过浏览器访问运行中的项目并且开始定制自己的需求了。

文章分类：教程
文章标签：
#博客搭建#Next.js
0
0
0
0