Netlifyで公開しているHugoサイトをNetlifyCMSに変更する方法

誰に向けて書いている記事か？

Netlifyにて、すでにHugoのサイトを公開している
リポジトリとして、GitHubを使用している
NetlifyCMSを使用して簡単に記事を書きたい

何ができるようになるか？

Netlifyで公開しているHugoサイトをNetlifyCMSで運用できるようになります。

どうすればできるようになるのか？

adminフォルダを作成

staticフォルダの下にadminという名称のフォルダを作成します。

index.htmlの作成

adminフォルダに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>
</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>

config.ymlの作成

adminフォルダにconfig.ymlという名前のファイルを作成します。

backendは、リポジトリの情報を記入してください。
media_folderは、hugoで使用しているimageフォルダのパスを記入してください。
public_folderは、実際に公開された時のimageフォルダのパスを記入してください。
collectionsは、管理画面から記事を作成した時の設定を記入します。

私の環境で使用している設定をサンプルとして公開します。

backend:
  name: github
  repo: XXX/YYY # GitHubのリポジトリ　「https://github.com/」の後ろの部分

media_folder: "static/images"

public_folder: "images/"

collections:
  - label: "Blog" # 管理画面のサイドバーで使う
    name: "post" # 管理画面のパスで使う　例：/admin/collections/blog
    folder: "content/post" # Markdownを保存するディレクトリ。Hugoのsectionにあたる
    create: true # 新しいページを作ることを許可する
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Markdownのファイル名　例：YYYY-MM-DD-title.md
    fields: # ページ作成画面で使う。Front Matterの値を書く
      - {label: "タイトル", name: "title", widget: "string"}
      - {label: "公開日", name: "date", widget: "datetime"}
      - {label: "サムネイル画像", name: "thumbnail", widget: "image"}
      - {label: "レーティング", name: "rating", widget: "number"}
      - {label: "本文", name: "body", widget: "markdown"}

アクセス認証（GitHub）

NetlifyからGitHubにアクセスできるようにします。

GitHubにログインする。
ユーザメニューからSettingsをクリックする。
上記に続けて、Developer settingsをクリックする。
上記に続けて、OAuth Appsをクリックする。
上記に続けて、New OAuth Appsをクリックする。

Application Name　任意
Homepage URL 公開サイトのRUL
Application description 任意
Authorization callback URL 固定https://api.netlify.com/auth/done

アクセス認証（Netlify）

NetlifyからGitHubにアクセスできるようにします。
1. Netlifyにログインする
2. 公開しているサイトをクリックする
3. 上記に続けて、Site settingsをクリックする
4. 上記に続けて、Access Control、OAuthを順にクリックする
5. GitHubを選択して、先ほどGitHubで登録した時に表示されるClientIDとClient secret番号を入力する。

サイトにアクセス

下記のURLでアクセスするとGitHubのログインが求められます。

公開URL/admin

GitHubのログインが成功すると、管理者画面が表示されます。

無事表示されば、NetlifyCMSに変更することができました。

みなさんのお役に立てたら、是非この記事にいいねを教えてください。
今後の記事作成のモチベーションに繋がります！