WordPressからAstroへ移行した話（2）サイト基本設定とカスタマイズ

はじめに

前回はAstroPaper v5のクローンからローカル動作確認までを紹介しました。
今回はデフォルト設定から自分のサイト用にカスタマイズしていきます。

config.ts を書き換える

サイトのメタ情報は src/config.ts の SITE オブジェクトにまとまっています。

// src/config.ts
export const SITE = {
  website: "https://sakura86.com/",
  author: "たーさん",
  profile: "",
  desc: "主にパソコン、スマートフォン、ゲーム等についてまとめています。本ページはプロモーションが含まれます",
  title: "sakura86.com",
  ogImage: "astropaper-og.jpg",
  lightAndDarkMode: true,
  postPerIndex: 7,
  postPerPage: 7,
  scheduledPostMargin: 15 * 60 * 1000,
  showArchives: true,
  showBackButton: true,
  editPost: {
    enabled: false,
    text: "Edit page",
    url: "",
  },
  dynamicOgImage: true,
  dir: "ltr",
  lang: "ja",
  timezone: "Asia/Tokyo",
} as const;

主要な設定項目の説明です。

項目	説明
`website`	サイトのURL（末尾に`/`が必要）
`author`	著者名
`desc`	サイトの説明文（metaタグに使われる）
`title`	サイトのタイトル
`lang`	言語。日本語サイトなら`"ja"`
`timezone`	タイムゾーン。`"Asia/Tokyo"`
`postPerIndex`	トップページに表示する記事数
`postPerPage`	記事一覧ページのページあたり記事数

ソーシャルリンクを削除する

デフォルトのAstroPaperはHeaderにGitHub・TwitterなどのSNSリンクが表示されます。
不要な場合は src/constants.ts を空配列にします。

// src/constants.ts
export const SOCIALS: Social[] = [] as const;

トップページを日本語化する

src/pages/index.astro を開くと、デフォルトではH1に “Mingalaba”（ミャンマー語の挨拶）が入っています。
これを自分のサイト名に変更します。

変更箇所：

H1テキスト: "Mingalaba" → サイト名
説明文: 英語のデフォルト文 → 日本語のサイト概要
AstroPaperのREADMEへのリンク段落: 削除

記事一覧ページの説明文を変更する

src/pages/posts/[...page].astro で記事一覧ページの説明文を設定できます。

pageDesc="記事一覧"

Aboutページを差し替える

src/pages/about.md がAboutページの本文です。
WordPressで使っていたAboutページの内容をそのままMarkdownに貼り付ければOKです。

まとめ

基本的なカスタマイズは src/config.ts・src/constants.ts・src/pages/ 内の数ファイルだけで完結します。

次回はWordPressからエクスポートした331件の記事を一括変換するスクリプトを紹介します。