概要

TinaCMS を既存の Astro ブログに導入してみた。結果信じられないくらい便利になったので、そのとき起こったエラーとかを置いておく。

今回出てくるやつら

TinaCMS

• 公式サイト : https://tina.io

今回の目玉。Git-based というか GitHub-based な CMS。CMSによる更新はすべて GitHub のリポジトリに push される。それゆえ Visual なエディタじゃないとだめな人には向いてない。逆に「全部 markdown で良いです。でもわざわざ投稿するのに毎回毎回エディタ開いてエディタで編集して git push はちょっと・・・」な人におすすめ。GitHub にアクセスできるならスマホでもブログ編集ができるようになる。

Astro

• 公式サイト : https://astro.build

今回 TinaCMS を導入したプロジェクトで使われているやつ。TinaCMS 的には Astro はそこまでメジャーじゃないのか、初期化の際の選択肢には出てこなかった。（ので Other を選ぶ）。アプデが早すぎて気づいたらメジャーバージョンすら上がっている…のは流石に私がブログを書かなさすぎるからか。でも少なくとも Rust とか Go とかほど「おっ、アプデや。何が新しくなったんやろ」とはならないくらいには結構頻繁なイメージ。

Cloudflare Pages

• 公式サイト : https://pages.cloudflare.com

それ、GitHub pages で良くないですか？に対しての反論は私は持ち合わせていないけれど、なんとなく信頼して使わせてもらっているやつ。今回は環境変数の関係上、これにも変更があった。

手順を思い出しながら

いつの日か、ブログを作った。そもそも Zenn とかで良いのは否定できないけれど、自分の書いたものくらいは自分で管理したかったんだと思う。それで Astro と Cloudflare Pages で適当に組んだブログだが…これは使い勝手が悪い。

Astro のブログコンテンツの保存先は src/content 内。Cloudflare Pages のブログ更新のトリガーが GitHub のリポジトリの main ブランチの更新…とかにしているせいで、ブログの記事を追加するためにはフォルダに入っていって md を置いてgit push。ちょっとポータビリティ低めでめんどくさい。

今調べたら Zenn でも GitHub で管理する機能があるっぽいけどそれは置いておくとして。

• https://zenn.dev/zenn/articles/connect-to-github-publication

ってなわけで CMS を模索。Astro でも CMS が紹介されているのでそこから探した結果、今回選んだ TinaCMS になった。自分でできる限り管理したい、とりわけ GitHub に md ファイルが蓄積していく形が割と理想だったので。

• https://docs.astro.build/ja/guides/cms/

早速実践と思い、ページを確認すると Astro と TinaCMS 両方で記事がある

• https://docs.astro.build/ja/guides/cms/tina-cms/
• https://tina.io/docs/frameworks/astro

書いてある内容が若干違う気もするが…とりあえず初期化コマンドを打つ。

pnpm dlx @tinacms/cli@latest init

質問に適当に答えていくと色々つくられる。多分 tinaフォルダとか。

その後、TIna CMS を起動したいので package.json のコマンドを一部変更する。

- "dev": "astro dev --host",
+ "dev": "tinacms dev -c \"astro dev --host\"",
- "build": "astro build",
+ "build": "tinacms build && astro build",

基本 tinacms を最初に起動する感覚。

そういえば、Tina を Cloud 版で使用する場合はここから

• https://app.tina.io

プロジェクトを作成し、GitHub のアカウントで入れば基本変な設定はいらないはず。ブランチを設定するときはめんどいかもしれないけれど、今回は main ブランチを前提にする。

ローカルで、なおかつ Tina Cloud の CMS を使う場合は、バックエンドの設定の初期化をする

pnpm dlx @tinacms/cli@latest init backend

色々できるが、.env に Tina Cloud のページから取ってこれる client id と token を書いておく。 変数名は適当に…。

TINA_CLIENT_ID="clientId"
TINA_TOKEN = "token"

これは、 tina/config.tsで使用する。

export default defineConfig({
    clientId: process.env.TINA_CLIENT_ID,
    token: process.env.TINA_TOKEN,

...

その後 TinaCloud に localhost:4321 を Site URL に登録しておく。

そのうえで、tinacms build とか tinacms dev をすれば https://{サイトのURL}/adminかhttps://{サイトのURL}/admin/index.htmlで開けると思われる。

ローカルで使用することはないにせよ、tina/config.tsで使用した環境変数名は、Cloudflare Pages とかで設定できるので process から取れるようにする。

export default defineConfig({
    clientId: process.env.TINA_CLIENT_ID,
    token: process.env.TINA_TOKEN,

...

これは TinaCloud から取ってきて、Cloudflare Pages の環境変数設定で設定しておく。

以上でできるはず。なお、エラーが出た場合は、何回か TinaCloud 側のプロジェクトを再作成してみたりするとうまくいく。

draft の実装

TinaCMS は本当にシンプルで良い。draft の機能すらないレベルでシンプル。最高。 とはいえこれは機能がないというか、draft くらいは自分で実装しろって話である。 もし、プロジェクト側で draft を boolean で管理しており、Markdown の Frontmatter でオンオフを設定するようなら TinaCMS もそれに乗っかれる。tina/config.ts 次のようなフィールドを置く。

export default defineConfig({
   ...
   schema: {
       collections: [
           {
               name: "post",
               ...
               fields: [
                   {
                       type: "boolean",
                       name: "draft",
                       label: "Draft",
                       required: "false"
                   }
               ]
           }
       ]
   }

このフィールドは、記事を書く際に Frontmatter に設定される。md で表現できる範囲でなら様々な方が設定できる。

おわりに

これからは適当に週報でも書いていこうかなって。