为 Hexo 博客集成 Netlify CMS

Hexo 博客一度作为我的博客程序——无须搭建服务器环境,在 Github 上传Markdwon文件,Travis-CI 自动部署。一切看起来都很美好,但总是需要在本地安装环境。虽然也有类似于 hexo-admin 的管理插件,但总是觉得并不是很方便。直到有一天,我发现了—— Netlify.com

Netlify 是一个可以自动化构建、部署和管理静态站点的一体化平台,目前 imst.xyz 中大部分的静态网站都托管在 Netlify(且在 Github 上开源)。

Netlify 不仅提供了全局部署和持续集成,更推出了一款 Headless CMS —— Netlify CMS,一款开源的内容管理系统。Netlify CMS 可以为部署在 Netlify 上的静态网站提供基于 Git 的内容管理,非常之好用而又简便。

我们正好可以利用 Netlify CMS 为 Hexo 博客提供内容管理。

我们首先需要在 source 文件夹下新建一个 admin 文件夹

DemoMacro/NetlifyCMS-Example 这个项目的文件放到 admin 文件夹下

_config.yml 文件里设置忽略解析 admin 文件夹

skip_render: admin/**

然后部署到 Netlify 上:

Build command: hexo generate
Publish directory: public

然后在在站点管理里找到 Settings - Build&Deploy - Snippet injection 注入以下代码

<!-- Before </head> -->
<script src="https://cdn.jsdelivr.net/npm/netlify-identity-widget@1.5.2/build/netlify-identity-widget.js" integrity="sha256-PPYr2qW8LdqHyxDtRy9AHkDMvvVSfPIiIAIrH31kNWQ="
        crossorigin="anonymous"></script>
<!-- Before </body> -->
<script>
  if (window.netlifyIdentity) {
    window.netlifyIdentity.on("init", user => {
      if (!user) {
        window.netlifyIdentity.on("login", () => {
          document.location.href = "/admin/";
        });
      }
    });
  }
</script>

然后在 Settings - Identity - Service 里开启 Git Gateway

为Hexo博客集成 Netlify CMS 就大功告成啦!

如果想直接用现成的,可以在 Github 上 Fork 这个项目:DemoMacro/Hexo-NetlifyCMS

或者直接点击下面这个按钮

在 Netlify 绑定 Github 账户后,会自动为你 Fork 这个项目并进行持续部署。

只要登录:https://yoursite.netlify.com/admin 就可以撰写你的博客了!

Hexo-NetlifyCMS 演示站点:https://hexocms.imst.xyz/

想要体验后台界面,可以登录这个演示网址:https://git-cms.imst.xyz/

Email: demo@imst.xyz
Password: demo

其他静态网页生成器也是近似的配置方法,我可能会再开一篇博文讲 Netlify CMS 的配置。

其他 Netlify CMS 集成示例:

DemoMacro/Gitbook-NetlifyCMS:https://gitbook.imst.xyz/

DemoMacro/VuePress-NetlifyCMS:https://vuepress.imst.xyz/

DemoMacro/docsify-NetlifyCMS:https://docsify.imst.xyz/

发表评论

电子邮件地址不会被公开。 必填项已用*标注