本ブログをHugoからAstroに移行

ブログ執筆環境を自分にとってやりやすいものにするため、TypeScriptやコンポーネントが使えるAstroに移しました。 (Astroにしたのは興味です😀)

From → To

作業ログ

1. コンテンツの移行

markdownの部分はそのままmdxに移行して、Youtube埋め込みなどのショートコードはAstroのコンポーネントに変更した。

before

{{< youtube id="d_OiHKnoW1Q" >}}

after

import Youtube from '../../components/Youtube.astro'

<Youtube videoCode="d_OiHKnoW1Q" />

2. リダイレクト設定

新しいテーマのURLに合わせて、リダイレクト設定を行った。

// astro.config.tx

export const oldBlogRedirects = {
  "/blog": "/posts",
  "/archives": "/posts",
  "/profile": "/about",
};

export default defineConfig({
  // ...省略
  redirects: {
    ...oldBlogRedirects,
  },
});

古いブログ記事のリダイレクトをSSGで出力する場合はgetStaticPathsをexportする必要がある。

// blog/[slug].astro

---
import { getCollection } from "astro:content";

export async function getStaticPaths() {
  const posts = await getCollection("blog").then(p =>
    p.filter(({ data }) => !!data.rssOldLink) // 古いブログ記事だけ対象
  );

  return posts.map((post) => ({ params: { slug: post.slug } }));
}

const { slug } = Astro.params;
return Astro.redirect(`/posts/${slug}/`)
---

RSSフィードのURLのリダイレクトはmeta refresh tagではうまくいかなそうなので、新しいテーマのrss.xml.tsと同じ内容をindex.xml.tsにも設置した。 (rss.xml.tsをリネームしないのはastro-paperの更新を取り込みやすくするため)

// index.xml.ts
import { GET } from "./rss.xml.ts";

export { GET };

参考

• Configured Redirects

3. OG画像の日本語フォント対応

AstroPaperはブログタイトルからOG画像を生成する機能があるが、デフォルトでは日本語に対応していないので日本語フォントに差し替えた。

--- a/src/utils/loadGoogleFont.ts
+++ b/src/utils/loadGoogleFont.ts
@@ -45,14 +45,14 @@ async function loadGoogleFonts(
 > {
   const fontsConfig = [
     {
-      name: "IBM Plex Mono",
-      font: "IBM+Plex+Mono",
+      name: "IBM Plex Sans JP",
+      font: "IBM+Plex+Sans+JP:wght@400",
       weight: 400,
       style: "normal",
     },
     {
-      name: "IBM Plex Mono",
-      font: "IBM+Plex+Mono:wght@700",
+      name: "IBM Plex Sans JP",
+      font: "IBM+Plex+Sans+JP:wght@700",
       weight: 700,
       style: "bold",
     },

参考

• Dynamic OG image generation in AstroPaper blog posts

4. その他作業

• Github Actions
  • 元はgh-pagesブランチにビルド結果をpushしていたが、Astroのドキュメント記載のやり方にまるっと差し替えた
• 共有ボタン変更
  • Xやはてなブックマークのアイコンを追加した
• テーマカラーの変更

TODO

• astro + mdx環境に慣れる. LSPの整備など
• AstroPaperのアップデート追従を簡単にしたい
• コンテンツを書く

おわりに

このブログを書く際にも、Copilotがめちゃくちゃサジェストしてくれたので助かりました。