個人のブログをつくるにあたってはせっかくなので仕事で触っていないものにも触りたい。
てなわけで静的サイトジェネレータのAstro＋国産ヘッドレスCMSのmicroCMSを組み合わせて
個人ブログを作りましたのでその備忘録です。
私自身、普段はweb担当として主にWordPressを扱っており、
Node.js系の技術には馴染みがありませんが、Astroの構築はとても簡単でした。
環境はM2のMac、エディタはVS Codeです。
（2013年のMacBookAirから買い替えたけど、買い替え前にも実験してて、作業は普通にできてました。）
CMSはmicroCMS。そのほかGitHubとAWS Amplifyを使っています。
事前準備としてNode.jsのバージョン管理ツールnvm(Node Version Manager)をインストール。私の環境構築時点では0.40.1でした。
なお、現在はHomebrewを使ったインストールはサポート外とのことなのでターミナルからcurlでインストールしました。
コマンド実行しただけだとパスが通らなくて、.zshrcが無かった？とかで手動で作ったりしているうちにいつのまにか通ってた。
最新版のNode.jsをインストールしました。私の環境構築時点ではv22.11.0でした。
まずは下記コマンドから初期設定が対話式で進むので作業フォルダ名を決めたり
GitHubのリポジトリに連携させたりします。
npm create astro@latesthttps://astro.build/themes/
からテーマをダウンロード。私が選んだのは Melody です。Thank you, Mr.Hong.
zipファイルの中身を上で作ったフォルダに丸ごと上書きしてから
下記コマンドで依存関係などをエイヤします。（よくわかってない）
npm installhttps://blog.microcms.io/astro-microcms-introduction/
を参考に.env.localファイルを作ってmicroCMSアカウントのシークレットなどを記述、
amplifyでは環境変数を.envにechoするようにしてみました。（空の.envをプッシュしていますが必要かわかりません）
私の環境では最初から.gitignoreに.envが指定されていましたが、除外しています。
.envにシークレットを書いたままプッシュされないように気をつけた方が良いと思います。
Astroではローカルのmd(マークダウン)ファイルで記事を管理します。
今回のように外部CMSを使う場合は記事取得系の記述を書き換える必要があります。
npm install microcms-js-sdkでmicroCMSから記事をもってくるヤツを入れ、microcms.tsを作ります。
上の記事だとエンドポイントが"blogs"になっているけど、
私のmicroCMSアカウントの初期状態では"blog"だったので書き換えました。
加えてBlogの型定義でなんか言われた気がしたので
// 型定義
export type Blog = {
title: string;
content: string;
description: string;
thumbnail: {
url: string,
height: number,
width: number
};
tags: [{
id: string,
createdAt: string,
updatedAt: string,
publishedAt: string,
revisedAt: string,
name: string
}];
createdAt: string;
updatedAt: string;
publishedAt: string;
revisedAt: string;
} & MicroCMSListContent;こんな感じでちょい足し(？)しました。
いろんなところから使うでtsconfig.jsonのcompilerOptions.pathsに以下を追加して@で呼び出せるようにました。
"@library/*": ["src/library/*"]あとは記事を取得する記述をpages/index.astroとかpages/[blogId].astro、
pages/tags/index.astroとかpages/tags/[tag]/[page].astroとかにある、デフォルトの
const allPosts = await getCollection("posts");をmicroCMSから記事をもってくる記述に入れ替えます。
//microCMS呼び出し
import { getBlogs } from "../library/microcms";
const response = await getBlogs({ fields: ["id", "title"], orders: "-updatedAt" });
const allPosts = response.contents;記事詳細ページだったりタグ一覧ページだったり各ファイルで使うfiledsを適宜調整します。
ordersでmicroCMSからもってくる投稿の並べ替えができるので、デフォルトのsortする記述も消しました。
"-updateAt"で更新日の降順になります。
https://blog.microcms.io/orders-parameter/
サイト内検索機能にはPagefindを使いました。
Melodyのサイト内検索にもともとPagefindが使われていたことに手動インストールしてから気づいたので、
Astro標準のpackage.jsonにももともとあったのかなど不明です。
buildコマンドにpagefind --site distを追加しました。
検索機能はdevだと動かないので、buildしてpreviewします。
microCMSへの投稿時点でコントロールすれば不要ですが、
画像のサイズが大きすぎると読み込みに時間がかかります。
microCMSの画像APIでは取得時のサイズを指定できるので、
https://document.microcms.io/image-api/introduction
components/OptimizedPicture.astroのPictureのsrcに横幅のパラメータを追加して {src+"?w=1200"} としました。
rss.xml.jsでフィードの発行ができますが、サムネイルなどうまく認識されなかったので
最低限のtitle,link,pubDateのみ記述しました。
npm run devして見た目など整えつつエラーに対処したりしていけば完成です。
私はMelodyの標準だとトップページのカード間の距離が近すぎる気がしたので、
HeroCardの親要素のmargin-bottomとCommonCardの親要素のgridのgapを
tailwindでそれぞれmb-8、gap-8に変更しました。
あとはAWSのAmplifyでGitHub連携すればリポジトリにプッシュされると自動でデプロイされます。
https://blog.microcms.io/add-amplify-webhook-setting/
また上記の通り設定してmicroCMSからのWebhookでデプロイするよう設定しました。
このほか、Route53でドメインとってAmplifyアプリに適用、
PartytownでGTM経由のGA4タグを埋め込んだりして完成です。
というわけでAstro＋microCMSで運用する個人ブログを構築しました。