ログイン画面を作成する
[サイト名/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