Hexo通过Netlify CMS实现在线编辑文章

# ✨前言

我们都知道，Hexo 是一个静态部署博客的框架，优点在于速度快，成本低（无需服务器），缺点在于繁琐，你每次更新文章都需要去改代码，再部署推送，修改配置也是如此，你不能像 WordPress 一样直接在后台修改配置并使它生效。

不过有很多教程可以让你无需繁琐的部署，只管推送代码，通过 GitHub Actions ， travis-ci ，vercel，Netlify 等都可以便捷的进行博客的部署，只管写代码然后推送就好，类似的教程有非常多，在此就不再重复介绍。那么，我们是否可以在此基础上，更加便捷的进行静态博客的写作和管理？答案是可以的。

我们可以通过将博客部署到 Netlify，并使用 Netlify CMS 来做到这一点。

首先，我们来了解一下配置完之后可以做到哪些事情？

• 在线新建，编辑，预览，删除博客文章
• 支持文章草稿，工作流
• 支持对博客图片的管理
• 支持在线修改博客配置，例如对首页顶部图的修改，友链的修改

# 🎈图片预览

配置完的界面

在线对文章进行编辑，修改

# 📃简单说明

下面我将会以 Hexo + 做演示，只要你配置完成，几乎可以修改所有配置项。包括但不限于以下类型的文件 yml 、 yaml 、 toml 、 json 、 md 、 markdown 、 html 具体请查看 👉Netlify CMS 文档。

# 🔧具体配置

Netlify CMS 使用的前提条件是你必须将博客部署到 Netlify 上。因为网上有很多部署教程，这里不再重复。

具体可以查看：

• 博客通过 Netlify 实现持续集成
• 将 Hexo 静态博客部署到 Netlify

# 👟准备工作

在部署完成后，你需要开启 Identity

进入设置中

将 Registration preferences 修改为 Invite only 此项为是否开启注册，默认是开启注册。修改为 Invite only 后表示仅受邀请的用户可以注册，当然此项你可以在自己注册完毕之后再行修改。

下滑找到 Git Gateway 并开启。

至此准备工作完成

# 🎨安装

# Step1: 添加依赖（二选一）

yarn add hexo-netlify-cms

// or npm

npm i hexo-netlify-cms --save

# Step2: 在 Hexo 中添加配置

netlify_cms:

  backend:

    name: git-gateway

    branch: man #这里以你的仓库实际分支为准，有的是 master

# Step3: 添加 netlify-identity-widget.js, 代码如下

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

注意： 建议将身份认证设为仅邀请模式

Okay, 现在 Netlify CMS 已经好了，你可以访问 你的站点域名/admin 查看

# 其他配置

自定义 pages 自动生成配置

netlify_cms:

  # pages auto generate

  pages: 

    enabled: true

    # over page collection config

    # if fields not set, would use posts fields config

    config:

      label: "Page"

      delete: false

      editor:

        preview: true

      # fields:

自定义配置文件，覆盖默认的

netlify_cms:

  config_file: netlify.yaml

开启 / 关闭覆盖时间格式配置 (默认 true)

netlify_cms:

  over_format: true

添加脚本，用于自定义组件和预览样式
例如：
添加 example/source/js/cms/youtube.js 至你的博客下

# 需要跳过配置

skip_render:

  - js/**

netlify_cms:

  scripts:

    - js/cms/youtube.js

另外，其他的 netlify_cms 配置变量可以在 Netlify CMS 中找到

# 调试

yarn link

cd example

yarn link hexo-netlify-cms

hexo s

# 关于脚本

事实上只是简单的在 admin 的页面下引入，可以通过 Netlift CMS 的全局变量 CMS 添加你想实现的自定义组件等。但这块需要花很多时间维护，毕竟预览的原理和 hexo 生成文件并不一样...

后续可能会添加对 Image Tag 的支持 (其它应该不考虑实现，因为用不到)....

# 详细可见官方中文文档

点击此处跳转

# 项目

jiangtj/hexo-netlify-cms