Astro + Netlify CMS

次の開発者と同じくらいマークダウンが好きですが、CMS の便利さを忘れがちです.ただし、個人的なプロジェクトや内部ツールの場合、完全なヘッドレス CMS セットアップに手を伸ばすことは正当化できません.構成には時間がかかりますが、さらに重要なことに、Jamstack サイトの場合、CMS 全体をソース コードと一緒に git に配置すると、時間を大幅に節約できます.

tl;dr; live demo を確認するか、 Github のコードに飛び込んでください.

git ベースの CMS の威力

私たちは Navillus の git ベースの CMS のアイデアの大ファンです.サイト全体が静的サイトとして展開されるように構築されている場合、コンテンツをロードするためにリモート サーバーからプルする必要があることはあまり意味がありません.すでに git で作業しています.

Our go-to content solutions: for internal projects (when we just need it to work) for client projects (when a clean, user friendly UI is a must) (when a file based CMS just won't cut it)

What tools are you always reaching for?

— Navillus ( )

で私たちをフォローしている人にとって、今日のブログ投稿はそれほど驚くことではないでしょう. Netlify CMS は、私たちがサイド プロジェクトや内部ツールに到達した最初のコンテンツ管理ツールです.セットアップとデプロイは非常に簡単で、サイトと一緒に静的 HTML としてデプロイされます.そして、あなたの前に、はい、管理パネルの JS バンドルを CDN からロードしていますが、必要に応じて NPM 経由で実際にインストールすることもできます.

始める前に

このデモは、優れた eleventy-netlify-boilerplate デモに基づいています. 11ty にも興味がある場合は、そのリポジトリを見て、11ty プロジェクトをセットアップする際のベスト プラクティスを学ぶことを強くお勧めします.

基本的なセットアップ

今日の目標は、Netlify CMS と統合する際の Astro 固有の詳細を強調することです.そのため、初期設定については深く掘り下げません. CMS を自分のサイトに追加するための Netlify CMS's の優れたドキュメントをチェックして、簡単な概要を確認してください.

このデモでは、CDN から netlify-cms ライブラリをロードすることにしましたが、前述の in the docs のように、代わりに NPM からインストールできます.その場合、Snowpack は本番ビルドでの JS のバンドルを処理します.
/admin/index.html と /admin/config.yml を含める場合、これらのファイルをドキュメントから Astro プロジェクトの /public フォルダーにコピーするだけです. Astro には、 /public ディレクトリ内のすべてが静的アセットとして含まれます.たとえば、 /public/admin/index.html に移動すると、 yoursite.com/admin ファイルが使用可能になります.

デモのブログ投稿

まず最初に、ブログ投稿のサポートをセットアップしましょう.

CMS でのブログ投稿の構成

CMS と Netlify Identity をすべてセットアップしたら、コンテンツの追加を開始します.デモ リポジトリを見ると、すべてのブログ投稿が /src/pages/posts ディレクトリに保存されていることがわかります.

Netlify CMS の場合、重要なのは、config.yml が正しいフォルダーを指していることを確認することです.

collections:
  # Our blog posts
  - name: "blog" # Used in routes, e.g., /admin/collections/blog
    label: "Post" # Used in the UI
    folder: "src/pages/posts" # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    slug: "{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
    fields: # The fields for each document, usually in front matter
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Author", name: "author", widget: "string", default: "Anonymous" }
      - { label: "Summary", name: "summary", widget: "text" }
      - { label: "Tags", name: "tags", widget: "list", default: ["post"] }
      - { label: "Body", name: "body", widget: "markdown" }

このデモの config.yml からの抜粋では、 folder が正しいディレクトリを指していることに注意してください.

Astro での読み込みとレンダリング

ローカル データの読み込みは、Astro.fetchContent API で処理されます.

export let collection: any;

export async function createCollection() {
    return {
        /** Load posts, sort newest -> oldest */
        async data() {
            const allPosts = Astro.fetchContent('./posts/*.md');
            return allPosts
                .sort((a, b) => new Date(b.date) - new Date(a.date));
        },

        /** Set page size */
        pageSize: 10,
    }
}

本当にそれだけです! fetchContent API は、一致するすべてのマークダウン ファイルをロードします.ここでは簡潔にするために RSS フィードのサポートを省略しましたが、デモ リポジトリ here で確認できます.

<Layout title={title} description={description}>
    <h1>{title}</h1>

    {collection.data.map((post) => (
        <PostPreview post={post} />
    ))}
</Layout>

ここでは、$blog.astro テンプレートが上記で読み込まれたデータを取得し、投稿プレビューのリストをレンダリングしています. React (または JSX) の経験がある場合、これは非常になじみ深いものです.ブラケット {} はプレーンな古い JS をテンプレートにエスケープするために使用され、data() にロードされた投稿をマッピングし、データを PostPreview コンポーネントに渡します.

個々のブログ投稿はどうですか？

デモ リポジトリのサンプル blog posts の 1 つを見てください. 11ty 、 Jekyll 、または実際に他の静的サイトジェネレーターで使用したのと同じように、フロントマターでブログ投稿をレンダリングするために使用されるテンプレートを定義します.

注意、Astro はベータ版です!

Astro はまだベータ版であり、予定されている大きなアップデートの 1 つは dynamic routing へのアップデートです.ルーティング設定は近い将来変更される可能性があるため、現時点では省略しますが、お気軽に demo repo を調べたり、 で質問してください.

ここでは、/author/:id または /tags/:tag のルーティング方法について詳しくは説明しませんが、ルーティング API が完成したら、フォローアップのブログ投稿に注目してください.