zenn-astro-exampleのREADMEの話

zenn-astro-example とは

zenn-astro-example は、Zenn CLI で書いた記事を Astro でビルドするためのプロジェクトテンプレートです。

https://zenn.dev/zenn/articles/zenn-cli-guide

Zenn向けに書いた記事と、その他の記事を1つのリポジトリで一元管理できるようになります。
指定した記事のみをZennに公開し、指定した記事のみをAstroでビルドすることができます。
Zennへの依存を減らすことで、記事のバックアップなどが容易になります。

使い方

新規の Zenn CLI プロジェクトを作成する

1. git clone https://github.com/fa0311/zenn-astro-example.git
2. .git ディレクトリを削除します
3. pnpm install を実行します
4. pnpx zenn init

既存の Zenn CLI プロジェクトに組み込む

1. git clone https://github.com/fa0311/zenn-astro-example.git を別のディレクトリで実行します
2. astro ディレクトリを既存の Zenn CLI プロジェクトのルートディレクトリにコピーします
3. astro ディレクトリをmonorepoとして管理するための設定を追加します(このテンプレートではpnpm workspacesを利用しています)
4. ...

Github Actions で公開する

1. .github/workflows/astro.yml を Zenn CLI プロジェクトの .github/workflows/astro.yml にコピーします

記事を書く

pnpm run new:article を実行することで、記事を作成することができます。

markdown ファイルのmeta情報に static: true を追加することで、Astro でビルドされるようになります。meta情報が存在しない場合は、ビルドされません。

static: true かつ published: true の記事は canonical リンクが付与され Astro でビルドされたページにミラーページであることを示すヘッダーが付与されます。
つまり、検索エンジンはZennの記事を正規のページとして扱うようになります。
例: what-is-slug

依存

Zenn

残念ながら、Astro でのビルドも完全にZennに依存していないわけではありません。
zenn-embed-elements に依存しており embed.zenn.studio にリクエストを送信する必要があります。

git

git, github に依存しており、内部で git log, git remote を実行します。
git log は記事の更新日時を取得するために使用されており、git remote は記事のリンクを生成するために使用されています。

カスタマイズ

src/layouts/Layout.astro は編集することをお勧めします。
Navigation, Articles コンポーネントには type プロパティがあり他のスタイルを用意しています。呼び出し元のファイルを編集することで、スタイルを変更できます。

TRAILING_SLASH

Astro には trailingSlash という設定がありますが、これは現在壊れているので never に設定しています。

https://github.com/withastro/astro/issues/13033

trailingSlash の不具合を吸収するユーティリティ関数を用意しており、.env ファイルの TRAILING_SLASH を変更することで挙動を変更できます。

サンプルページ

ここからどうぞ
https://fa0311.github.io/zenn-astro-example/topics/zenn/