HugoからAstroへ移行した - すずゆーのブログ

今まではHugoを使ってブログを書いていましたが，Astroに移行しました．そこで，HugoからAstroに移行した理由とAstroへの移行方法について解説します．

HugoからAstroに移行した理由

HugoはGo言語で書かれた静的サイトジェネレータで，非常に高速に動作し，豊富なテーマが用意されているため，ブログを書くのに適しています．あまりブログシステムの構築に時間をかけたくなかったので，Hugoを選びました．

しかし，現在もHugoの仕様が変わり続けており，アップデートのたびにテーマが動かなくなったり，ビルドが通らなくなったりしていました．また，ReactやVueなどのフレームワークだけでなくTailwind CSSを使うのも難しく，開発効率が悪いと感じていました．

久しぶりにブログを更新しようとしたところDeployが失敗し新規記事の投稿ができなくなったため，思い切って書き直すことにしました．

この記事やこの記事を見て，Astroに移行することに決めました．

Astroへの移行方法

公式ドキュメントを参考に，Astroのプロジェクトを作成しました．

1. Astroのプロジェクトを作成

yarn create astro --template blog

2. Hugoのコンテンツを移行

Hugoのcontentフォルダ内のMarkdownファイルをAstroのsrc/contentフォルダにコピーしました．

3. Content Collectionsの設定

Hugoのfrontmatterの項目名とAstroのデフォルトの項目名が異なるため，AstroのContent Collectionsの設定を変える必要があります．

そこで，src/content.config.tsの内容を書き換えました．schemaの部分でfrontmatterの項目名を指定しています．

import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';

const blog = defineCollection({
  // Load Markdown and MDX files in the `src/content/blog/` directory.
  loader: glob({ base: './src/content/blog', pattern: '**/*.{md,mdx}' }),
  // Type-check frontmatter using a schema
  schema: ({ image }) =>
    z.object({
      title: z.string(),
      // Transform string to Date object
      date: z.coerce.date(),
      updatedDate: z.coerce.date().optional(),
      tags: z.array(z.string()).optional(),
      heroImage: image().optional(),
    }),
});

export const collections = { blog };

項目名の変更に伴い，src/componentsやsrc/pages内のコードも修正しました．

4. デプロイ

公式ドキュメントを参考に，GitHub Pagesにデプロイしました．

Astro側のドキュメントが充実していたので特に問題なく移行できました．

おまけ

5. Tailwind CSSの設定

ここを参考に，Tailwind CSSを導入しました．他のブログだと，古いバージョンのTailwind CSSについて書かれていることが多いので，注意が必要です．

また，Markdownのスタイルにも影響が出てしまうため，globals.cssでMarkdownに対して違うスタイルが適用されるようにしました． (具体的にはMarkdownの中身に対して#article-contentで囲い，globals.cssで#article-content > pなどのように指定しました．)

6. タグ関連のページを追加

公式のDocumentを参考にTagによる検索機能を設けました．

Tagページの生成 Tagsページの生成

7. SEO対策

src/components/BaseHead.astroにOGPなどのmetadataを追加しました．

具体的には以下の部分が追加したもの．

<!-- Open Graph / Facebook -->
<meta prefix="og: http://ogp.me/ns#" />
<meta property="og:title" content={title} />
<meta property="og:site_name" content={SITE_TITLE} />
{
  description ? <meta property="og:description" content={description} /> : null
}
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />
<meta property="og:url" content={canonicalURL.toString()} />
{
  image? (
    <meta
      property="og:image"
      content={new URL(image.src, Astro.site).toString()}
    />
  ) : (
    <meta
      property="og:image"
      content={new URL(logo.src, Astro.site).toString()}
    />
  )
}

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />
<meta name="twitter:url" content={canonicalURL.toString()} />
{
  image ? (
    <meta
      name="twitter:image"
      content={new URL(image.src, Astro.site).toString()}
    />
  ) : (
    <meta
      name="twitter:image"
      content={new URL(logo.src, Astro.site).toString()}
    />
  )
}
<meta name="twitter:image:alt" content={image?.alt || SITE_TITLE} />
<meta name="twitter:creator" content="@xsuz10074" />

8. コードブロックをちょっとよくする．

コードブロックの上にファイル名を表示したくなり，改良を加えることにしました．色々さがしている中でこの方の記事を見つけて，expressive-codeを導入することにしました．

最終的にできたもの

https://github.com/xsuz/xsuz.github.io

最後に

想像よりも簡単に移行できました．Hugoで構築したときは，何回もDeployが失敗して苦労しましたが，Astroでは特に問題なくできました．今後は，Astroでブログを書いていきたいと思います．