趣味のNote

Astro Changelog(Astro5.6がでた)

作成:

Gatsby から Astro に乗り換えて２年

GatsbyJSからAstroに乗り換えて2年以上経ったので止まっていたAstroのChangelogのように最近の構成をメモしておこうと思う。

2年間の変更点

  • 初期に導入したAstro ImagetoolsがAstroの画像強化によって必要なくなった(fitやposition指定ができるImageコンポーネント)
  • Markdownファイルは TinaCMSのローカルモードで管理している
  • Bridgy Fed で Bluesky や ActivityPub と接続している(webmention)
  • 純粋なギャラリーページ(photoswipe)ができた
  • 地味なデザイン変更
  • 2024年に Tailwind css を導入したりしたもののここに来て純粋なCSSに戻した
  • prettierやstylelintの導入

package.json

package.json
{
  "name": "astroblog",
  "type": "module",
  "version": "0.0.1",
  "scripts": {
    "dev": "bun x tinacms dev --datalayer-port 9001 -c  \"astro dev --host 0.0.0.0\"",
    "devlocal": "bun x tinacms dev --datalayer-port 9001 -c  \"astro dev\"",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro",
    "format": "biome format --write .",
    "stylelint": "stylelint \"src/**/*.astro\"",
    "stylefix": "stylelint \"src/**/*.astro\" --fix"
  },
  "dependencies": {
    "@astrojs/mdx": "4.2.3",
    "@astrojs/rss": "^4.0.11",
    "@astrojs/sitemap": "3.3.0",
    "@astrojs/svelte": "7.0.9",
    "astro": "5.6.1",
    "astro-expressive-code": "^0.41.1",
    "astro-icon": "^1.1.5",
    "embla-carousel-autoplay": "^8.6.0",
    "embla-carousel-svelte": "^8.6.0",
    "open-graph-scraper": "^6.9.0",
    "photoswipe": "^5.4.4",
    "remark-link-card": "^1.3.1",
    "svelte": "^5.26.1"
  },
  "devDependencies": {
    "@biomejs/biome": "^1.9.4",
    "@tinacms/cli": "^1.9.5",
    "@types/mdast": "^4.0.4",
    "postcss-html": "^1.8.0",
    "stylelint": "^16.18.0",
    "stylelint-config-html": "^1.1.0",
    "stylelint-config-recess-order": "^6.0.0",
    "stylelint-config-recommended-scss": "^14.1.0",
    "tinacms": "^2.7.5"
  }
}

ページ構成

以下は以前のChangelogで載せたような構成ツリー

├── pages
│   ├── 404.astro
│   ├── 500.astro
│   ├── [...id].astro
│   ├── [...page].astro
│   ├── [tag]
│   │   └── [...page].astro
│   ├── blog.astro
│   ├── gallery.astro
│   ├── message.astro
│   ├── note
│   │   ├── [...id].astro
│   │   ├── [...page].astro
│   │   ├── [tag]
│   │   │   └── [...page].astro
│   │   └── category.astro
│   ├── profile.astro
│   ├── rss.xml.ts
│   ├── sitelinks.astro
│   └── test.astro

まとめ

WebではAstroを使う例も2年前と比べて明らかに増えたと思う。とはいえGatsbyがNetlifyの件で更新が止まったように Astroの将来もまったくわからないのでいつかは別の静的サイト生成ツールに乗り換えることにはなると思う。

昨今はAI生成の進化によってGoogleで検索して調べるよりAIに聞いたほうが あっさり解決することが大変多くAstroのような静的サイトジェネレーターを気軽に始めやすいのではないだろうか(必要性は不明)。