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

なぜ、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に専用のクラスを追加するだけで、洗練されたデザインがすぐに形になります。一度使い方を覚えれば、あとはもう爆速！デザインと実装を両方手がけるクリエイターにとって、もはや手放せないツールです。

実際に作ってみよう！ 環境構築から実装まで

さあ、いよいよ実践です！Node.jsのインストールから、AstroとTailwind CSSを導入するまでの手順を一緒に見ていきましょう。

【ステップ1：環境構築】 

まずは開発に必要な土台を固めます。

1. Node.jsをインストール
2. Astroプロジェクトを作成
3. Tailwind CSSを導入
4. microCMSのライブラリをインストール

Node.jsをインストール

まだの方は、公式サイトから最新版をダウンロードしてくださいね。

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を導入

最後に、Tailwind CSSを導入します。Astroには便利なコマンドが用意されているので、プロジェクトのルートディレクトリで以下のコマンドを実行してください。

npx astro add tailwind

このコマンドは、必要なパッケージのインストールから、tailwind.config.cjsやpostcss.config.cjsといった設定ファイルの自動生成まで行ってくれます。
最後に、microCMSからデータを取ってくるために必要なライブラリをインストールしておきましょう。

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

npm install microcms-js-sdk

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

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

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

1. microCMSでアカウント作成：公式サイトでアカウントを作り、ブログのURLの一部になるサービスドメインを決めます。ブログ名など、わかりやすい名前がおすすめです。
2. コンテンツスキーマを作成：記事のタイトルや本文など、どんな情報を管理するか決める「コンテンツスキーマ」を作ります。画面の指示に従って、テキストフィールドやリッチエディタといった項目を追加するだけで、ブログの投稿フォームがサクッと完成！
3. APIキーを保存：AstroからmicroCMSのデータにアクセスするためのAPIキーを取得し、誰にも見られないように.envファイルに保存します。このキーは絶対に公開しないように注意してくださいね！

このAPIキーを使って、microCMSに保存したデータをAstroで表示するコードを書いていきます。Tailwind CSSでヘッダーや記事一覧を美しくデザインし、本文がきれいに表示されるようにCSSを整えれば、ブログの完成です！

公開方法

記事が書けたら、いよいよブログを世界に公開するします。今回は、Xserver StaticとGitHub Actionsを連携させて、記事を更新したら自動で公開されるように設定する方法をご紹介します。

GitHubの準備 

まずは、ブログのコードを管理するために、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するたびに、ブログが自動で公開されます。
公式の手順が公開されているので、こちらに沿って進めて行けば大丈夫です。

手動で公開する手間が省けて、日々のブログ運営が本当に楽になりますよ！

【まとめ】

このブログをゼロから作ってみて、大変なこともありましたが、一つずつ問題を解決していく楽しさを改めて感じました。このブログを通して、今後はカテゴリーを増やしたり、SEOを強化したり、そしてもっとたくさんの記事を書いていきたいです。この記事が、これからウェブ制作を始める方や、キャリアに悩んでいる方の役に立てたら、とても嬉しいです。