Astro でブログを作りました
静的サイトジェネレータ Astro でブログを作りました。
note にあった記事も移行しています。
なにか長文を書きたくなったときに更新する予定です。
↓ ここから先は作り方の話になります
実装について
こちらのテーマをもとにカスタマイズしています。
RSS
公式パッケージ（ @astrojs/rss ）を使いました。
設定ファイルは以下のようになっています。
rss.xml.js
import rss from "@astrojs/rss";
const postImportResult = import.meta.glob("./**/*.md", { eager: true });
const posts = Object.values(postImportResult);
const nonDraftPosts = posts.filter((post) => !post.frontmatter.draft); // 記事一覧から下書きを除外
export const get = () =>
rss({
language: "ja",
title: "ブログのタイトル",
description: "ブログの説明",
site: import.meta.env.SITE, // SITEはプロジェクトのastro.configにあるsiteの値
items: nonDraftPosts.map((post) => ({
link: post.url,
title: post.frontmatter.title,
pubDate: post.frontmatter.publishDate,
description: post.frontmatter.description,
content: post.compiledContent(), // 本文の取得ができるのは .md ファイルのみ
})),
});フィードに下書きを表示しないオプションが機能しなかったため、下書きを除外した配列を作っています。
また RSS に記事の本文を追加しようとしたところ、MDX からは記事の本文を取得できないようでした。そのため MDX は使わずに通常の Markdown ファイルで記事を書くことにしました。
画像の最適化
公式で用意されている画像用のコンポーネント（ @astrojs/image ）では、画像サイズの自動判別や Lazy Load などの機能がありませんでした。その代わりに非公式の Astro ImageTools という多機能なフレームワークがあるようです。
私の場合は Markdown が HTML に変換されるときに勝手にいい感じになって欲しかったので、 rehype プラグインを使うことにしました。
以下のプラグインで画像サイズの自動調整を行っています。
Lazy Load については img タグに loading="lazy" 属性がつくようになっています。
上記と同じ作者さんが提供されているプラグインを使用しています。
ブログカード
こちらの remark プラグインを使っています。Markdown 内に URL をベタ貼りするとカードとして表示されます。
ホスティング
Vercel の Hobby プランを使っています。
商用利用をしなければ無料で使えるのと、東京リージョンがあるのと、ロゴが ▲ でかっこいいから…
画像置き場
Google Photos に共有アルバムを作り、その中の画像を貼り付けています。
更新方法
Markdown で書いたファイルを GitHub に上げて更新しています。
スマホから画像を貼り付けられないという弱点があり、困ったら作り変えるかもしれません。