１．はじめに

本記事では前回の記事で作成したBlogページをNetlify CMSを使って、実際に記事を投稿していきたいと思います。

１．１．Netlify CMSとは

https://www.netlifycms.org/docs/intro/

Netlify CMSとはオープンソースのコンテンツ管理システムです。
Netlify CMSのドキュメントを見ると以下のように紹介されています。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Netlify CMSは、フレンドリーなUIと直感的なワークフローでエディタに提供できるGitワークフロー用のオープンソースのコンテンツ管理システムです。静的なサイトジェネレーターと組み合わせて使用することで、より迅速で柔軟性の高いウェブプロジェクトを作成することができます。コンテンツはコードと一緒に Git リポジトリに保存されるので、バージョン管理やマルチチャンネルパブリッシングが容易になり、Git で直接コンテンツの更新を処理することができます。

その中核をなすNetlify CMSはオープンソースのReactアプリで、GitHub、GitLab、またはBitbucket APIを使用してGitワークフローのラッパーとして機能します。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

ざくっと言ってしまえば、Blog記事を投稿する際にGitHubやGitLab上にコンテンツを直接アップロードする代わりにWebの管理画面を提供してくれるシステムです（Gitワークフローのラッパープログラム）。Blog記事を投稿する際に、Gitの事をしらない人でも投稿がしやすくなります。

主な特徴（利点）は以下の通りです。

高速なウェブベースのUI。リッチテキスト編集、リアルタイムプレビュー、ドラッグ＆ドロップでのメディアアップロードが可能。
プラットフォームにとらわれない：ほとんどの静的なサイトジェネレーターで動作する。
簡単なイストール。
モダンな認証。GitHub、GitLab、またはBitbucketとJSONウェブトークンを使用できる

では実際に記事を投稿したいと思います。

２．アカウントの登録

まず初めにBlog記事を投稿するためのアカウントをNetlify CMSに登録します。今回はGitHubのアカウントを利用したいと思います。

Netlifyの管理画面にアクセスし、[Site Settings]を選択。その後、[Identity] -> [Registration]メニューを選択します。

[External Providers]から[Add provider]より"GitHub"を選択します。

「user default configuration」を選択し、[Enable GitHub]ボタンを押します。

登録が成功すると、以下のようにExternal ProvidersとしてGitHubが表示されます。

これでGitHUBのアカウントでログインできるようになりました。

３．Blog記事の投稿

Blog記事を投稿するためにNetlify CMSの管理画面にログインします。Netlify CMSの管理画面は以下のURLよりログインする事が可能です。

=============================

https://<サイトのURL>/admin/

=============================

アクセスすると以下のような認証画面が表示されます。[Continue with GitHub]を選択して、GitHubのアカウントでログインしましょう。

ログインが完了すると、以下のような管理画面が表示されます。[Posts]を選択して、その後[New Posts]を選択すると記事の投稿（編集画面）に遷移します。

Netlify CMSの画面は左側でテキストを入力すると右側でリアルタイムプレビューが表示され、記事内容を視覚的に確認をしながら記事の投稿を行うことが可能です。

記事の編集が終わったら「Publish」ボタンから「Publish now」を選択することで記事を公開できます。[Publish Now]ボタンを押すと、GitHubに投稿内容がコミットされています。

JAMStackなWebサイトは毎回静的なページをビルドする必要があるため、GitHubにコミットしても実際のBlog記事が投稿完了するまで数分程度時間がかかります。

４．まとめ

Netlify CMSを用いて記事を投稿する流れについて説明しました。

ただ、NetlifyCMSについては標準で画像をアップロードする機能がありますが、機能的に物足りない部分があります（画像を複数一気にアップロードできないなど）そこで、次回の記事では CloudinaryとNetlify CMSを連携させる方法について説明します。