📝 はじめに
この記事では、このサイトの構成について紹介します。
ざっくりいうと、Cloudflare Pages と microCMS を活用して無料でブログを構築しています。
JavaScript フレームワークとして Next.js を採用し、静的サイト生成（SSG）を活用することで、高速で SEO（まだ何も対策してない） に強いブログです！
📌 採用技術
今回のプロジェクトでは、以下の技術を採用しました。
技術 | 理由 |
|---|---|
Next.js | SSG/ISR に対応しており、高速なブログを構築できるため |
Tailwind CSS | シンプルかつモダンなデザインを実装しやすいため |
Cloudflare Pages | 無料でデプロイ＆CDN 配信できるため |
microCMS | ノーコードでブログ記事を管理できるため |
🚀 サイトの構成
1️⃣ トップページ（ブログ一覧）
/にアクセスすると、microCMS から取得した記事一覧が表示される- SSG（
getStaticProps）を活用して高速なページを提供 - Tailwind CSS でリッチなデザインを実装
2️⃣ 記事詳細ページ
/posts/[id]にアクセスすると、記事の詳細が表示されるgetStaticPathsで事前に記事のパスを生成し、SSG で静的ページを作成fallback: "blocking"により、新規記事は ISR で生成される
🎯 なぜこの構成を選んだのか？
✅ Cloudflare Pages を選んだ理由
- 無料プランでホスティング可能！
- CDN により爆速配信！
- GitHub 連携で簡単デプロイ！
✅ Next.js を選んだ理由
- SSG により静的サイトを高速配信！
- ISR により最新の記事も自動更新！
- React ベースなので拡張しやすい！
✅ microCMS を選んだ理由
- 無料で使えて API も簡単！
- 管理画面が直感的で使いやすい！
- 画像やリッチテキストも対応！
🔧 今後の改善ポイント
- 検索機能の追加 🔍
- カテゴリー・タグの導入 🏷
- ページネーションの実装 📄
- カスタムドメイン（aikopc.net）の追加 🌐
💡 まとめ
今回は Cloudflare Pages + microCMS + Next.js を活用し、無料で運営できるブログを構築しました！
SSG により爆速なページを提供しつつ、ISR を活用して新規記事も反映できる構成です。
今後も機能追加を行いながら、より使いやすいブログにしていきます！🚀
この記事はChatGPTで作成しました。
