AstroとMDXでブログを構築しました

当初はこのサイトは、AstroフレームワークとWordPressを組み合わせてヘッドレス化していましたが、Astroのコンテンツコレクション機能を使って、マークダウンを拡張したMDXファイルでの構築に切り替えました。

TAKさんのこちらの記事を参考にさせていただきました。ありがとうございます。

ブログはじめました – TAKLOG TAKLOG（読み方：たくろぐ）は、フロントエンド開発やWeb制作分野のことを中心に、備忘録や知識のアウトプットの場として運営する予定のブログです。当ブログの内容は原則的に私の個人的な意見や考えを反映することとします。

CSSはTailwind CSSを使いつつ、独自ドメインをVercelにデプロイしています。今回初めてVercelを利用しましたが、GitHubにプッシュするだけで更新できるのがとても楽で感動しました。

ダークモード対応は、OSで選択した外観テーマに応じて切り替えるようにしています。

Markdownで記述する

ということは、こんな感じで書けば、HTMLとしてビルドされます。

HTMLタグを直接記述することもできます。

## Markdownで記述する

ということは、**こんな**感じで書けば、HTMLとしてビルドされます。

- リストアイテム
- リストアイテム

<p class="border-b-4 border-b-primary">HTMLタグを直接記述することもできます。</p>

MDXファイルは、Markdownを拡張したフォーマットで、Markdown記法とJSXのようなコンポーネントを扱うことができます。Astroでは、フロントマター変数を使用したり、.astro形式の俺俺コンポーネントも使用することもできます。

例えば、.json形式のLottieファイルを読み込んで、Lottieアニメーションとして表示するコンポーネントを作成し、MDXファイル内でこんな感じに記述しています。

import Lottie from "../../components/Lottie.astro";

<Lottie src="/assets/lottie/cat.json" width={300} label="猫ちゃん" class="aspect-[280/200]" />

しばらくはAstroフレームワークをメインに、実験的に色々と導入していこうと思います。