当サイトをAstro製の静的サイトへとリプレイスしました。
ご覧いただいているこちらのサイトは、これまでWordPressにて実装・運用を行なってきました。 今回新たなチャレンジとして、静的サイトジェネレーターのAstroを使用して再構築を行なってみました。
外見はほとんど変えず、サイトの「内側」だけを変更しています。現在の構成は以下の通りです。
| 項目 | 変更前 | 変更後 |
|---|---|---|
| JavaScriptフレームワーク | 利用なし | Astro |
| メタタグの設定 | SEO SIMPLE PACK | astro-seo |
| 画像最適化 | Converter for Media等 | Imageコンポーネント |
| ブログ | WordPress投稿機能 | MDX |
| ページ遷移アニメーション | – | @swup/astro |
| お問い合わせフォーム | Contact Form 7 | SSGform |
| バリデーション(フロントサイド) | – | JustValidate |
| Googleアナリティクス連携 | SEO SIMPLE PACK | astro-google-analytics |
| XMLサイトマップの生成 | XML Sitemap & Google News | @astrojs/sitemap |
| RSSフィード | WordPress標準機能 | @astrojs/rss |
| ホスティング | レンタルサーバー | Cloudflare |
WordPressでの実装・運用に大きな不満があったわけではないですが、静的サイトに変更することでパフォーマンスが大きく向上し現在のところ大変満足しています。
内部的にはまだまだ改善できる箇所がたくさんありそうなので、業務の合間に修正を加えたいと思います。
将来的にはヘッドレスCMSの実装や、Astroを使用した高パフォーマンスなサイト制作についてもサービス提供したいなと考えております(マークダウンで入稿できるブログ開発もやってみたいです)。
今後ともよろしくお願いいたします。
【2024/07/12追記】
ページ数が多いサイトではないですが、View Transitions APIを導入しました。
ビュートランジション APIを使用することで、シームレスでよりリッチなページ遷移を実現することができます(実装時点でChromeとEdgeでのみ対応)。
【2024/07/22追記】
本サイトの中にブログを立ち上げました。
新たに学んだことや、実装に詰まった点を中心にアウトプットできればと考えています。
【2024/09/11追記】
少しづつブログの記事が増えてきたので「ブログ一覧ページ」にページネーションを実装し、キーワード(タグ)による絞り込み機能を追加しました。
【2025/03/22追記】
Astroのバージョンを4系から5系へアップグレードしました。それに伴い「お知らせ」と「ブログ」の管理方法をコンテンツコレクションからコンテンツレイヤーへ移行しました。
【2025/07/03追記】
ページ遷移アニメーションの実装を、ブラウザネイティブのView Transition APIから、JavaScriptライブラリであるswup.jsに変更しました。より幅広いブラウザでリッチなページ遷移が実現できるようになりました。
【2026/02/19追記】
サイト全体のコンテンツ見直しを行い、ブログ中心のサイト構成へと変更しました。
また、新たにライトモードとダークモードを切り替えるボタンを設置しました。
