逆引きマニュアル: Netlify CMS + Hugo + GitLabの導入方法

やりたいこと

one-click-hugo-cmsを使った、Netlify CMSの導入方法です。 静的サイトジェネレータはHugo、リポジトリはGitLabを使用しています。

前提条件

以下で確認しています。

• NetlifyへのログインにはGitHubアカウントを使用
• リポジトリにはGitLabを使用

概要

Netlify CMSの導入には、Netlify Identityのセットアップが必要です。 公式のドキュメントにはこの方法が載ってませんでした・・・

あと、GitHubを使った例は多いですが、GitLabを使った例がなかなかありませんでした。

手順

以下の流れで行います。

• サイトの作成
• Netlify Identityの設定
• ユーザの追加

サイトの作成

1. https://headlesscms.org/projects/netlify-cms/ に移動
2. 一番下のDeploy to netlifyのボタンを押す。
3. Connect to GitHub を選択
   • GitLabの場合は connect to GitLab. リンクをクリックする(自分はこちらを選択)。
4. リポジトリ名を入力(デフォルトは one-click-hugo-cms)して、Save & Deployボタンをクリック。
   • この時点でGitHub or GitLabにリポジトリが作られ、Netlifyでビルドが始まります。もしビルドに失敗したときは何度かリトライしてください¹。

Netlify Identityの設定

1. 上部から Identity タブを選択し、Enable Identity ボタンを押す。
   • メインのメールアドレスに [Netlify] You’ve started using Identity on サイト名 というメールが来ます。
2. Settings and usage ボタンをクリックする。設定画面に移動する。
3. 以下の設定をする。
   • Registration preferences: Invite Only
   • External providers: GitHub
     • 自分はNetlifyのログインにGitHubを使っているため。
     • 選択画面ではUse default configurationで構わない(下の方はProフィーチャー)
   • Services: Enable Git Gateway ボタンを押す。

ユーザの追加

1. Identityタブを選択し、Invite users ボタンをクリックし、自分のメールアドレスを入れ、Send ボタンを押す。
2. 自分のメールアドレスにメールが来るので、メール中の Accept the invite リンクをクリックする。
3. Continue with GitHubを選択してログイン

補足

設定ファイルは site/static/admin/config.yml のようです。

外部サイト

• まだWordPressで消耗してるの？Netlify CMSでブログを作成しよう！ - Qiita

マニュアル

• Netlify
• Netlify CMS
• Hugo

---