【旧】欢迎来到 Azuxa's BlogWorld
欢迎来到我的博客！这是我的第一篇文章，介绍了博客的基本情况。
· 更新于 2024/1/15 | 关于这个网站
你好，这是我的个人博客网站，也是探索技术的试验之地。我会在这里分享见解、记录想法。无论你是从哪里跳转到到本站，欢迎你的来访。
Q: 这个博客和其他的有什么不同？
A: 最大的不同在于，这是完全由我自己设计和开发的。从界面设计到功能实现，从数据库设计到用户体验，每一个细节都经过仔细考虑。它不仅是一个内容发布平台，也是我技术能力的展示窗口。
这个网站采用了现代化的全栈架构，前后端都在同一个项目中，保证了数据的一致性和开发的高效性的同时也兼顾安全性。
Q: 为什么不使用博客框架而是自己设计？
A: 开始这个项目之前，我曾使用 Hexo 框架搭建了自己的第一个博客站，然后挂在了 Github Page 上。使用这个框架搭建博客的确非常快，文章系统易用的同时还容易部署、0 成本；但实际使用时的问题也很明显：网站的定制化非常困难，我需要参考官方的文档，通过 yml 文件来配置网站。（图为先前的 Hexo 博客）
在一个晚上的尝试后，我放弃了 Hexo 框架，也不打算尝试使用其他博客框架，而是准备自己设计一个所有组件乃至每一个像素都能被我完全掌控的网站。作为一个前端方向的开发者，我想我可能需要的不只是一个分享技术的博客网站，还有一个可以让我随意实验的项目（上至整体项目的部署、下至各种前端组件的实现）
技术栈的选择
在搭建这个博客的过程中，我选择了一些我认为最适合的技术方案。
前端框架：Next. js 与 React
网站的前端部分使用了 Next. js 16 和 React 19。Next. js 是一个基于 React 的全栈框架，它让我能够在一个项目中同时处理前端展示和后端逻辑，大大简化了开发流程。React 19 则带来了更好的性能和开发体验，让界面响应更加流畅。
Q: 为什么选择 Next. js 而不是其他框架？
A: Next. js 最大的优势在于它的全栈能力。我不需要单独搭建一个后端服务，所有的 API 路由都可以在同一个项目中处理。这样不仅减少了部署的复杂度，也让数据传递更加直接高效。同时，Next. js 的服务端渲染能力也让网站的首次加载速度更快，对搜索引擎也更友好。(但以上这些并不是主要原因，真正的原因是 Vercal 支持 Next. js 项目的一键部署)
类型安全：TypeScript
整个项目都使用 TypeScript 编写。其好处是显而易见的：更少的 bug、更好的代码提示、更容易的团队协作（虽然没有团队）。和过于自由的 JS 相比，使用 TS 有明显安心感。
样式方案：TailwindCSS
界面样式使用了 TailwindCSS 4，这是一个原子化的 CSS 框架。刚开始使用 TailwindCSS 开发时会觉得非常不习惯，但随着项目的进行确实能体会到其便利指出：不用再照着 className 查找 CSS 类了，这一点真的非常爽。
数据库：SQLite 与 LibSQL
数据存储方面，我选择了 SQLite 作为本地数据库，同时也支持 LibSQL（Turso）云数据库。SQLite 是一个轻量级的数据库，对于个人博客来说完全够用，而且部署简单，不需要单独的数据库服务。当需要扩展到云端时，LibSQL 提供了无缝的迁移方案。
Q: 为什么不使用 MySQL 或 PostgreSQL？
A: 对于个人博客这种规模的项目，SQLite 已经足够强大。它不需要单独的数据库服务器，数据文件可以直接放在项目中，备份和迁移都非常方便。而且 SQLite 的性能对于博客这种读多写少的场景来说，完全能够满足需求。如果未来需要更强的扩展能力，也可以无缝迁移到 LibSQL 云数据库。
数据访问：Drizzle ORM
为了更方便地操作数据库，我使用了 Drizzle ORM。这是一个类型安全的 ORM 工具，它能够让我用 TypeScript 的方式操作数据库，同时保证类型安全。这意味着我在编写数据库查询时，IDE 能够提供完整的代码提示，减少出错的可能性。
认证系统：JWT
管理后台使用了 JWT（JSON Web Token）进行身份认证。这是一个无状态的认证方案，不需要在服务器端存储会话信息，让系统更加轻量和可扩展。密码使用 bcrypt 进行加密存储，确保安全性。
功能模块
文章系统
这是博客的核心功能。文章支持分类和标签管理，方便内容的组织和检索。每篇文章都有独立的详情页，支持 Markdown 渲染、代码高亮、阅读时间估算等功能。文章列表页支持分类筛选、搜索、排序和分页，让读者能够快速找到感兴趣的内容。
Q: 文章是怎么存储的？
A: 所有文章都存储在 Turso 云数据库中，包括文章内容、元数据、分类和标签信息。这种方案的好处是查询速度快，管理方便，而且不需要处理文件系统的权限问题。
Q: 文章数据是怎么操作的？
A: 前台页面中，文章数据通过 storage 方法直接从数据库中获取，再通服务器端渲染后传送到客户端。这是因为系统设计中游客浏览文章是不需要登陆的，该操作无需 Auth 验证，同时 SSR 保证了操作数据库的 js 代码不会泄露。绕开 API 可以提升文章的加载速度。
而在管理端页面中，由于必须保证请求者是站长本人，采用 API+JWT 认证的方式向自身同域的端点发送请求。
管理后台
为了方便管理内容，我搭建了一个完整的管理后台。后台使用 JWT 认证保护，只有登录后才能访问。后台包含了以下功能：
- 仪表盘：展示网站的数据统计，包括文章数量、阅读量、分类分布等，通过图表直观展示
- 内容管理：可以创建、编辑、删除文章、分类和标签，支持完整的 CRUD 操作
- Markdown 编辑器：支持写作、预览、并排三种模式，实时预览功能让写作更加高效
- 图库管理：可以上传、预览、删除图片，支持本地存储和云存储两种方案
- 系统设置：可以配置网站的基本信息和其他设置
这里有一些后台的界面截图 (当然，数据暂时还是假的)
图片管理
本系统采用 Vercal Blob 作为对象存储容器，上传的图片会被添加到项目关联的库中，以实现等效图床的功能。
开发理念
在开发这个博客的过程中，我始终坚持几个原则：
简洁：界面设计追求简洁美观，但功能要完整实用。
性能优先：无论是代码优化还是资源加载，都优先考虑性能。使用 Next. js 的服务端渲染、图片优化、代码分割等技术，确保网站加载速度快、运行流畅。
类型安全：全面使用 TypeScript，通过类型检查减少 bug，提高代码质量。虽然开发时可能会多写一些类型定义，但长期来看，这能大大减少维护成本。
易于维护：代码结构清晰，注释完善，让未来的自己（或其他人）能够快速理解和修改代码。
关于我
你好，我是 Azuxa616，这个博客的创建者和维护者。
我是一名前端开发者，对 Web 开发有着浓厚的兴趣。这个博客项目不仅是我技术能力的展示，也是我学习和成长的记录。在这里，我会分享技术心得、项目经验，偶尔也会写一些生活感悟。
如果你对我的项目感兴趣，或者想要交流技术问题，欢迎通过以下方式联系我：
- 邮箱： 2226123739@qq.com
- GitHub：https://github.com/Azuxa616
- Gitee：https://gitee.com/Azuxa616
Q: 为什么文章的部分地方显示了 MD 语法？
A: 这是应为系统的 Markdown 渲染器没有正确识别这个语法，或者是缺失这个语法的规则。这个项目正在持续完善中，计划还原 Obsidian 风格的完整 MD 语法，类似的错误会越来越少
Q: 这个博客会持续更新吗？
A: 当然会！这个博客对我来说不仅仅是一个项目，更是我记录和分享的平台。我会在这里分享技术见解和开发日志。
Q: 我可以参考这个项目的代码吗？
A: 欢迎！这个项目全部代码都是开源的，并且你可以在 GitHub 上找到完整的源代码。如果你觉得有用，欢迎 Star 或 Fork。如果你在使用过程中遇到问题，或者有改进建议，也欢迎提交 Issue 或 Pull Request。
写在最后
感谢你花时间阅读这篇文章，了解这个博客的技术栈和功能。如果你对某个技术细节感兴趣，或者想要讨论某个功能的实现方式，欢迎随时联系我。
这个博客还在不断完善中，如果你有任何建议或意见，都非常欢迎。希望你能在这里找到有价值的内容，也希望这个博客能够成为我们交流的桥梁。
那么，再次欢迎来到 Azuxa’s BlogWorld，祝你浏览愉快！