neputa note

BlogをBloggerからAstroへ移行した

初稿:

更新:

- 5 min read -

#Astro #Tailwind #blog
img of BlogをBloggerからAstroへ移行した

Blog移行の経緯

Googleから見捨てられ、エディターやテンプレートは古いままのGoogle Bloggerを10年以上利用してきた。先日、Webフレームワーク「Astro」でサイトを開発し、手ごたえがあった。この個人Blogも移行しようと決断した。

  • Bloggerとの戦いの記録

PageSpeed Insightsの4項目でオール100を達成・実施事項まとめ【Blogger】

本記事の概要 PageSpeed Insightsのスコアでオール100を達成した。対象はこのBlog。Googleの提供するBloggerを使用しているため、独自の仕様にずいぶん苦しめられた。行った施策全体を概観するのが主な内容で、部分的に詳細の手順を記載した。

favicon for blog card www.neputa-note.net
  • Astroサイト開発デビュー

AstroとTailwindで静的サイトを作ってみた 【Jamstack】

先日このBlogのアプリ開発情報をAstroとTailwindによる静的サイトへ移動した。（正しくはAstro & Tailwindで作成されたテンプレートを使用） これまでBlogのカスタマイズ目的でHTML/CSS/JavaScriptの使用機会はあったがフレームワークは今回が初。色々と気づきがあったので備忘録を残す。

favicon for blog card www.neputa-note.net

開発環境・フレームワーク

開発環境

  • OS - Ubuntu22.04LTS on WSL2（Windows11）
  • Node.js - v20.14.0
  • pnpm - v9.4.0
  • VSCode - v1.90.2

フレームワーク

  • Astro - v4.11.0
  • tailwindcss - v3.3.5

Astroテンプレート

テンプレート選びについて

  • 下記リンクに様々なテンプレートがあり、用途や使いたい技術で絞り込むことができる。

Themes | Astro

Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between.

favicon for blog card astro.build
  • 今回は以下で条件の中から選択した。
    • Categories - Blog
    • Technology - MDX / Tailwind / TypeScript
    • Pricing - Free

移行作業―概要

行った作業を大きく分けると以下の3つ。

  • Astro Blogサイト開発
  • BloggerのコンテンツをAstroへ移行
  • DNS等ネットワーク周りの移行

次に各作業の実施事項を記す。粒度は「実施したこと」に留め、作業手順はそれぞれ別途記事を書く。予定。

移行作業―詳細

Astro Blogサイト開発

ここが最も作業ボリュームが大きい。Bloggerにあった機能を可能な範囲で盛り込んだ。

先述したテンプレートをベースに行ったカスタマイズを列挙する。

BloggerのコンテンツをAstroへ移行

記事コンテンツ変換作業

出力結果
output/
├── neputanote
│   ├── data
│   ├── draft-pages
│   │   ├── html
│   │   └── markdown
│   ├── draft-posts
│   │   ├── html
│   │   └── markdown
│   ├── images
│   ├── pages
│   │   ├── html
│   │   └── markdown
│   └── posts
│       ├── html
│       └── markdown
└── neputanote-images
  • markdwonへ変換といっても、meta情報をもとにfrontmatterを追加し本文はHTMLのまま
  • 各記事のmeta descriptionはBloggerのバックアップXMLに含まれないので空欄
  • シェルスクリプトとVSCodeの置換＆正規表現を駆使しMDX形式の記事へ移行した

ルーティング対応

  • 記事のディレクトリ構成はBloggerと同じく「ドメイン/年/月/記事ファイル名」とした
  • Bloggerは .html拡張子が付いていたがこれをやめ、trailing slashを付ける
  • 記事ファイル名に使用していたドットはAstroがハイフンに置換するため_redirectsを作成

DNS等ネットワーク周りの移行

  • 元々Bloggerのキャッシュサーバに使っていたCloudflareの静的サイト配信サービスCloudflare Pagesを利用した
  • Githubの指定したリポジトリをダウンロードしビルドしてくれる
  • ドメインサーバの設定はキャッシュサーバ利用時に設定済みだった
  • DNS設定のオリジンをBloggerからCloudflare Pagesに変更
  • Blogger用に最適化したPage Ruleを削除し、.htmlをスラッシュに修正するRewriteルールを追加

まとめ

今回の移行作業を項目ベースで網羅的にまとめてみた。

AstroではBloggerで出来なかった数多くの機能を実現できてうれしい。

各作業工程の手順については自分の備忘録として個別に記事をまとめる予定。

まとめたものからこのページへリンクを追加する。

#Astro #Tailwind #blog

目次