BLOG
話題の「bolt.new」でAstro + microCMSを連携させたブログを作成してみた
INDEX
今回は、前回軽く試したbolt.newで、Astro + microCMSを連携させたブログを作成してみます！
そもそもbolt.newとは
StackBlitzが開発した、Webブラウザ上でAIにフルスタックアプリ生成を指示して、Webブラウザ上のNode.js環境で実行やデバッグ、デプロイなどを行えるサービスです。
詳しくは前回のブログをご覧ください。
フルスタックのWebアプリを作成できるツール「bolt.new」を試してみた
ベースとなるブログサイトの作成
前回同様、実際に試してみます。
以下を使用して作成してみたいと思います。
- Astro
- Tailwind CSS
- shadcn/ui
- microCMS
- Netlify
※microCMSは既にアカウント登録済みとして進めます。
まず、bolt.newに以下の指示をしてみます。
以下の技術を使用したブログを作成してください。
- Astro
- Tailwind CSS
- shadcn/ui
- microCMS
- Netlify
ページの構成は以下のとおりです。
- トップページ
- ブログ記事詳細ページ
- Aboutページ
ブログ記事やカテゴリはmicroCMSのAPIから渡してください。
※日本語で返信してください。
すると、さくさくコードが生成されていきます。
microcms.tsでは、microCMSをAstroから呼び出すためにしっかりmicroCMS JavaScript SDKを使用してます。
ただ、現段階ではmicroCMSでAPIを作成していないため、エラーとなっています。
microCMSでブログ記事作成
まだmicroCMSでAPIを作成していないため、これからmicroCMSでブログ記事を作成していきます。
APIスキーマ設定
設定はbolt.newが予め実装してくれた以下の項目が必要です。
- blogs（タイトル、本文、アイキャッチ画像、カテゴリー）
- categories（カテゴリー名）
microCMSの記事を参考に各種設定していきましょう。
https://blog.microcms.io/astro-microcms-introduction/#he7601d91a8
microcms.tsで型設定も既に設定されているので、それに沿って設定するだけなので楽ですね。
import { createClient } from 'microcms-js-sdk';
export const client = createClient({
serviceDomain: import.meta.env.MICROCMS_SERVICE_DOMAIN,
apiKey: import.meta.env.MICROCMS_API_KEY,
});
export type Blog = {
id: string;
title: string;
content: string;
eyecatch?: {
url: string;
height: number;
width: number;
};
category: Category;
publishedAt: string;
updatedAt: string;
};
export type Category = {
id: string;
name: string;
};
export type BlogResponse = {
contents: Blog[];
totalCount: number;
offset: number;
limit: number;
};
記事作成
記事はダミーの記事を入れておきます。
環境変数の設定
.env.localファイルにmicroCMSの登録情報やAPIキー情報を確認し、以下のように記述します。
※こちらは<YOUR_SERVICE>と<YOUR_KEY_VALUE>に各情報を入れてください。
MICROCMS_SERVICE_DOMAIN=<YOUR_SERVICE> # .microcms.io は含まない値
MICROCMS_API_KEY=<YOUR_KEY_VALUE>一旦確認
各種設定し、再度bolt.newを更新してみると…
記事がちゃんと表示されました！
ちなみにAboutページも簡単ですが、実装されています。
ダークモード対応
ついでにダークモードに対応させてみます。
■トップページ
■ブログ記事詳細ページ
■Aboutページ
レスポンシブも対応してくれています。
※Headerも、しれっと追従Headerになってました。
Netlifyにデプロイしてみる
最後にNetlifyにデプロイしてみましょう。
画面右上の「Deploy」をクリックすると、デプロイが開始します。
「Open website」クリックするとデプロイされたURLに遷移し、ちゃんと表示がされていました。
プロジェクトの管理画面へのURLもあるので、環境変数の設定やカスタムドメインの設定、デプロイ設定のカスタマイズも出来るようになります。
まとめ
本当に、環境構築からデプロイまでbolt.newだけで完結してしまいました…
microCMS側の作業もありましたが、それ含めても30分しないでデプロイまで完了したので驚きです。
各サービスやツールの進化が凄まじいので、しっかりキャッチアップしていきたいですね。
