SuzuBlog 介紹 - ZL Asica

SuzuBlog 是什麼？#

可以發現我的 ZLA 小站從之前的 WordPress 改成了現在全新的樣式，這個全新的樣式 / 博客系統就是 SuzuBlog。

SuzuBlog 是一個由我自己個人從 0 開發的基於 Next.js 的博客系統，它的名字來源於日語中的鈴鐺 Suzu。代表著清脆的聲音，也代表著我對這個博客系統的期望。

介紹#

為什麼要開發 SuzuBlog？#

之前使用的 WordPress 是基於 PHP+MySQL 的，是在幾年前基本上每個人都會選擇的博客系統。但是隨著時間的推移，我發現 WordPress 的一些問題：

性能問題：太慢，太慢，而且我也不是很擅長優化 WordPress 的性能。
安全問題：MySQL 資料庫的安全問題，WordPress 的安全問題，插件的安全問題。
不夠靈活：主題和插件雖然很多，但是我總是找不到一個滿足我需求的主題。
不夠簡潔：後台管理界面太複雜，我只是想寫一篇文章，為什麼要讓我看到那麼多東西？
不夠現代：前端界面雖然可以通過主題定制，但是總是感覺不夠現代。（比如我之前所使用的 Sakura 主題，感覺有非常多人在用，但主題本身已經沒有在繼續更新和維護了）

還有一點，WordPress 並非為 Serverless 環境設計，也就意味著你需要一台自己的運行了 LNMP 環境的伺服器，並且需要自己去維護這個伺服器。我在 15 年的時候維護的 AIFans 站點，也是採用的 WordPress，資料庫確實是被人攻破過，這並不是一個好的體驗。

SuzuBlog 的特點#

我不是很想在這篇文章中長篇大論的介紹 SuzuBlog 的特點，如果你對此很感興趣，可以查看我特地為 SuzuBlog 編寫的文檔站點 SuzuBlog Docs，或者直接查看 SuzuBlog 的 GitHub 倉庫 SuzuBlog。我在文檔站點中非常詳細的介紹了如何上手和如何使用 SuzuBlog，同樣的你若是對我的實現感興趣，也可以直接查看源碼。

簡單來說，SuzuBlog 是基於 Next.js 的博客系統。文章可以使用純 Markdown 編寫（這也是為了我自己可以一篇文章同時在多個平台一起發布的原因），當然更重要的是為了兼容 Hexo 同樣的 SEO 優化也是我進行了特定優化的一個部分，實現了完整的 robots.txt、sitemap.xml、manifest.json、LD-JSON 等等。會根據文章內容去動態生成對應的 SEO 信息。同樣的，我也構建了自動的 RSS 生成器，可以讓你的文章在發布的同時自動生成 RSS。

作為一個博客系統，而非一個主題 / CMS，為了更好的用戶體驗和自定義，我借鑒了 Hexo 中的 config.yml 的方法，將個性化配置選項放置在了這裡面，讓用戶可以輕鬆自定義去配置自己的博客系統。

選擇 SuzuBlog 的原因#

我覺得易上手是一個非常重要的特點

點擊 Use this template 按鈕，就可以直接創建一個屬於你自己的倉庫。
更改 config.yml 中的配置。
然後將你的文章放置在 posts 文件夾中。
最後只需要新建一個 vercel 賬戶，把 GitHub 倉庫綁定上去，就可以直接自動部署了。

就是這麼簡單，僅需 4 步，全程可能用不了 10 分鐘。無需配置伺服器、無需配置資料庫、無需安裝 nodejs，只需要一個 GitHub 和一個 Vercel 賬戶，就可以實現一個現代化、高性能、高安全性的博客搭建。

技術棧#

SuzuBlog 使用了以下技術棧：

Next.js：基於 React 的全棧框架，提供了 SSR、SSG、CSR 等多種渲染方式，可以輕鬆實現 SEO 優化。
TypeScript：我的所有源碼均使用 TS 編寫，沒有使用 JS 的地方（說實話我不是很喜歡用純 JS 寫項目）。
TailwindCSS：你所看到的所有樣式都是使用純 TailwindCSS 編寫的，沒有使用任何 CSS 預處理器 / 樣式框架，沒有 ShadCN、沒有 MUI、沒有 Antd。
gray-matter：一個用於解析 markdown front-matter 的庫，用於解析文章的 front-matter，和處理  標籤。
react-markdown：封裝了 remark 的專為 React 設計的 markdown 渲染器，用於個性化渲染 markdown。（因為你可以對其中每一種類型的標籤直接進行樣式定制）
rss：用於專門在 node 環境中生成 RSS，可以在這裡查看文檔 node-rss。

同時還有下面這些我自己常用的工具庫：

@zl-asica/react：我自己封裝的一些 React Hooks 和工具函數等等。可以在此查看文檔 @zl-asica/react。
@zl-asica/prettier-config: 我自己的 Prettier 配置，我有強迫症，代碼不整齊我寫不下去🥹，這裡是 npm 包可以直接使用 @zl-asica/prettier-config。
eslint-config-zl-asica: 我自己的 ESLint 配置，和上面一樣🥹，同樣也在 npm eslint-config-zl-asica。

樣式設計#

我設計的底層邏輯是遵循 aria 規範、WCAG 規範，同時需要對不同尺寸的設備友好（響應式設計）。但不對 IE 11 友好，抱歉我真做不到。遵循 User Center Design 設計理念，不僅讓博主 / 站長們能夠更加輕鬆的編寫文章，專注於自己的內容創作本身，也需要讓讀者 / 用戶能夠更加舒適、輕鬆、愉快的閱讀。

在設計過程中我借鑒了之前所使用的兩個主題中的部分設計邏輯，分別是 Sakura（也就是我之前所使用的 WordPress 主題，相信很多人也聽說過這個），和 hexo-theme-nexmoe（這個是我 Hexo 站點所使用的主題，我的 Hexo 站點並未關閉，但將會逐步遷移至此站點）。

遷移指南#

從 WordPress 遷移#

如果你之前在 WordPress 就是使用 markdown 進行的文章撰寫，那你只需要把文章拿過來，並且加上對應的 frontmatter 即可，就這麼簡單。

從 Hexo 遷移#

既然我說了無損兼容 Hexo，那就是簡單到，你只需要複製粘貼你的文章到 posts 文件夾內，就可以了。因為 SuzuBlog 的 frontmatter 格式設計和 Hexo 基本保持了一致。

從任何使用 Markdown 的博客系統遷移#

如果你的博客系統使用的是 Markdown，那麼你只需要把文章拿過來，並且加上對應的 frontmatter 即可，就這麼簡單。

結語#

SuzuBlog 是我為了解決自己的問題而開發的一個博客系統，我希望它能夠幫助到更多的人。如果你對 SuzuBlog 有任何問題或者建議，歡迎在 GitHub Issues 中提出，我會儘快回覆。