skip to content
ureta.net

Astro でブログを作りました

Edit

静的サイトジェネレータ Astro でブログを作りました。
note にあった記事も移行しています。

実装について

こちらのテーマをもとにカスタマイズしています。

Astro Cactus | Astro
A simple opinionated Astro theme. Use it to create your blog or website.
Astro Cactus | Astro favicon https://astro.build/themes/details/astro-cactus/
Astro Cactus | Astro

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 プラグインを使うことにしました。

以下のプラグインで画像サイズの自動調整を行っています。

GitHub - potato4d/rehype-plugin-auto-resolve-layout-shift: Flexible improve CLS plugin for rehype.
Flexible improve CLS plugin for rehype. Contribute to potato4d/rehype-plugin-auto-resolve-layout-shift development by creating an account on GitHub.
GitHub - potato4d/rehype-plugin-auto-resolve-layout-shift: Flexible improve CLS plugin for rehype. favicon https://github.com/potato4d/rehype-plugin-auto-resolve-layout-shift
GitHub - potato4d/rehype-plugin-auto-resolve-layout-shift: Flexible improve CLS plugin for rehype.

Lazy Load については img タグに loading="lazy" 属性がつくようになっています。 上記と同じ作者さんが提供されているプラグインを使用しています。

GitHub - potato4d/rehype-plugin-image-native-lazy-loading: Native lazy loading plugin for Rehype
Native lazy loading plugin for Rehype. Contribute to potato4d/rehype-plugin-image-native-lazy-loading development by creating an account on GitHub.
GitHub - potato4d/rehype-plugin-image-native-lazy-loading: Native lazy loading plugin for Rehype favicon https://github.com/potato4d/rehype-plugin-image-native-lazy-loading
GitHub - potato4d/rehype-plugin-image-native-lazy-loading: Native lazy loading plugin for Rehype

ブログカード

こちらの remark プラグインを使っています。Markdown 内に URL をベタ貼りするとカードとして表示されます。

GitHub - gladevise/remark-link-card
Contribute to gladevise/remark-link-card development by creating an account on GitHub.
GitHub - gladevise/remark-link-card favicon https://github.com/gladevise/remark-link-card
GitHub - gladevise/remark-link-card

ホスティング

Vercel の Hobby プランを使っています。
商用利用をしなければ無料で使えるのと、東京リージョンがあるのと、ロゴが ▲ でかっこいいから…

画像置き場

Google Photos に共有アルバムを作り、その中の画像を貼り付けています。

更新方法

Markdown で書いたファイルを GitHub に上げて更新しています。
スマホから画像を貼り付けられないという弱点があり、困ったら作り変えるかもしれません。