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

✨前言

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

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

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

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

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

🎈图片预览

配置完的界面

1

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

2

📃简单说明

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

🔧具体配置

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

具体可以查看:

👟准备工作

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

图片内容

进入设置中

图片内容

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

图片内容

下滑找到 Git Gateway 并开启。
图片内容

至此准备工作完成

🎨安装

Step1: 添加依赖(二选一)

1
2
3
yarn add hexo-netlify-cms
// or npm
npm i hexo-netlify-cms --save

Step2: 在Hexo中添加配置

1
2
3
4
netlify_cms:
backend:
name: git-gateway
branch: man #这里以你的仓库实际分支为准,有的是master

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

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

图片内容

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

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

其他配置

自定义pages自动生成配置

1
2
3
4
5
6
7
8
9
10
11
12
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:

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

1
2
netlify_cms:
config_file: netlify.yaml

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

1
2
netlify_cms:
over_format: true

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

1
2
3
4
5
6
# 需要跳过配置
skip_render:
- js/**
netlify_cms:
scripts:
- js/cms/youtube.js

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

调试

1
2
3
4
yarn link
cd example
yarn link hexo-netlify-cms
hexo s

关于脚本

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

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

详细可见官方中文文档

点击此处跳转

项目

jiangtj/hexo-netlify-cms


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!