為 Hexo 博客集成 Netlify CMS

為 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 這個項目並進行持續部署。

只要登錄: yoursite.netlify.com/ad 就可以撰寫你的部落格了!

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

想要體驗後檯介面,可以登錄這個演示網址: git-cms.imst.xyz/

Email: demo@imst.xyz
Password: demo

其他靜態網頁生成器也是近似的配置方法,我可能會再開一篇博文講 Netlify CMS 的配置。

其他 Netlify CMS 集成範例:

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

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

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

2021 年 JavaScript 大事记

CMS是什麼?