個人ブログを Astro で構築する

Published:

Table of contents

Open Table of contents

はじめに

勉強も兼ねて Astro フレーワムワークで個人ブログを作成します。テーマは Vercel Templates にあった AstroPaper を利用し、タイトルや日本語対応できていない部分を修正します。

前提条件

公式ドキュメンの記載より引用します。

AstroPaper テンプレートを利用した Astro ブログを構築する

npm create astro@latest -- --template satnaing/astro-paper コマンドでテンプレートテーマを利用したプロジェクトを作成します。
作成時に複数の質問がありますが、プロジェクト名以外はデフォルトを選択しました。

$ npm create astro@latest -- --template satnaing/astro-paper

 astro   Launch sequence initiated.

   dir   Where should we create your new project?
         ./{project-name}
      ◼  tmpl Using satnaing/astro-paper as project template

    ts   Do you plan to write TypeScript?
         Yes

   use   How strict should TypeScript be?
         Strict

  deps   Install dependencies?
         Yes

   git   Initialize a new git repository?
         Yes

      ✔  Project initialized!
         ■ Template copied
         ■ TypeScript customized
         ■ Dependencies installed
         ■ Git initialized

  next   Liftoff confirmed. Explore your project!

         Enter your project directory using cd ./{project-name} 
         Run npm run dev to start the dev server. CTRL+C to stop.
         Add frameworks like react or tailwind using astro add.

         Stuck? Join us at https://astro.build/chat

╭─────╮  Houston:
│ ◠ ◡ ◠  Good luck out there, astronaut! 🚀
╰─────╯
➜  ~

プロジェクトへ移動し、 npm run dev コマンドで開発サーバーを起動します。

$ cd {project-name}
$ npm run dev

> {project-name}@4.2.0 dev
> astro dev

11:00:55 [vite] Re-optimizing dependencies because vite config has changed

 astro  v4.2.1 ready in 280 ms

┃ Local    http://localhost:4321/
┃ Network  use --host to expose

11:00:55 watching for file changes...

http://localhost:4321/ へアクセスするとブログが確認できました。
ここから必要な情報を更新します。

サイト情報を更新する

src/config.ts ファイルを修正します。

トップページを更新する

src/pages/index.astro ファイルのサイト紹介文言を修正します。ソーシャルリンクは、 src/config.ts ファイルで有効になっているものを表示するようになっていたため、修正不要でした。

フッターを変更する

src/components/Footer.astro ファイルを修正します。フッターのコピーライトへサイト名リンク追加します。 サイトタイトルは、 src/config.ts ファイルで定義した値を利用します。
import { SITE } from "@config" で定義を読み込み、 {SITE.title} と記載します。

+ import { SITE } from "@config";
 <div class="copyright-wrapper">
-  <span>Copyright &#169; {currentYear}</span>
-  <span class="separator">&nbsp;|&nbsp;</span>
-  <span>All rights reserved.</span>
+  <span>&#169; {currentYear} <a href="/">{SITE.title}</a></span>
 </div>

フォントを追加する

/tailwind.config.cjs ファイルへ system-ui, ヒラギノ角ゴ ProN を追加します。

  fontFamily: {
-   mono: ["IBM Plex Mono", "monospace"],
+   mono: ["system-ui", "Hiragino Kaku Gothic ProN", "IBM Plex Mono", "monospace"],
  },

フォントを変更すると Tag の表示が乱れたので /src/components/Tag.astro の幅を修正します。

-   &nbsp;<span>{tag}</span>
+   &nbsp;&nbsp;<span>{tag}</span>

日付表示形式を変更する

日付表示形式を YYYY-MM-DD へ変更するため、 /src/components/Datetime.tsx ファイルを修正します。

  const FormattedDatetime = ({ pubDatetime, modDatetime }: DatetimesProps) => {
    const myDatetime = new Date(
      modDatetime && modDatetime > pubDatetime ? modDatetime : pubDatetime
    );
  
-   const date = myDatetime.toLocaleDateString(LOCALE.langTag, {
-     year: "numeric",
-     month: "short",
-     day: "numeric",
-   });
-   const time = myDatetime.toLocaleTimeString(LOCALE.langTag, {
-     hour: "2-digit",
-     minute: "2-digit",
-   });
+    const year = myDatetime.getFullYear();
+    const month = String(myDatetime.getMonth() + 1).padStart(2, '0');
+    const day = String(myDatetime.getDate()).padStart(2, '0');
+    const date = `${year}-${month}-${day}`;
  
    return (
      <>
-       <time dateTime={myDatetime.toISOString()}>{date}</time>
-       <span aria-hidden="true"> | </span>
-       <span className="sr-only">&nbsp;at&nbsp;</span>
-       <span className="text-nowrap">{time}</span>
+       <time>{date}</time>
      </>
    );
};

OGP を日本語対応する

テンプレートがビルド時に自動で OGP を作成してくれますが、日本語が文字化けするため、画像へ登録するフォントを変更します。

日本語用のフォント Noto Sans Japanese をダウンロードします。

通常用とボールド用のフォントを .ttf 拡張子から、軽量な .woff に変換します。
変換にはフリーのオンラインサイト Convertio を利用しました。

変換後にフォントファイルを public/fonts ディレクトリへ格納します。

続いて、 src/utils/generateOgImages.tsx のフォント参照元を修正します。

+ import fs from "fs";
  const fetchFonts = async () => {
    // Regular Font
-   const fontFileRegular = await fetch(
-     "https://www.1001fonts.com/download/font/ibm-plex-mono.regular.ttf"
-   );
-   const fontRegular: ArrayBuffer = await fontFileRegular.arrayBuffer();
+   const fontRegular: ArrayBuffer = fs.readFileSync(
+     "public/fonts/NotoSansJP-Regular.woff"
+   );
  
    // Bold Font
-   const fontFileBold = await fetch(
-     "https://www.1001fonts.com/download/font/ibm-plex-mono.bold.ttf"
-   );
-   const fontBold: ArrayBuffer = await fontFileBold.arrayBuffer();
+   const fontBold: ArrayBuffer = fs.readFileSync(
+     "public/fonts/NotoSansJP-Bold.woff"
+   );

    return { fontRegular, fontBold };
  };
  const options: SatoriOptions = {
    width: 1200,
    height: 630,
    embedFont: true,
    fonts: [
      {
-       name: "IBM Plex Mono",
+       name: "Noto Sans JP",
        data: fontRegular,
        weight: 400,
        style: "normal",
      },
      {
-       name: "IBM Plex Mono",
+       name: "Noto Sans JP",
        data: fontBold,
        weight: 600,
        style: "normal",
      },
    ],
  };

修正後、/src/content/blog/*.md の任意の投稿のタイトルを日本語に変更します。
投稿タイトルを変更するには、 *.md ファイルの先頭の方にある title: を変更します。
変更後、 npm dev build でビルドを実行し、生成されたOG画像を確認します。デフォルトの出力先は、 /dist/posts/{日本語を含む投稿タイトル}.png です。 日本語タイトルが文字化けすることなく表示されました。

まとめ

テンプレートテーマを利用した Astro ブログを無事構築することができました。OGP の日本語対応で地味にハマったので参考URLの記事が非常に参考になりました。感謝です。

参考URL