私のブログはDocusaurusで構築しています。Astro 2.0がリリースされたというニュースを見て乗り換えるといいことがあるかなと思い、Astroを試してみました。

私のブログの情報

使用フレームワーク: Docusaurus 2.2
ホスティング環境: CloudFlare Pages
URL: https://moritalous.pages.dev/

Docusaurus以外にもCloudscapeを使ったおもしろページもあります。
フォントをLINE SeedやJetBrains Mono、BIZ UDゴシックでカスタマイズしており、最近ちょっとずつ重たくなってきました。

Docusaurusの好きなところ

私のDocusaurusの気に入っているところを紹介します

Markdownでブログがかける
ブログ以外に固定ページやドキュメントも作成できる
UIのデザインも含まれており、カスタマイズしなくても利用できる、かつ、カスタマイズもできる

プロジェクトを新規作成してみた

Astro 2.0

Publickeyでは、以下のように紹介されています。

Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライブラリに対応した静的サイトジェネレータです。
ビルド時にWebサイト全体のHTMLが生成され、しかもそのHTMLには全くJavaScriptが含まれないか、もしくはWebブラウザ上での動作に必要な最小限のJavaScriptのみが残されます。
そのため、非常に高速に表示されるWebサイトの生成が可能である点が、Astroの大きな特徴です。

高速なのは魅力ですね！

basicsテンプレート

テンプレートを指定しないとbasicsテンプレートでプロジェクトが作成されます。

npm create astro@latest

tree -I node_modules my-astro-2-demo/

my-astro-2-demo/
├── astro.config.mjs
├── package.json
├── package-lock.json
├── public
│   └── favicon.svg
├── README.md
├── src
│   ├── components
│   │   └── Card.astro
│   ├── env.d.ts
│   ├── layouts
│   │   └── Layout.astro
│   └── pages
│       └── index.astro
└── tsconfig.json

5 directories, 10 files

layouts/Layout.astroがHTMLコンテンツ全体のレイアウトで、pages/index.astroがBodyタグ内のコンテンツです。

layouts/Layout.astro

---
export interface Props {
	title: string;
}

const { title } = Astro.props;
---

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="generator" content={Astro.generator} />
		<title>{title}</title>
	</head>
	<body>
		<slot />
	</body>
</html>
<style is:global>
	:root {
		--accent: 124, 58, 237;
		--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%);
	}
	html {
		font-family: system-ui, sans-serif;
		background-color: #F6F6F6;
	}
	code {
		font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
			Bitstream Vera Sans Mono, Courier New, monospace;
	}
</style>

pages/index.astro

---
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';
---

<Layout title="Welcome to Astro.">
	<main>
		<h1>Welcome to <span class="text-gradient">Astro</span></h1>
		<p class="instructions">
			To get started, open the directory <code>src/pages</code> in your project.<br />
			<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
		</p>
		<ul role="list" class="link-card-grid">
			<Card
				href="https://docs.astro.build/"
				title="Documentation"
				body="Learn how Astro works and explore the official API docs."
			/>
			<Card
				href="https://astro.build/integrations/"
				title="Integrations"
				body="Supercharge your project with new frameworks and libraries."
			/>
			<Card
				href="https://astro.build/themes/"
				title="Themes"
				body="Explore a galaxy of community-built starter themes."
			/>
			<Card
				href="https://astro.build/chat/"
				title="Community"
				body="Come say hi to our amazing Discord community. ❤️"
			/>
		</ul>
	</main>
</Layout>

<style>
	main {
		margin: auto;
		padding: 1.5rem;
		max-width: 60ch;
	}
	h1 {
		font-size: 3rem;
		font-weight: 800;
		margin: 0;
	}
	.text-gradient {
		background-image: var(--accent-gradient);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-size: 400%;
		background-position: 0%;
	}
	.instructions {
		line-height: 1.6;
		margin: 1rem 0;
		border: 1px solid rgba(var(--accent), 25%);
		background-color: white;
		padding: 1rem;
		border-radius: 0.4rem;
	}
	.instructions code {
		font-size: 0.875em;
		font-weight: bold;
		background: rgba(var(--accent), 12%);
		color: rgb(var(--accent));
		border-radius: 4px;
		padding: 0.3em 0.45em;
	}
	.instructions strong {
		color: rgb(var(--accent));
	}
	.link-card-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
		gap: 1rem;
		padding: 0;
	}
</style>

GitHub Pagesにそのままデプロイしました。　→　こちら

非常にシンプルな単一ページの静的サイトです。

blogテンプレート

次はブログ向けテンプレートです。

npm create astro@latest -- --template blog

tree -I node_modules my-astro-2-blog-demo/

