/ #ブログ #テクノロジー 

Hugo + gitlab + netlifyのブログにNetlify CMSを設定する方法

Netlify CMS を設定したいけど設定の仕方がわからない。
公式サイトのドキュメントを見て、
クイックスタートは立ち上げられたが、
自分のサイトに設定する方法がよくわからない。
どのようにgitlab,githubと連携すればいいのかがわからない。
このような疑問、悩みを解決します。

自分は実際にこのブログにNetlify CMSを設定し、
管理画面上から記事を書いています。
その時に実際に設定が上手くいかず、Try&Errorを繰り返しました。
結構迷って大変だったので、迷わない設定手順やポイントを解説します。

自分のブログで3回にわたり 以下の記事でHugoブログを作ったので、
まだnetlifyにデプロイしてないよという方は以下を参考に作成してみてください。

  1. WSLを使ってWindowsでLinux動かす方法
  2. 簡単に作れる！Hugoで自分のブログを作る方法
  3. NetlifyでHugoブログを独自ドメインで無料ホスティングするやり方

上記の記事でHugo + gitlab + netlifyでブログをホスティングしている所から解説を進めます。
この記事を最後まで読むとWordPressのようにCMSで記事と投稿できるようになります。

目次

  1. 管理画面ページ用admin/を作成する
  2. index.html
  3. Config.yml
  4. gitlab へpush
  5. gitlab認証
  6. Netlifyの管理画面
  7. 管理画面

管理画面ページ用admin/を作成する

Hugoブログの場合にはstatic/以下にadmin/を作ります。
この下に必要なのはindex.htmlとconfig.yml が必要です 。

$ tree admin/
admin/
├── config.yml
└── index.html

index.html

index.htmlはCMS管理インターフェイスのエントリーポイントです。
つまりブログ記事を投稿する為の管理ページです。　　

中身はJavaScriptファイルを呼んでます。
このcms.jsが管理画面を生成して表示してくれる仕組みになってます 。

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

設定ファイルには主に認証するリポジトリの設定と、
CMSで入力したい項目の設定です。
自分はこのように設定しています。
あなたのユーザ名の部分を変更して使ってください。

Config.yml

backend:
  name: gitlab
  repo: shoji-mochiduki/blog-c # GitHubのリポジトリ　「https://github.com/」の後ろの部分
  branch: master

media_folder: "static/img" # Folder where user uploaded files should go
public_folder: "/img"

collections: # A list of collections the CMS should be able to edit
  - name: "post" # Used in routes, ie.: /admin/collections/:slug/edit
    label: "Post" # Used in the UI, ie.: "New Post"
    folder: "content/post" # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    fields: # The fields each document in this collection have
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Image", name: "image", widget: "image", required: false}
      - {label: "Tags", name: "tags", widget: "list", required: false}
      - {label: "Categories", name: "categories", widget: "list", required: false}
      - {label: "Slug", name: "slug", widget: "string", required: false}
      - {label: "Draft", name: "draft", widget: "boolean", required: false}
      - {label: "Body", name: "body", widget: "markdown"}

media_folderとpublic_folderはテーマによって違うので注意してください。
casper twoの場合は上記の設定でOKです。

gitlab へpush

作成したファイルはgitlabへpushしましょう。
ここを忘れるとあれれってなります。

pushしたあとはnetlifyのdeploysタブを確認します。
デプロイ失敗する場合はRetry Deploy -> Clear cache and deploy siteで
大抵デプロイ成功します。

gitlab認証

gitlabのApplicationsにNetlify CMSの認証を追加する必要があります。
ここ分かりにくいです。
https://gitlab.com/profile/applications

app

入力箇所
- nameにNetlify-CMS
- Redirect URI に https://api.netlify.com/auth/done
- apiにチェック
- Save application をクリック

Netlify-CMSの中身の表示です。 appID Applications IDとSercretはNetlifyのOAuth機能で使います。

Netlifyの管理画面

gitlabと連携するには設定を色々する必要があります。
設定箇所が多いのつまずきやすい箇所です。

Identityタブ

Setting->Identityを開きます。
Enable　Identityをクリック
Use default configurationにチェックでOKです。

Registration preferences をInvite onlyにチェック
External providers でAdd providerでgitlabを追加。

Services

ここが最大のポイントです。翻訳文です。

service

NetlifyのGit GatewayはあなたのサイトをGitLabのAPIに接続します。
これにより、Netlify CMSのようなツールのユーザーは
GitLabアカウントを必要とせずにコンテンツ、ブランチ、マージリクエストを扱うことができます。

素晴らしい！

Enable Git Gatewayをクリック

servicedone

このようにgitlabと連携されます。
ここでうまくいかない場合はgitlab認証の手順を確認しましょう。

Access controlタブの設定

OAuthの設定をします。
install provider でgitlabを選択します。
gitlab認証 で認証したIDとSecretを入力しましょう。 oauth

管理画面

ここまで設定すると、管理画面へアクセスできます。

管理用URLは　https://ブログURL/admin/ です。
例：https://nervous-beaver-XXXXX.netlify.com/admin/
全て設定して、管理画面が以下のように表示されれば成功です。

admin

エラーになった場合

404になる場合はadmin/index.htmlとconfig.yamlをPushし忘れている。
又は中身がおかしいのどっちかなので確認してください。

それでも404の場合はdeploysタブでの箇所でデプロイ失敗していないか確認します。
Retry Deploy -> Clear cache and deploy siteでデプロイを再実行しましょう

gitlabとの認証がうまくいかない時は、
OAuthの設定を忘れてるか、ID,Secretが違うので、確認しましょう。

まとめ

いかがでしたか？CMSを設定する事ができたでしょうか？
記事の作成方法はポチポチと簡単にできると思います。

CMSの設定ということでやることが多くて、まず何をどう設定していけばいいか解らない方も多かったのではないでしょうか？公式Docも詳しくは書いていますが、自分は読み解いて設定するのはとても大変でした。gitlabの認証方法も参考になる情報も少なくて、自分自身手探り状態でした。

このやり方を参考にNetlify CMSの設定の手助けになればと思います。

追記：次にブログにGoogle AnaliticsとGoogle Adsenseを設置するのがおすすめです。
こちらに解説していますので、こちらのステップにお進みください。
hugoブログにGoogle AnaliticsとGoogle Adsenseを設置した時のTips

Google Search Consoleを設置したい場合はこちらのステップに進んでください。
Googleにインデックス登録する事によってより早く検索されるようになります。
Google Search ConsoleをHugoブログ+Netlifyの環境に設定する方法

このブログではフリーランスのお役立ち情報や最新のIT情報の発信を続けていこうと思うのでぜひ応援お願いします。また、Twitterでも日々の為になる技術情報やフリーランスについての有益な情報をつぶやくので、いいなと思ったかたはTwitter 札幌のフリーランス@クラウドランス望月のフォローをお願い致します。

フォローする