ikuma-t.

登壇 登壇 検索

個人サイトをAstroで作り替えました。

Astro でリプレイス

もともと Next.js で個人サイトというかブログを作って運用していたのですが、これを Astro に置き換えました。 理由としては巷でよく言われているところで、個人ブログ程度には Next.js は too much だったからです。

候補としては他に STUDIO を使ってノーコードでやってしまうということも考えていたのですが、やはり個人サイトの運用コストを気にしたくはなく、そうなると CMS がいずれ有料になってしまうのは良くないなと思い、結局自前で実装した次第です。

Astro での開発体験

めちゃめちゃ快適でした。さすがサイトを作るなら Astro でよくね?と公式で言っているだけありますね。Next.js でやると、地味に Markdown の変換部分でプラグイン選定とかがあったりして面倒だったのが、Astro だと全く意識せずにできるという点がグッジョブでした。

ざっと公式のドキュメントを読んで…っていうのを数ヶ月前にやり、それらの内容を忘れたお正月休みの 1 日で出来上がるくらいなので、基本的に直感的に開発できたかと思います。

Markdown コンテンツのスタイリング(tailwindcss-typography)

https://github.com/tailwindlabs/tailwindcss-typography

今回使用したテンプレートが Tailwind でスタイルをおこなっているものだったのですが、記事部分に以下のような指定しかなく、はじめは「どうやってスタイリングしているんだろうと思いました。

<div class="mx-auto prose prose-lg mt-6">
<slot />
</div>

このproseというプロパティが肝で、これは tailwindcss-typography というプラグインから提供されているものです。

https://tailwindcss.com/docs/typography-plugin

なんとこれを追加するだけで、HTML 部分のスタイリングをいい感じにやってくれるやつだそうで、上記のコードブロックもこのプラグインがよしなにやってくれています。すげー。


今後は

  • ブログ以外のコンテンツ拡充
  • Codespaces を用いて ipad でもサクッと記事を更新可能に
  • MDX タイプの記事の作成

あたりをやっていけるといいかな〜と思っています。

ikuma-t

ikuma-t

about

9割笑顔、1割 (´・ω・)