AstroJSとTailwindでブログをリニューアルした

2023/03/20

当サイトではアフィリエイト広告を利用しています

これまでのブログはHugoで運営していましたが、いい加減Javascriptを勉強しておきたいこと、GoogleAnalitycs4対応などでブログの修正が必要だったので、勉強かねてJavascript系のStaticSiteGeneratorでブログをリニューアルすることにしました。

SSGフレームワークとしてはNext.js、GatsbyJs、Hexo、AstroJS等があるようでしたが、ビルド時間とアクセス時間が早いことと学習コストの低さからAstroJSを選んで利用することにしました。

AstroJS

AstroJSはStaticSiteGeneratorやServerSideRenderingに利用が出来るフレームワークとなっています。

ビルドツールにviteを利用しており高速である点、ビルド時に不要なJavascriptを取り除くためアクセス速度も拘束になるのが利点です。

また、.astroの記述はJSXライクで学習コストが低めである他、AstroJS内でReact, Next, Nuxtなどのコンポーネントを利用できるので記述の自由度がかなり高いです。

Web上の情報はあまり多くないですが、公式ドキュメントが充実しているのでドキュメントを探し求めれば不明点が解決することが多いです。

Javascript/Typescriptの学習

JavaScriptの学習にはJavaScript Primer、Typescriptの学習にはサバイバルTypescriptを利用しました。

採用したCSSフレームワーク

Tailwindをブログデザイン用のCSSフレームワークとして利用しています。

フロントエンドは本職ではないので大分不格好なデザインとなっていますが、どうにか必要最低限のレスポンシブデザインを実装することが出来ました。

こちらも公式ドキュメントを色々見ながら実装してます。

ブログ用ということで本文に@tailwindcss/typographyのプラグインを使ってます。これで文字サイズなどのデザインが一気に整えられて便利です。

利用したAstroJSのプラグイン

基本的に公式プラグインを利用してます。

@astrojs/image: 画像最適化に利用
@astrojs/mdx: MDXで記事を書くために利用
@astrojs/rss: RSSフィード生成に利用
@astrojs/sitemap: Sitemapの生成に利用
@astrojs/tailwind: tailwindの利用に必須

あとは必要そうなComponentを自作した感じです。

手間取った点

ただ、いくつか仕様の問題で面倒だったり解決できない点がありました。

大きく気になったのは次の2点でしょうか。

同一ブログ内のリンクが面倒

生成元ファイルのパスでリンクする公式の手法がありません。

なので生成後のリンクを指定することでリンクを貼るか、以下のようにComponentのスクリプト部分で全ての記事を取得して該当記事を検索するような方法が必要です。

const allPosts: MDXInstance<Frontmatter>[] = await Astro.glob<Frontmatter>(
  "../../../../pages/posts/**/*.mdx"
);

ページネーションで前後のページしか取得できない

ブログを実装するにあたりページネーション機能は必要かと思います。

ただ、この場合はpage.url.next, page.url.prevによる前後のページリンクしか取得できません。

なのでベースURLに対して${baseULR}/1,${baseULR}/2などと手動でインデックスを振ったリンクを用意する必要がありました。

ビルド時間について

現在このブログをリニューアルした時点で200記事程度存在しますが、Netlifyでのビルド時間は1分ほどです。

個人ブログであればよほど更新頻度高くない限りは無料枠で問題なく利用できる範囲かと思います。