SuzuBlog とは？#
私の ZLA 小站 が以前の WordPress から現在の新しいスタイルに変更されたことに気づくでしょう。この新しいスタイル / ブログシステムが SuzuBlog です。
SuzuBlog は、私自身がゼロから開発した 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 を解析し、
<!--more-->タグを処理します。 - 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 のデザイン理念に従い、ブロガーやサイト運営者が記事を書くのをより簡単にし、自分のコンテンツ制作に集中できるようにするだけでなく、読者やユーザーがより快適で、楽しく、リラックスして読めるようにする必要があります。
デザインプロセスでは、以前使用していた 2 つのテーマの一部のデザインロジックを参考にしました。それは Sakura（私が以前使用していた WordPress テーマで、多くの人が聞いたことがあると思います）と、hexo-theme-nexmoe（これは私の Hexo サイトで使用しているテーマで、私の Hexo サイトは閉じていませんが、徐々にこのサイトに移行する予定です）。
移行ガイド#
WordPress からの移行#
もしあなたが以前 WordPress で Markdown を使用して記事を書いていたなら、記事を持ってきて、対応する frontmatter を追加するだけで済みます。これだけ簡単です。
Hexo からの移行#
私が 無損互換 Hexo と言ったので、あなたは単に記事を posts フォルダーにコピー＆ペーストするだけで済みます。SuzuBlog の frontmatter フォーマットは Hexo と基本的に一致しています。
Markdown を使用している任意のブログシステムからの移行#
もしあなたのブログシステムが Markdown を使用しているなら、記事を持ってきて、対応する frontmatter を追加するだけで済みます。これだけ簡単です。
結論#
SuzuBlog は私が自分の問題を解決するために開発したブログシステムで、より多くの人々を助けることができることを願っています。もし SuzuBlog に関して何か質問や提案があれば、GitHub Issues でお知らせください。できるだけ早く返信いたします。