前提

GitLab 公式が Netlify CMS をサポートしたよ！とブログに書いており，ボタンを押すだけで自動で Netlify に Deploy して認証周りと CMS の用意をしてくれるようなのですが，押してみたら Deploy が失敗しましたｗ

ということで気を取り直し，ローカルで主に編集している Hugo 記事を，Netlify CMS を GitLab に立てて編集したいという願いを叶えることにします． しかし，GitHub との連携記事ばかりで，GitLab を使った OAuth 認証に係る記述は日本語記事では存在しませんでした． でも調べたところ，GitLab 公式 Docs に OAuth 認証を設定する方法が書かれていました．

OAuth 認証設定

参考: https://docs.gitlab.com/ee/integration/oauth_provider.html#view-all-authorized-applications

  1. GitLab のサイトの左サイドバーのアバターアイコンを選択
  2. Edit profile を選択
  3. 左サイドバーから Applications を選択
  4. Add new application を選択
  5. Name に好きな文字列，例: Netlify CMS を入れる，RedirectURI に https://api.netlify.com/auth/done を入れる．
  6. OAuth2 のスコープを選択．

ここは説明がありませんが，api だけにチェックを入れれば OK．

  1. Save Application を選択．

Netlify UI Setting

参考: https://zenn.dev/rikei_ocojo/articles/hugo-netlify-cms#hugo%E3%81%8B%E3%82%89netlify-cms%E3%82%92%E4%BD%BF%E3%81%86

Netlify のページから，Site configuration > Access & Security > OAuth と進み，Install Provide から先ほどの手順の Client ID と Client secrets を登録．

Hugo での Netlify CMS の設定

  1. 以下を実行
cd static
mkdir admin
touch index.html
  1. index.html に以下をコピペ
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Content Manager</title>
    <!-- Include the script that enables Netlify Identity on this page. -->
    <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
  </head>
  <body>
    <!-- Include the script that builds the page and powers Netlify CMS -->
    <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
  </body>
</html>
  1. static/admin/config.ymlを作成し，以下を追記
backend:
  name: gitlab
  repo: [GITLAB ACCOUN 名]/[GITLAB リポジトリ名]
  branch: main
media_folder: "static/images"
public_folder: "public"
publish_mode: editorial_workflow
collections:
  - name: "posts"
    label: "posts"
    folder: "content/postss"
    create: true
    fields:
      - {label: "Title", name: "title", widget: "string", required: true}
      - {label: "Date", name: "date", widget: "date", required: true}
      - {label: "Eyecatch", name: "eyecatch", widget: "image", required: false}
      - {label: "Draft", name: "draft", widget: "boolean", default: true}
      - {label: "Body", name: "body", widget: "markdown"}
  1. Nelify にデプロイ． https://[Hugo ブログのURL]/admin にアクセスすると，WebUI から記事を記述したり編集したりできるようになる．

参考記事

repo にはアカウント名もいるよ．