Loading...

前言

  • 把博客托管在 Netlify 一段时间了，感觉很不错，今天又了解到 Netlify CMS 服务，决定给博客弄一个，按照官方文档顺利搭建成功，以下是过程记录。
  • 如果没有站点的话可以按照官方模版快速搭建一个带有 CMS 的站点；我的内容记录主要是在已有 Netlify 站点基础上添加 Netlify CMS，英文文档见Add To Your Site。

搭建过程

创建 admin 文件夹

该部分是最关键的内容，认真做完这一步基本就完成了 Netlify CMS 的搭建了。

admin 文件夹用来存储 Netlify CMS 文件，这些文件在站点部署后应该位于根目录下。不同的静态站点生成器存放 admin 文件夹位置可能不同，我是用的Hugo，所以在/static下创建 admin 文件夹，且创建index.html和config.yml两个文件：

admin
 ├ index.html
 └ config.yml

编辑index.html

index.html即为访问your-domain-name/admin时展示的页面，内容可以如下：

<!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

config.yml用于编辑 Netlify CMS 的配置，我的项目仓库在 Bitbucket，和 GitHub/GitLab 在一些配置上有点区别，GitHub/GitLab 仓库的配置可见官方文档。

  • Backend

对于 Bitbucket 仓库，Bitbucket backend可以直接使用 Bitbucket 账号登录 CMS，注意所有人需要仓库内容的读写权限才能登录后台界面。

backend:
  name: bitbucket
  repo: owner-name/repo-name # 仓库路径

除了编写以上内容外，需要在 Bitbucket 注册一个OAuth application，以下以 Bitbucket 为例介绍注册过程，其他平台类似：

  1. 进入账户设置界面，点击OAuth，找到OAuth consumers；
  2. 点击Add consumer；
  3. 除了Callback URL需填写https://api.netlify.com/auth/done，其他可以自定义。
    OAuth
    OAuth

完成注册后可以得到如下的Key和Secret，然后把这些内容添加到 Netlify 项目。
Netlify-CMS-OAuth.png

Netlify-CMS-OAuth.png

添加步骤如下：

  1. 打开Netlify 主页进入网站项目；
  2. 找到Settings -> Access control -> OAuth；
  3. 在OAuth下添加Key和Secret，如图。
    netlify-install-provider.png
    netlify-install-provider.png
  • Media and public folder
media_folder: "static/img/post" # 存放图片的文件夹
public_folder: "/img/post" # 上传图片的src属性会以该路径开头
  • Collections
# 以下是我的Collections内容，如需要请根据自己的头文件内容自定义
collections:
  - name: "post" # 定义该collection的路径
    label: "Blog" # 后台显示的名字
    folder: "content/blog/2018" # 文章存放文件夹
    create: true # 允许创建新文件
    slug: "{{slug}}" # 文件名字模版，{{slug}} 取自title
    fields: # 定义front matter的显示与数据类型
      - { label: "Title", name: "title", widget: "string" }
      - {
          label: "Author",
          name: "author",
          widget: "string",
          default: "WithdewHua",
        }
      - { label: "Type", name: "type", widget: "string", default: "post" }
      - { label: "Categories", name: "categories", widget: "list" }
      - { label: "Tags", name: "tags", widget: "list" }
      - { label: "Series", name: "series", widget: "list", required: false }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - {
          label: "Lastmod",
          name: "lastmod",
          widget: "date",
          default: "",
          required: false,
          format: "YYYY-MM-DD",
        }
      - {
          label: "Description",
          name: "description",
          widget: "text",
          required: false,
        }
      - {
          label: "Featured Image",
          name: "featured",
          widget: "image",
          required: false,
        }
      - {
          label: "Featured Alt",
          name: "featuredalt",
          widget: "string",
          required: false,
        }
      - {
          label: "Featured Path",
          name: "featuredpath",
          widget: "string",
          default: "img/post",
          required: false,
        }
      - { label: "Slug", name: "slug", widget: "string", required: false }
      - {
          label: "Draft",
          name: "draft",
          widget: "boolean",
          default: false,
          required: false,
        }
      - {
          label: "Show TOC",
          name: "showtoc",
          widget: "boolean",
          default: true,
          required: false,
        }
      - { label: "Post Content", name: "body", widget: "markdown" }

更多的Widgets和Collections内容可参考Widget Doc和Collection Reference Doc。

Netlify 设置

允许 Identity 服务

  1. 进入 Netlify Settings -> Identity, 选择Enable Identity service;
  2. 剩余选项内容可根据自己需要调整。

添加 Netlify Identity 挂件

  • 在admin/index.html和自己网站页面的<head>元素间（如我的网站中的layouts/partials/header.html）添加以下代码；
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
  • 在自己网站页面的</body>元素前（如我的网站中的layouts/partials/footer.html）加入以下代码，用于验证后跳转回自己网站。
<script>
  if (window.netlifyIdentity) {
    window.netlifyIdentity.on("init", user => {
      if (!user) {
        window.netlifyIdentity.on("login", () => {
          document.location.href = "/admin/";
        });
      }
    });
  }
</script>

以上完成之后，将文件上传至 Bitbucket 仓库就全部完成了，可以进入your-domain-name/admin登录查看搭建好的后台界面了，以下是我的：
admin-1.png

admin-1.png

最后修改：2021 年 06 月 10 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