Hugo + gitlab + netlifyのブログにNetlify CMSを設定する方法
Netlify CMS を設定したいけど設定の仕方がわからない。
公式サイトのドキュメントを見て、
クイックスタートは立ち上げられたが、
自分のサイトに設定する方法がよくわからない。
どのようにgitlab,githubと連携すればいいのかがわからない。
このような疑問、悩みを解決します。
自分は実際にこのブログにNetlify CMSを設定し、
管理画面上から記事を書いています。
その時に実際に設定が上手くいかず、Try&Errorを繰り返しました。
結構迷って大変だったので、迷わない設定手順やポイントを解説します。
自分のブログで3回にわたり 以下の記事でHugoブログを作ったので、
まだnetlifyにデプロイしてないよという方は以下を参考に作成してみてください。
上記の記事でHugo + gitlab + netlifyでブログをホスティングしている所から解説を進めます。
この記事を最後まで読むとWordPressのようにCMSで記事と投稿できるようになります。
目次
- 管理画面ページ用admin/を作成する
- index.html
- Config.yml
- gitlab へpush
- gitlab認証
- Netlifyの管理画面
- 管理画面
管理画面ページ用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
入力箇所
- nameにNetlify-CMS
- Redirect URI に https://api.netlify.com/auth/done
- apiにチェック
- Save application をクリック
Netlify-CMSの中身の表示です。
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
ここが最大のポイントです。翻訳文です。
NetlifyのGit GatewayはあなたのサイトをGitLabのAPIに接続します。
これにより、Netlify CMSのようなツールのユーザーは
GitLabアカウントを必要とせずにコンテンツ、ブランチ、マージリクエストを扱うことができます。
素晴らしい!
Enable Git Gatewayをクリック
このようにgitlabと連携されます。
ここでうまくいかない場合はgitlab認証の手順を確認しましょう。
Access controlタブの設定
OAuthの設定をします。
install provider でgitlabを選択します。
gitlab認証
で認証したIDとSecretを入力しましょう。
管理画面
ここまで設定すると、管理画面へアクセスできます。
管理用URLは https://ブログURL/admin/ です。
例:https://nervous-beaver-XXXXX.netlify.com/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 札幌のフリーランス@クラウドランス望月のフォローをお願い致します。