EmDashのサイト名が "My Blog" のまま変わらない問題を解決する

EmDashを使い始めて、まず最初につまずくポイントのひとつが「管理画面でサイト名を変えたのに、ブログ上では "My Blog"のまま変わらない」という問題だ。※2026.04.05現在

今回はその原因と解決方法をまとめる。

なぜ変わらないのか

EmDashの管理画面には「Settings」からサイトタイトルを設定する項目がある。しかし公式のスターターテンプレート(blog テンプレート)は、この設定値を参照していない。

代わりに、テーマ側の各ファイルに"My Blog"という文字列がべた書きされている。

確認してみると、対象は4ファイルだ。

src/layouts/Base.astro
src/pages/index.astro
src/pages/posts/[slug].astro
src/pages/rss.xml.ts

プロジェクトルートで以下のコマンドを叩くと一発で確認できる。

grep -r "My Blog" src/

解決策①:config.tsで一元管理する(簡単版)

まずsrc/config.tsを作成して、サイト名を一箇所で管理できるようにする。

cat > src/config.ts << 'EOF'
export const SITE_TITLE = "あなたのブログ名";
export const SITE_DESCRIPTION = "ブログの説明";
EOF

あとは各ファイルで "My Blog" をこの定数に置き換えるだけだ。次回からサイト名を変えたいときも config.ts の1行を直すだけでいい。

ただしこの方法には欠点がある。管理画面のSettings で変更してもサイトには反映されない。コードを直して再デプロイが必要になる。

解決策②:getSiteSettings() で管理画面と連動させる(完全版)

EmDashにはgetSiteSettings()という関数が用意されており、管理画面で設定した値をコードから取得できる。

これを使えば、管理画面でサイト名を変えるだけで即座に反映される。

・Base.astro

フロントマターの中でこう書く。

import { getSiteSettings } from "emdash";
const settings = await getSiteSettings();
const siteTitle = settings.title ?? "デフォルトのブログ名";

?? は「左辺がundefinedまたはnullのときだけ右辺を使う」という意味なので、管理画面で設定済みであればその値が使われ、未設定のときだけフォールバックが使われる。

・pages/index.astro

emdashからのimportにgetSiteSettingsを追加して、フロントマター内で呼び出す。

import { getEmDashCollection, getEntryTerms, getSiteSettings } from "emdash";

const settings = await getSiteSettings();

Baseコンポーネントへの渡し方はこうなる。

<Base title={settings.title ?? "あなたのブログ名"} description={settings.tagline ?? ""}>

・pages/posts/[slug].astro

SEOメタを生成している箇所で使う。importにgetSiteSettingsを追加して:

import {
	getEmDashEntry,
	getEmDashCollection,
	getEntryTerms,
	getSeoMeta,
	getSiteSettings,
} from "emdash";

getSeoMetaを呼ぶ前にこう書く。

const settings = await getSiteSettings();
const seo = getSeoMeta(post, {
	siteTitle: settings.title ?? "あなたのブログ名",
	siteUrl: Astro.url.origin,
	path: `/posts/${slug}`,
	defaultOgImage: featuredImageUrl,
});

pages/rss.xml.ts

APIRouteの関数内で呼び出す。

import { getEmDashCollection, getSiteSettings } from "emdash";

export const GET: APIRoute = async ({ site, url }) => {
	const siteUrl = site?.toString() || url.origin;
	const settings = await getSiteSettings();
	const siteTitle = settings.title ?? "あなたのブログ名";
	// 以下略

まとめ

EmDash v0.1.0のブログテンプレートはサイト名がハードコードされているため、管理画面の設定だけでは変わらない。getSiteSettings()を使って各ファイルを書き換えることで、管理画面との連動が実現できる。

変更が必要なファイルは4つだが、それぞれ数行の修正で済む。EmDashはまだベータ段階なので、将来のバージョンではテンプレート側で最初からこの対応がされることが期待される。

No comments yet