Hello, Astro Blog
最終更新日
公開日
このブログの構成技術，こだわりなど
目次
tech stack
Astro: SSG (Static Site Generator) MarkdownからHTMLへ変換するTailwind CSS: はい．Markdown / MDX (Markdown + JSX): 一応MDXもサポートしているけど，移行のことを考えて使ってないshiki:```で囲まれたcodeブロックの Syntax Highlight．ちょっと機能が少ない？Cloudflare Pages: ホスティング（GitHubのPrivateレポジトリと連携できるのが素晴らしい）（ダッシュボードも使いやすくてとても良い）yarnnpmに戻したeslintprettierhusky:pre-commithookで，commit前に自動でlint,formatlint-staged: stagingされているファイルだけ自動でlint,format
検討したけどボツにしたもの
Next.js (React): 慣れてるし最初はこれで作り始めたけど，Markdownブログの用途ならAstroの方が良さそうだったので却下Jekyll (Ruby): GitHub Pagesでホストするなら（デフォルトだし）これで良かったんだけどね．Hugo (Go): とりあえず動かすのはめっちゃ簡単だし，めっちゃ速いし，それなりに良い感じの見た目になる（themeが沢山ある）んだけど，ちょっと凝ったことをしようとすると急に大変になるので却下Gatsby (React):GitHub Pages: レポジトリをpublicにしないといけないので却下astro-expressive-code: shikiよりも高機能な syntax highlightするやつ．読み込みがめっちゃ遅くなったからやめた
features
- prefetch: リンクをhoverするとprefetchし，クリックすると準備しておいたページを即時表示
- draftモード:
posts/_draft/*.mdはbuild時に無視される - GA4 (Google Analytics): そのまま
<head>に置くとエラーになるので，partytownを使う - link-card: https://google.com みたいに書くと，カード形式で表示されるあれ（箇条書きの中では反応しない）
- rss:
/rss.xml
記事本体はあくまで普通のMarkdownで書く（Fromt matter除く）． 見た目とか動きはAstroで色々いじる． これで，別のフレームワークに移行したくなった時も，Markdownをコピーして見た目を整えるだけで済む．