爆速ブログの作り方全記録！ Astro・microCMS・Tailwind CSSでゼロから構築しよう

ウェブサイトを作るとき、WordPressをはじめとして選択肢は数多くあります。その中からAstro、microCMS、Tailwind CSSを選んだのには、明確な理由があります。この記事では、自身の学びの記録も兼ねて、これらのツールをゼロから使ってブログを構築するまでの全工程をまとめました。これからウェブ制作を始める方や、デザイナーからコーディングに挑戦したいと考えている方の参考になれば幸いです。

この組み合わせを選んだ3つの理由

1. ページの表示速度が段違いに速い

ブログの表示速度は、読者の体験だけでなく、Googleの検索順位にも直結する重要な要素です。Astroは「アイランドアーキテクチャ」という設計思想を採用しており、本当に必要なJavaScriptだけを読み込む仕組みになっています。そのため、ページの読み込みが非常に速く、検索エンジンからの評価も得やすくなります。

2. 開発も運用もシンプルに保てる

AstroはReactやVueといったUIフレームワークと組み合わせることもできますが、単体でもHTMLを拡張する感覚で記述できるため、学習コストが低く抑えられます。

コンテンツ管理に使うmicroCMSは、ブログサービスに近い直感的な操作感が特徴です。専門的な知識がなくても記事の更新ができるため、開発から日々の運用まで一人でこなしたい場合に適しています。

3. Tailwind CSSでデザイン作業を高速化できる

ゼロからCSSを書くと、デザインの調整だけで相当な時間がかかります。Tailwind CSSはHTMLに専用のユーティリティクラスを付与するだけでスタイリングが完結するため、デザインと実装を並行して進めるワークフローと非常に相性がよいです。

実際に作ってみる：環境構築から実装まで

ステップ1：環境構築

Node.jsをインストールする

まだインストールしていない場合は、Node.js公式サイトから最新のLTS版をダウンロードしてください。

Astroプロジェクトを作成する

npm create astro@latest

コマンドを実行すると対話形式でいくつかの質問が表示されます。以下を参考に回答してください。

Where would you like to create your new project?
→ プロジェクト名を入力（例：my-blog-site）

What framework would you like to use?
→ just astro を選択

Would you like to install npm dependencies?
→ yes

Tailwind CSSを導入する

Astroにはアドオンを追加するための専用コマンドが用意されています。プロジェクトのルートディレクトリで以下を実行してください。

npx astro add tailwind

このコマンドは、必要なパッケージのインストールに加え、tailwind.config.cjsやpostcss.config.cjsといった設定ファイルの自動生成まで行ってくれます。

microCMSのライブラリをインストールする

npm install microcms-js-sdk

これでコーディングを始めるための準備が整いました。

ステップ2：コンテンツ管理と実装

環境が整ったら、次は記事を管理するmicroCMSの設定です。

1. microCMSでアカウントを作成する

microCMS公式サイトでアカウントを作成し、ブログのURLの一部となるサービスドメインを設定します。ブログ名など、わかりやすい名前を選ぶとよいでしょう。

2. コンテンツスキーマを作成する

記事のタイトルや本文など、管理したい情報の構造を「コンテンツスキーマ」として定義します。画面の指示に従ってテキストフィールドやリッチエディタといった項目を追加するだけで、投稿フォームが完成します。

3. APIキーを.envファイルに保存する

AstroからmicroCMSのデータにアクセスするためのAPIキーを取得し、.envファイルに保存します。このキーは外部に公開しないよう注意が必要です。

# .env
MICROCMS_SERVICE_DOMAIN=your-service-domain
MICROCMS_API_KEY=your-api-key

取得したAPIキーを使って、microCMSに保存したデータをAstroで取得・表示するコードを実装します。Tailwind CSSでヘッダーや記事一覧をスタイリングし、本文のレイアウトを整えれば、ブログとして機能する状態になります。

公開方法

ブログが完成したら、いよいよ公開です。今回はXserver StaticとGitHub Actionsを連携させ、コードをpushするたびに自動でデプロイされる構成を紹介します。

GitHubリポジトリの準備

まず、ブログのコードを管理するためのリポジトリをGitHubに作成します。作成後、以下のコマンドでローカルのプロジェクトをアップロードします。

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/ユーザー名/リポジトリ名.git
git push -u origin main

GitHub Actionsで自動デプロイを設定する

Xserver StaticとGitHubを連携させることで、リポジトリへのpushをトリガーにブログが自動でデプロイされるようになります。設定手順はXserver Staticの公式ドキュメントに詳しくまとめられているため、そちらを参照しながら進めることをおすすめします。

手動でのアップロード作業が不要になるため、日々のブログ運営が大幅に楽になります。

まとめ

ゼロからブログを構築する過程では、思わぬ壁にぶつかることも何度かありました。ただ、一つひとつ問題を解決していく中で、技術への理解が着実に深まっていくのを感じました。今後はカテゴリーの追加やSEOの強化なども進めつつ、記事の数も増やしていく予定です。この記事が、ウェブ制作を始めようとしている方や、キャリアの転換を考えている方の参考になれば嬉しいです。