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

[私のブログ](https://moritalous.pages.dev/)はDocusaurusで構築しています。[Astro 2.0がリリースされた](https://www.publickey1.jp/blog/23/astro_20content_cllectionsmarkdownhybrid_rendering.html)というニュースを見て乗り換えるといいことがあるかなと思い、Astroを試してみました。

# 私のブログの情報

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

[Docusaurus](https://docusaurus.io/)以外にも[Cloudscape](https://cloudscape.design/)を使ったおもしろページもあります。
フォントを[LINE Seed](https://seed.line.me/index_jp.html)や[JetBrains Mono](https://www.jetbrains.com/ja-jp/lp/mono/)、[BIZ UDゴシック](https://github.com/googlefonts/morisawa-biz-ud-gothic)でカスタマイズしており、最近ちょっとずつ重たくなってきました。

# Docusaurusの好きなところ

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

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

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

## Astro 2.0

[Publickey](https://www.publickey1.jp/blog/23/astro_20content_cllectionsmarkdownhybrid_rendering.html)では、以下のように紹介されています。

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

高速なのは魅力ですね！


### basicsテンプレート

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

```
npm create astro@latest
```

```shell: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タグ内のコンテンツです。

<details>
<summary>layouts/Layout.astro</summary>

```html
---
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>
```

</details>

<details>
<summary>pages/index.astro</summary>

```html
---
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>
```

</details>


GitHub Pagesにそのままデプロイしました。　→　[こちら](https://moritalous.github.io/my-astro-2-demo/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/7d1c78c8-1429-2bb9-d569-705e7781a9b8.png)

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


### blogテンプレート

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

```shell
npm create astro@latest -- --template blog
```

```shell: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にそのままデプロイしました。　→　[こちら](https://moritalous.github.io/my-astro-2-blog-demo/)

* トップページ
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/9c01f02e-3887-833d-1b35-f2f3aa92c1b8.png)

* ブログ一覧
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/de373122-aa63-0446-2f6b-62a4555cd0e8.png)

* ブログ記事
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/2cef5444-f715-c86f-5803-a1aeb443fdbb.png)


### docsテンプレート

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

```shell
npm create astro@latest -- --template docs
```

```shell: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にそのままデプロイしました。　→　[こちら](https://moritalous.github.io/my-astro-2-blog-demo/)

* トップページ
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/51893d97-36f9-e8c0-cdba-5feecb762695.png)

* ダークモード
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/631690ce-f03e-3aff-eeea-cd651e2ac733.png)


## Docusaurus 2.0

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

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

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

```shell
npx create-docusaurus@latest my-docsaurus classic
```

```shell: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にそのままデプロイしました。　→　[こちら](https://moritalous.github.io/my-docusaurus/)

* トップページ
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/d950960d-b85e-0d26-26c8-ffa2368e87b7.png)

* ブログ
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/6fc9bef1-90d0-a8b9-004a-47f785e63cd8.png)

* ドキュメント
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/a8b5d58d-f853-60e8-1f30-42dc064a51cc.png)

# Showcase比較

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

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

## Astro 2.0

[Astro Showcase](https://astro.build/showcase/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/e1657a4c-3563-2b8f-02ee-cd175818f910.png)

## Docusaurus 2.0

[Docusaurus Showcase](https://docusaurus.io/showcase)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/de50f97f-b0db-45d2-99d0-2e2f4170b8dc.png)


# PageSpeed Insights比較

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

## Astro 2.0 (basicsテンプレート)

* 携帯電話
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/e81d20ae-5cb9-8679-397a-abf0460f3af1.png)

* デスクトップ
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/775ac34f-549a-61e0-3e3b-5d0b9f918059.png)


## Astro 2.0 (blogテンプレート)

* 携帯電話
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/74323ea3-140c-6656-97e0-34b5af7e5fae.png)

* デスクトップ
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/f1b8660a-717d-f26b-8f18-e66700f64b30.png)


## Astro 2.0 (docsテンプレート)

* 携帯電話
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/0708251d-c59d-31fd-6a28-cf6e9a64978e.png)


* デスクトップ
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/c67d4c6e-9276-c7f5-7617-8d46b94bccdf.png)


## Docusaurus 2.0 (単一ページ)

* 携帯電話
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/9d2a466b-07dc-c25b-3b36-8a9ba0d228f9.png)

* デスクトップ
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/7a98eea2-8b80-f53f-33c3-ef825fd9a06b.png)


## Docusaurus 2.0 (ブログ)

* 携帯電話
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/6b1ae49f-00cd-e9c4-cffc-6faa72cc8e2f.png)

* デスクトップ
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/5a2862bf-1a93-0e06-b4a5-1b7931cf9a8f.png)


## Docusaurus 2.0 (ドキュメント)

* 携帯電話
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/d41a86bd-6555-118b-2d81-24c51ad7b381.png)

* デスクトップ
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/f7e61895-31b2-4835-776c-79f612fc689d.png)

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

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

---

ちなみに、Docusaurusベースで構築している[私のブログ](https://moritalous.pages.dev/)の結果はこちら。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/27635d74-c1b0-2c40-3929-17021c7acb27.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41574/96c6446a-c499-d24c-8de4-640df5d62fe6.png)

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


# まとめ

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

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

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

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