ブログ構築

基本的には「Astro v2とTinaCMSでシンプルに作るブログサイト」を見ながら構築しています。

Astroのインストール

今回はAstroPaperを使用するため指定します。

yarn create astro--template satnaing / astro - paper

TinaCMSのインストール

上記でインストールしたAstroのフォルダへ移動してTinaCMSをインストールします。

npx @tinacms/cli@latest init

インストール後の設定

Astroの設定

src/config.ts

(省略)
export const LOCALE = {
  lang: "ja",
  langTag: ["ja-JA"]
}
(省略)

TinaCMSの設定

tina/config.ts

(省略)
schema: {
  collections: [
    name: "post",
    label: "Posts",
    path: "src/content/blog",
    fields: [
      // 以下を追加
      {
        name: "draft",
        label: "Draft",
        required: true,
      },
      {
        name: "pubDatetime",
        label: "Published",
        type: "datetime",
        required: true,
      },
      {
        name: "tags",
        label: "Tags",
        type: "string",
        list: true,
      },
      {
        name: "description",
        label: "Description",
        type: "string",
        required: true,
      },
      {
        type: "boolean",
        name: "featured",
        label: "Featured",
        required: true,
      }
      (省略)
    ]
  ]
}

Cloudflareの設定

GitHubのブログ用のリポジトリを連携し、mainブランチに変更が入るとデプロイするようにしています。

TinaCMS用のClient IDとContent(Read only)のTokenを環境変数へ設定します。

躓いた点は、Yarnのバージョンを環境変数で指定しない場合はビルドでコケてしまいます。ここはこのブログに助けられました。環境変数で`YARN_VERSION=1`を指定することにより対処できました。

また、ビルド時に日時のズレが起きないよう環境変数に`TZ=Asia/Tokyo`を設定しています。

Astroでブログを再構築した