my-astro-2-blog-demo/
├── astro.config.mjs
├── package.json
├── package-lock.json
├── public
│   ├── favicon.svg
│   ├── placeholder-about.jpg
│   ├── placeholder-hero.jpg
│   └── placeholder-social.jpg
├── README.md
├── src
│   ├── components
│   │   ├── BaseHead.astro
│   │   ├── Footer.astro
│   │   ├── Header.astro
│   │   └── HeaderLink.astro
│   ├── consts.ts
│   ├── content
│   │   ├── blog
│   │   │   ├── first-post.md
│   │   │   ├── markdown-style-guide.md
│   │   │   ├── second-post.md
│   │   │   ├── third-post.md
│   │   │   └── using-mdx.mdx
│   │   └── config.ts
│   ├── env.d.ts
│   ├── layouts
│   │   └── BlogPost.astro
│   ├── pages
│   │   ├── about.md
│   │   ├── blog
│   │   │   ├── index.astro
│   │   │   └── [...slug].astro
│   │   ├── index.astro
│   │   └── rss.xml.js
│   └── styles
│       └── global.css
└── tsconfig.json

9 directories, 28 files

basicsより複雑な構成となっています。

固定ページ：　src/pages
ブログ記事のレイアウト：　src/layouts/BlogPost.astro
ブログ記事：　src/content/blogディレクトリー

GitHub Pagesにそのままデプロイしました。　→　こちら

トップページ
ブログ一覧
ブログ記事

docsテンプレート

最後はドキュメント向けテンプレートです。

npm create astro@latest -- --template docs

tree -I node_modules my-astro-2-docs-demo/

my-astro-2-docs-demo/
├── astro.config.mjs
├── package.json
├── package-lock.json
├── public
│   ├── default-og-image.png
│   ├── favicon.svg
│   └── make-scrollable-code-focusable.js
├── README.md
├── src
│   ├── components
│   │   ├── Footer
│   │   │   ├── AvatarList.astro
│   │   │   └── Footer.astro
│   │   ├── HeadCommon.astro
│   │   ├── Header
│   │   │   ├── AstroLogo.astro
│   │   │   ├── Header.astro
│   │   │   ├── LanguageSelect.css
│   │   │   ├── LanguageSelect.tsx
│   │   │   ├── Search.css
│   │   │   ├── Search.tsx
│   │   │   ├── SidebarToggle.tsx
│   │   │   └── SkipToContent.astro
│   │   ├── HeadSEO.astro
│   │   ├── LeftSidebar
│   │   │   └── LeftSidebar.astro
│   │   ├── PageContent
│   │   │   └── PageContent.astro
│   │   └── RightSidebar
│   │       ├── MoreMenu.astro
│   │       ├── RightSidebar.astro
│   │       ├── TableOfContents.tsx
│   │       ├── ThemeToggleButton.css
│   │       └── ThemeToggleButton.tsx
│   ├── consts.ts
│   ├── content
│   │   ├── config.ts
│   │   └── docs
│   │       └── en
│   │           ├── introduction.md
│   │           ├── page-2.md
│   │           ├── page-3.md
│   │           └── page-4.md
│   ├── env.d.ts
│   ├── languages.ts
│   ├── layouts
│   │   └── MainLayout.astro
│   ├── pages
│   │   ├── index.astro
│   │   └── [...slug].astro
│   └── styles
│       ├── index.css
│       └── theme.css
└── tsconfig.json

14 directories, 40 files

blogテンプレートより更に複雑になってます。
本気でサイトを構築しようとすると規模がどんどん大きくなりそうですね。

GitHub Pagesにそのままデプロイしました。　→　こちら

トップページ
ダークモード

Docusaurus 2.0

Docusaurusに標準で用意されているテンプレートはclassicとfacebookの２つです。カスタムテンプレートを作成して使用することもできます。

classicテンプレートは単一ページ、ブログ、ドキュメントを全て作成することができます。

facebookテンプレートはMeta社向けのセットアップが入っているようです。

npx create-docusaurus@latest my-docsaurus classic

tree -I node_modules my-docusaurus/

