Netlifyで公開しているHugoサイトをNetlifyCMSに変更する方法
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に変更することができました。
みなさんのお役に立てたら、是非この記事にいいねを教えてください。
今後の記事作成のモチベーションに繋がります!
Author And Source
この問題について(Netlifyで公開しているHugoサイトをNetlifyCMSに変更する方法), 我々は、より多くの情報をここで見つけました https://qiita.com/you1978/items/ce2f6cf5bc73e8e95116著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .