Netlify CMS②管理画面を設定 #Jekyll

ログイン画面を作成する

[サイト名/admin]で管理画面にログインできるようにする
↓目指す画面

①adminフォルダの作成

adminファイルの中に、index.htmlとconfig.ymlを作成する

$mkdir admin
$cd admin
$admin touch index.html
$admin touch config.yml

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>
    <!-- Include the identity widget -->
    <script src="https://identity.netlify.com/v1/netlify-identity-widget.js" type="text/javascript"></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>

config.ymlの中に追記

# config.yml

backend:
  name: git-gateway
  branch: main # Branch to update (optional; defaults to master)
media_folder: 'assets/uploads'
collections:
  - name: 'blog'
    label: 'Blog'
    folder: '_posts/'
    fields:
      - { name: Title }

②header.htmlとfooter.htmlに追記

NetlifyIDウィジェットを追加する

header.htmlに記述する

<head>
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</head>

footer.htmlに記述する

(body内なので場所は任意で大丈夫です)

<script>
  if (window.netlifyIdentity) {
    window.netlifyIdentity.on("init", user => {
      if (!user) {
        window.netlifyIdentity.on("login", () => {
          document.location.href = "/admin/";
        });
      }
    });
  }
</script>

参考

Netlify CMS ジキル： https://www.netlifycms.org/docs/jekyll/
Netlify CMS widget ： https://www.netlifycms.org/docs/add-to-your-site/#add-the-netlify-identity-widget