📚 SSGガイド プロジェクト

静的サイトジェネレーターの世界を学ぶための、体系的でモダンなドキュメント。最新の技術トレンドと実践法を解説します。

Chapter 1: 基礎知識と導入

SSGの基本概念と、本サイトを構築している Astro の魅力について学びます。

Chapter 2: 主要 SSG カタログ

目的や言語に合わせて、最適な静的サイトジェネレーターを選択するための徹底比較。

第2部の歩き方:なぜ多様な SSG を知る必要があるのか

「どれか一つ」ではなく「最適な一つ」を選ぶために。多様なエコシステムを知ることが、プロフェッショナルな判断力に繋がります。

#SSG#Strategy#Selection

Next.js:SSGとSSRを高度に融合させるハイブリッド型の王者

Reactエコシステムの中心に位置し、静的生成とサーバーサイド機能をシームレスに使い分ける次世代フレームワーク。

#React#Enterprise

Nuxt:Vueエコシステムの頂点に立つフルスタック・フレームワーク

Vue.js ユーザーにとってের究極の選択肢。直感的な開発体験と強力なモジュールエコシステムにより、迅速な開発を可能にします。

#Vue#TypeScript#Fullstack

SvelteKit:Webの標準に近い書き心地で、最高のパフォーマンスを

仮想DOMを使わない独自のコンパイル方式により、圧倒的な軽量さと滑らかな操作感を実現。モダンなユーザー体験を追求する開発者に。

#Svelte#Performance#Modern

Astro:コンテンツ中心サイト向けの新世代の覇者

「アイランドアーキテクチャ」により、必要な部分だけをJavaScript化する。現代のコンテンツ重視サイトにおける最も賢い選択です。

#Astro#Islands#Performance

Hugo:圧倒的ビルドスピードを誇る静的生成の重鎮

Go言語による驚異的な高速ビルド。数万ページ規模のサイトであっても数秒で生成し終える、スピードの絶対王者です。

#Go#Fast#Legacy-Speed

Eleventy:JavaScriptを使わずに究極のシンプルさを追求する

JavaScriptを一切配信しない『Zero-Bundle』を簡単に実現できるSSG。極限のパフォーマンスを求める技術ブログや個人サイトに最適です。

#JavaScript#Simple#Performance

Docusaurus:ドキュメントサイト構築のグローバルスタンダード

Meta(旧Facebook)製。多言語対応、検索、バージョン管理など、ドキュメントサイトに必須の機能がすべて詰まったオールインワン・ツール。

#React#Documentation#Meta

MkDocs:Pythonユーザーに愛されるMarkdown特化型SSG

Pythonで動作し、YAMLとMarkdownだけで完璧なドキュメントを作成可能。Material for MkDocs テーマによる圧倒的なUIが魅力です。

#Python#Markdown#Material

VitePress:Vueベースで構築する次世代最速ドキュメント・システム

Vue.js 開発チームが開発。Viteを基盤とした圧倒的なビルド速度と、SPAのような滑らかなページ遷移を両立させたSSGです。

#Vue#Vite#Performance

Chapter 3: 実践・高度な運用術

デプロイ自動化、独自ドメイン、SEO、計測環境など、プロフェッショナルな運用手法。

第3部の歩き方:プロフェッショナルの運用と成長

サイトを公開することはゴールではなく、改善の始まりです。自動化、SEO、そして読者との対話を通じてサイトを育てる手法を学びます。

#Operation#Optimization#Growth

実践:Bitbucket と Cloudflare Pages で作る自動デプロイ環境

Bitbucket Pipelines を活用して、Astro プロジェクトを Cloudflare Pages へ自動デプロイする具体的な手順を解説します。

#CI/CD#Bitbucket#Cloudflare

実践:独自ドメインの設定と Cloudflare DNS の活用

サイトのブランドを確立するための独自ドメイン設定。Cloudflare Pages ならではの簡単かつ強力なDNS管理術を解説します。

#Domain#DNS#Cloudflare

実践:SEO 最適化と圧倒的なパフォーマンスを実現する技術

SSGの最大の武器である「速度」を最大限に引き出す。2026年の検索エンジンに評価されるための、技術的SEOの核心に迫ります。

#SEO#Performance#Web-Vitals

実践:プロフェッショナルな計測環境(GA4 / GTM / GSC)の構築

サイトは公開してからが本番です。GTMによるタグ管理、GA4による分析、GSCによる検索状況把握の「3種の神器」をAstroに導入します。

#Analytics#GTM#SEO#Strategy

実践:Astro コンポーネントと MDX による表現力の拡張

単なるテキストを超えた体験を。記事内に動的なボタンやチャート、リッチなUIを直接埋め込む手法を解説します。

#Astro#MDX#Components