my-docusaurus/
├── babel.config.js
├── blog
│   ├── 2019-05-28-first-blog-post.md
│   ├── 2019-05-29-long-blog-post.md
│   ├── 2021-08-01-mdx-blog-post.mdx
│   ├── 2021-08-26-welcome
│   │   ├── docusaurus-plushie-banner.jpeg
│   │   └── index.md
│   └── authors.yml
├── docs
│   ├── intro.md
│   ├── tutorial-basics
│   │   ├── _category_.json
│   │   ├── congratulations.md
│   │   ├── create-a-blog-post.md
│   │   ├── create-a-document.md
│   │   ├── create-a-page.md
│   │   ├── deploy-your-site.md
│   │   └── markdown-features.mdx
│   └── tutorial-extras
│       ├── _category_.json
│       ├── img
│       │   ├── docsVersionDropdown.png
│       │   └── localeDropdown.png
│       ├── manage-docs-versions.md
│       └── translate-your-site.md
├── docusaurus.config.js
├── package.json
├── package-lock.json
├── README.md
├── sidebars.js
├── src
│   ├── components
│   │   └── HomepageFeatures
│   │       ├── index.tsx
│   │       └── styles.module.css
│   ├── css
│   │   └── custom.css
│   └── pages
│       ├── index.module.css
│       ├── index.tsx
│       └── markdown-page.md
├── static
│   └── img
│       ├── docusaurus.png
│       ├── docusaurus-social-card.jpg
│       ├── favicon.ico
│       ├── logo.svg
│       ├── undraw_docusaurus_mountain.svg
│       ├── undraw_docusaurus_react.svg
│       └── undraw_docusaurus_tree.svg
└── tsconfig.json

13 directories, 39 files

固定ページ：　src/pagesディレクトリー
ブログ：　blogディレクトリー
ドキュメント：　docsディレクトリー

GitHub Pagesにそのままデプロイしました。　→　こちら

トップページ
ブログ
ドキュメント

Showcase比較

AstroもDocusaurusもどちらも利用者の実サイトを登録するShowcaseが用意されています。

Astroは見た目が様々ですが、Docusaurusはレイアウトに統一感がある（悪く言うと個性がない）ことがわかります。

Astro 2.0

Astro Showcase

Docusaurus 2.0

Docusaurus Showcase

PageSpeed Insights比較

GitHub Pagesにデプロイしましたので、ページ表示スピードを測定してみます。

Astro 2.0 (basicsテンプレート)

携帯電話
デスクトップ

Astro 2.0 (blogテンプレート)

携帯電話
デスクトップ

Astro 2.0 (docsテンプレート)

携帯電話
デスクトップ

Docusaurus 2.0 (単一ページ)

携帯電話
デスクトップ

Docusaurus 2.0 (ブログ)

携帯電話
デスクトップ

Docusaurus 2.0 (ドキュメント)

携帯電話
デスクトップ

まとめると以下の表のようになります。
Astro、Docusaurusどちらも良い結果でした。

対象	環境	パフォーマンス	ユーザー補助	おすすめの方法	SEO
Astro 2.0 basicsテンプレート	携帯電話	100	100	100	91
同上	デスクトップ	100	100	100	89
Astro 2.0 blogテンプレート	携帯電話	100	98	92	100
同上	デスクトップ	100	98	92	100
Astro 2.0 docsテンプレート	携帯電話	97	97	92	95
同上	デスクトップ	100	97	92	100
Docusaurus 2.0 単一ページ	携帯電話	92	98	100	94
同上	デスクトップ	100	98	100	100
Docusaurus 2.0 ブログ	携帯電話	94	100	100	97
同上	デスクトップ	100	100	100	100
Docusaurus 2.0 ドキュメント	携帯電話	94	98	100	97
同上	デスクトップ	100	98	100	100

ちなみに、Docusaurusベースで構築している私のブログの結果はこちら。

すごーく悪い！
色々調子に乗ってカスタマイズしたからですね。
AstroとDocusaurusの優劣ではなくて 使う側の問題 だということが分かりました。

まとめ

AstroとDocusaurusの違いが伝わりましたでしょうか。

Astroは爆速なサイトを好きなUIデザインで構築できる魅力があります。
DocusaurusはUIデザインもプリセットで含まれていますので、構築の手間はほぼなく、記事作成に集中でいます。

私の個人ブログの乗り換えについてですが、AstroではUIのデザインは自分で行う必要があるため、乗り換えの労力がかかりそうなことがわかりました。
Astroが爆速であることは確認できましたが、同時にDocusaurusも同じぐらい爆速でした。（個人ブログが遅いのは私の力量であることもわかりました。）

Docusaurusでも十分と判断し、私は乗り換えないことにしました。

Astro 2.0が出たのでDocusaurus 2.0からの乗り換えを検証した

私のブログの情報

Docusaurusの好きなところ

プロジェクトを新規作成してみた

Astro 2.0

basicsテンプレート

blogテンプレート

docsテンプレート

Docusaurus 2.0

Showcase比較

Astro 2.0

Docusaurus 2.0

PageSpeed Insights比較

Astro 2.0 (basicsテンプレート)

Astro 2.0 (blogテンプレート)

Astro 2.0 (docsテンプレート)

Docusaurus 2.0 (単一ページ)

Docusaurus 2.0 (ブログ)

Docusaurus 2.0 (ドキュメント)

まとめ