個人ブログを Astro で構築する
はじめに
勉強も兼ねて Astro フレーワムワークで個人ブログを作成します。テーマは Vercel Templates にあった AstroPaper を利用し、タイトルや日本語対応できていない部分を修正します。
前提条件
公式ドキュメンの記載より引用します。
- Node.js -
v18.14.1
またはそれ以上。 - テキストエディタ - VS Code と公式 Astro 拡張機能を推奨します。
- ターミナル - Astro は、コマンドラインインターフェイス (CLI) からアクセスします。
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
ファイルを修正します。
- タイトル、URL などのサイト情報
- 言語
- ソーシャルリンクの有効化/無効化
トップページを更新する
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 © {currentYear}</span>
- <span class="separator"> | </span>
- <span>All rights reserved.</span>
+ <span>© {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
の幅を修正します。
- <span>{tag}</span>
+ <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"> at </span>
- <span className="text-nowrap">{time}</span>
+ <time>{date}</time>
</>
);
};
OGP を日本語対応する
テンプレートがビルド時に自動で OGP を作成してくれますが、日本語が文字化けするため、画像へ登録するフォントを変更します。
日本語用のフォント Noto Sans Japanese をダウンロードします。
通常用とボールド用のフォントを .ttf
拡張子から、軽量な .woff
に変換します。
変換にはフリーのオンラインサイト Convertio を利用しました。
- NotoSansJP-Regular
.ttf
-> NotoSansJP-Regular.woff
- NotoSansJP-Bold
.ttf
-> NotoSansJP-Bold.woff
変換後にフォントファイルを public/fonts
ディレクトリへ格納します。
public/fonts/NotoSansJP-Regular.woff
public/fonts/NotoSansJP-Bold.woff
続いて、 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 の記事が非常に参考になりました。感謝です。