【Astro】マークダウン記事とmicroCMSの記事をともに扱う方法

私のブログはAstroで作成しているのですが、これまでMarkdownで投稿していた記事をmicroCMSを用いた投稿方法に変更しました。

一番の理由としては、画像の投稿がmarkdownだと手間がかかるためです。VS Codeでmarkdown-image
というプラグインを利用していたのですが、スクリーンショットであれば問題なくやりたいことが実現できていましたが、画像のドラッグ・アンド・ドロップには対応していないようでしたので、もどかしい思いをしていました。microCMSでは、画像のドラッグ・アンド・ドロップに対応しているので、気軽に画像の追加を行えます。

MarkdownからmicroCMSに変更すると決めたのは良かったですが、既存のMarkdown記事の移行作業が問題でした。microCMSのAPIを利用すれば幾分かは楽をできそうでしたが、createdAtやpublishedAtなどの日時は自動で入る様子なので、既存の日時と変わってしまうのが一番の難点でした。

そこで、既存のMarkdownファイルは、そのまま残し、新しい記事については、microCMSで記事を作成していくという構成にしました。

マークダウン記事とmicroCMSの記事をともに扱う

Astroのディレクトリ構成(src以下)

src/
　├ components/
　├ layouts/
　├ library/
　├ pages/
　│　└ blog/
　│　　　└ 202(2|3)/**/*.md
　│　　　└ page/[page].astro
　│　　　└ [blogId].astro
　│　└ index.astro/

Markdown記事は、例えば以下のような形でファイルが存在します。

pages/blog/2022/12/12/hogehoge.md

// [page].astro
export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
    const posts = await getBlogs({ limit: 1000 });
    const mdPosts = (await Astro.glob("../**/*.md"))
        .sort(
            (a, b) =>
                new Date(b.frontmatter.publishedAt).valueOf() -
                new Date(a.frontmatter.publishedAt).valueOf()
        )
        .map((post) => {
            return {
                id: post.url?.replace(/\/blog\//, ""),
                title: post.frontmatter.title,
                createdAt: post.frontmatter.publishedAt,
                publishedAt: post.frontmatter.publishedAt,
                updatedAt: post.frontmatter.updatedAt,
                revisedAt: post.frontmatter.updatedAt,
                content: [post.compiledContent()],
                eyecatch: "",
            } as Blog;
        });


    return paginate(posts.contents.concat(mdPosts), { pageSize: 3 });
}

今後はMarkdownブログを利用することはない想定なので、microCMSから取得してきた投稿の配列の後ろにMarkdown記事の配列を追加することで順番を保っています。MicroCMSもMarkdownもともに投稿し続けるのであれば、配列をマージしてからソート処理が必要になります。