RSS DEV コミュニティ
フォロー
ビルドログ：Astro、Cloudflare Pages、Umamiでブログを再構築する
著者は、特定の原則に焦点を当てて、Astro を使用して個人のウェブサイトを再構築しました。これらには、SEO の維持、すべての資産の所有、JavaScript の最小化、プライバシーとベンダーロックインからの自由の確保が含まれます。投稿は Git リポジトリ内の Markdown ファイルとして管理され、SEO の継続性のために古い URL に一致するようにスラッグが保持されます。移行プロセスには、投稿をインポートし、不要なコンテンツを削除し、画像をローカルにダウンロードして最適化するためのスクリプトが含まれていました。
SEO は重要な懸念事項であり、正規 URL と古いブログパスからメインドメインへの 301 リダイレクトを実装することで対処されました。これにより、ランキングシグナルが単一のホストに統合されました。キャッシュされたコンテンツを提供する残存する Gatsby サービスワーカーが原因で、永続的なバグが発生しました。解決策は、古いサービスワーカーの登録を解除し、ライブサイトへのリフレッシュを強制する新しい「キルスイッチ」サービスワーカーでした。
検索機能は、バックエンドサーバーの必要性を回避するために、静的 JSON インデックスを使用してクライアントサイドで実装されました。Astro のスコープ付きスタイルに関する軽微な問題は、動的に生成された要素の CSS の配置を調整することで解決されました。Mermaid 図は、正しく読み込まれるように、非同期インポート後に明示的にクライアントサイドでレンダリングされます。図の可読性を向上させるために、クリックしてズームする機能が追加されました。
タグの衛生状態は、単一使用タグと重複タグを正規タグに統合することで対処され、2 つ未満の投稿を持つページは noindex 対象としてマークされました。Cookie を使用しない分析は Umami を使用して実装され、広告ブロッカーをバイパスするために Cloudflare Pages Functions を介したファーストパーティプロキシが使用されました。リンククリックのイベントトラッキングが Umami に追加されました。
Astro の View Transitions では、`transition:persist` がスクリプト添付リスナーを保持しないため、ナビゲーションごとにスクリプトを再初期化する必要があります。最後に、Cloudflare の Rocket Loader が Safari でのサイトの破損の原因であることが特定され、無効化されました。
