Suzu - 日本語の「鈴(すず)」を意味し、Next.js と純粋な Markdown を基盤としたミニマリストブログテンプレートです。
- ドキュメント 📚 Suzu Blog の開始、設定、カスタマイズ方法を詳細に説明。
- Next.js: モダンな Web フレームワークで、サーバーサイドレンダリング(SSR)と静的サイト生成(SSG)をサポート。
- 超高速: 洗練されたデザインで、高パフォーマンスを実現。
- Markdown 対応: 記事作成がシンプルで、以下の機能を提供:
- コードハイライト: 言語タグやワンクリックコピー機能をサポート。
- LaTeX: 美しい数式レンダリング。
- 画像最適化: Next.js による効率的な画像読み込み。
- リンク事前読み込み: スムーズなナビゲーションを実現。
- SEO 最適化: sitemap.xml、robots.txt、manifest.json、Open Graph、Twitter Cards などを自動生成。
- 多言語サポート: 英語、中国語、日本語などに対応。
config.yml
の設定に基づいて自動切替。 - ライト/ダークテーマ対応: システム設定に基づき、自動的にダークモードを適用。
- RSS フィード: ブログ用の RSS フィードを自動生成。
- アクセシビリティ(A11Y)対応:
- セマンティック HTML や ARIA 準拠のコンポーネントを提供。
- すべての画像とアイコンに alt 属性を追加。
- WCAG 基準に準拠した色彩コントラストで可読性を向上。
Use this template
ボタンをクリックして、独自のブログリポジトリを作成。
config.yml
を編集し、サイト名、説明、著者情報などを設定。
- Markdown 形式の記事を
posts
フォルダに配置します。ファイル名が URL になります。 posts/_pages
ディレクトリ内のファイルを編集して、「About」や「Friends」ページを更新。
-
クラウドホスティング(推奨): Vercel を使用します。プロジェクトをインポートするだけで自動デプロイが完了。
-
ローカルデプロイ/プレビュー:
Node.js
をインストールして、以下のコマンドを実行:pnpm install pnpm dev
デフォルトで GitHub Actions を使用して、Suzu Blog テンプレートの最新更新を毎週自動でリポジトリに同期。
同期時に .github
、public
、posts
、config.yml
は無視されます。
.
├── config.yml # グローバル設定ファイル
├── posts # Markdown 記事ディレクトリ
│ └── _pages # 固定ページ(About/Friends)
├── public # 静的リソースディレクトリ
│ └── images # 画像リソース
├── src # プロジェクトソースコード
│ ├── app # Next.js ページディレクトリ
│ ├── components # 再利用可能なコンポーネント
│ ├── services # コンテンツ解析、設定処理などのロジック
│ └── types.d.ts # グローバル型定義
├── tailwind.config.ts # Tailwind CSS 設定
├── package.json # プロジェクト依存関係とスクリプト
└── pnpm-lock.yaml # pnpm 依存関係ロックファイル
WordPress のメンテナンスコスト、安全性、性能問題に悩まされてきた結果、Next.js を使用して Suzu Blog を作成しました。このテンプレートはシンプルで効率的、かつカスタマイズ性が高く、現代的なブログを迅速に構築したい人に最適です。
貢献: 貢献を歓迎します!詳しくは Contribution Guide を参照してください。