构建全栈博客之一 : 技术选型

引言

欢迎来到我的新博客！之前我使用 Hexo 搭建了一个静态博客，但随着需求的变化，它逐渐显得有些力不从心。于是，我决定从头开始，搭建一个全新的全栈博客。这不仅是一次技术上的挑战，也是我总结过去经验、探索新技术的机会。

在这次重写中，我的目标是解决之前遇到的痛点，同时加入一些新功能，让博客更高效、更现代化。以下是我希望实现的几个核心目标：

1. 随时随地写作：摆脱全量构建的限制，无论身处何地都能记录灵感。
2. 数据完全自主：将所有数据存储在数据库中，确保可迁移性和完全控制权。
3. 实时更新：文章发布后能立刻生效，同时保持高性能和 SEO 优化。
4. 灵活定制：支持国际化，并集成 AI 工具，尤其是在管理后台。
5. 完整技术实践：从前端到后端再到服务器部署，涵盖整个开发流程。
6. 前后端分离：实现前端、管理后台和后端的独立开发和部署。

为什么重写博客？

静态博客确实简单易用，但随着需求的升级，它的局限性也逐渐显现。以下是我选择重写的几个主要原因：

1. 性能与用户体验
   静态博客在更新频率高或内容量大时，构建过程变得非常耗时。而动态博客支持实时更新，可以显著提升用户体验。

2. 功能扩展的灵活性
   动态博客在扩展功能方面几乎没有限制，可以自由实现各种新特性。

3. SEO 优势
   动态博客天然支持实时更新内容、动态生成站点地图等，有助于搜索引擎快速抓取最新内容。

4. 高度自定义
   动态架构可以灵活地满足国际化、多语言支持，以及未来可能集成的 AI 功能需求。

技术栈选择

在此次项目中，我选择了 Next.js 和 Go 分别作为前端和后端的核心技术。同时，为了简化管理后台的开发，我使用了 React 和 Ant Design (AntD)。以下是详细的技术栈分析：

为什么选择 Next.js？

Next.js 是一个基于 React 的框架，拥有强大的生态系统和现代化的功能。以下是它的几个关键优势：

1. 服务端渲染 (SSR) 和静态生成 (SSG)

   • SSR：通过在服务端生成 HTML，显著提升首屏加载速度和 SEO 表现。
   • SSG：适用于不常更新的页面，构建时生成静态页面，提供更快的访问体验。

2. React 生态支持

   • React 的组件化开发方式提高了代码的复用性和可维护性，非常适合构建复杂的界面。
   • 丰富的社区资源让开发变得更加高效。

3. 工具与插件丰富

   • Next.js 内置了多种工具和插件，比如路由管理、数据获取等，大幅简化开发流程。
   • 支持国际化，便于实现多语言功能。

为什么选择 Go？

Go 是一门专注于性能和简洁的编程语言，非常适合作为后端服务的技术选择：

1. 高性能与高并发
   Go 的 goroutine 和轻量级线程模型让它在处理大量并发请求时表现卓越。

2. 简洁的语法与强大的标准库
   Go 的语法简单明了，易于学习。它的标准库几乎覆盖了开发中常用的功能，大大减少了对第三方依赖的需求。

3. 跨平台与低运维成本
   Go 编译后生成的二进制文件体积小、运行高效，可以轻松部署到不同平台，无需复杂的运行环境。

4. 社区活跃与生态完善
   Go 的社区非常活跃，有丰富的第三方库和工具支持，开发效率高。

管理后台的前端：React + Ant Design

为了高效地管理博客数据，我为项目增加了一个管理后台。这个后台采用 React 和 Ant Design (AntD) 构建，具备以下功能和特点：

1. 快速构建 UI

   • Ant Design 提供了一整套丰富的 UI 组件，能快速构建出美观一致的用户界面。
   • 组件覆盖了表单、表格、弹窗等常见的后台管理需求，减少了手动设计的时间。

2. 简化 CRUD 操作

   • 管理后台主要用于对博客数据的增删改查操作，通过 Ant Design 的表单和表格组件，能够快速实现这些功能。

3. 与后端的无缝对接

   • React 的灵活性和 Ant Design 的易用性，让开发者可以专注于业务逻辑，轻松与后端 API 交互。

4. 高扩展性

   • 无论是未来的权限管理，还是数据统计功能，React 和 AntD 都能轻松支持这些扩展需求。

通过这种设计，管理后台不仅开发高效，还具有很强的可维护性，为博客的长期发展打下了坚实基础。

为什么不直接用 Next.js 编写后端？

尽管 Next.js 也支持后端开发，但它并不是专为高性能后端设计的。选择 Go 作为后端是基于以下考量：

1. 更专注的角色分工

   • Next.js 负责前端渲染和用户交互，最大化其服务端渲染的优势。
   • Go 则专注于高性能后端 API 的处理和业务逻辑。

2. 性能需求

   • 对于需要快速响应和低资源占用的后端服务，Go 是更好的选择。

3. 灵活的部署

   • Go 编译后的程序无需依赖复杂的运行环境，部署效率高且体积小。

为什么选择自建 VPS 而不是使用 Vercel？

尽管 Vercel 提供了便捷的部署服务，但我选择自建 VPS，主要是为了掌控更多细节并学习更多技术。以下是对比：

参考

以下是使用的技术栈及其官方网址：

• Next.js 官方网站: https://nextjs.org
• shadcn/ui 官方网站：https://ui.shadcn.com
• React 官方网站: https://react.dev
• Go 官方网站: https://golang.org
• PostgreSQL 官方网站: https://www.postgresql.org
• Ant Design 官方网站: https://ant.design
• Tailwind CSS 官方网站: https://tailwindcss.com
• Gin 官方网站: https://gin-gonic.com
• Gorm 官方网站：https://gorm.io