十分鐘將 Netlify CMS 添加到現有的 Hugo 網站

最後更新於 2021 年 10 月 3 日

靜態網站的優點很明顯—速度快成本低(因為無須虛擬主機),但缺點也同樣明顯,新增文章得使用IDE,並且每次更新都需要重 push,無法像 WordPress 那樣直接使用後台操作。

當然也有許多人意識到了這個問題所以開發了靜態網站也能使用的後台管理系統,今天我們就來介紹其中一個—Netlify CMS

如果你還沒有自己的 Hugo 網站,可以參考我之前發布的文章:

2021最新 Hugo 部署 Netlify 教學(上) – 安裝 Hugo
2021最新 Hugo 部署 Netlify 教學(下) – 網站部署及域名綁定

什麼是 Netlify CMS

Netlify CMS 是一個用於 Git workflow 的開源內容管理系統,它可以為你佈署到Netlify的靜態網站(SPA)提供一個後台管理系統。

如果你已經將 blog push 到 Github,但還沒佈署到 Netlify,你也可以直接在 Netlify CMS 的官方網站一鍵佈署:https://www.netlifycms.org/docs/start-with-a-template/

其實能為SPA提供後台管理系統的選擇還滿多的,比如還有:Strapiforestry

將 Netlify CMS 文件添加到 Hugo

在 blog 根目錄新增一個文件夾 admin,並在資料夾裡面新增兩個檔案:config.ymlindex.html

2YSCIht 十分鐘將 Netlify CMS 添加到現有的 Hugo 網站
mATdfKt 十分鐘將 Netlify CMS 添加到現有的 Hugo 網站

index.html

在 index.html 中添加以下內容:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你的網站標題</title>
    <!-- Include the script that enables Netlify Identity on this page. -->
    <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
  </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>
PUKeVj0 十分鐘將 Netlify CMS 添加到現有的 Hugo 網站

config.yml

Netlify CMS 的所有配置選項都在 config.yml 文件中設定,下面的 code 僅為參考,每個人根據需求、主題的不同都會需要修改相應的內容:

backend:
  name: git-gateway
  repo: "your github repo , ex:Test/blog" # blog 存放在 Github repo 的位置
  branch: "master" # 分支
  site_url: "your site url" # 你的網站網址

media_folder: "static/img" # 存放多媒體的資料夾
public_folder: "/img"
locale: "zh_Hant" # 語系 https://github.com/netlify/netlify-cms/tree/master/packages/netlify-cms-locales/src

collections: # https://www.netlifycms.org/docs/configuration-options/#collections
  - name: 'posts'
    label: '文章'
    folder: 'content/posts'
    create: true
    slug: '{{year}}-{{month}}-{{day}}-{{slug}}'
    editor:
      preview: false
    fields:
      - { label: '標題', name: 'title', widget: 'string' }
      - { label: '發布日期', name: 'date', widget: 'datetime' }
      - { label: '摘要', name: 'description', widget: 'string' }
      - { label: '內容', name: 'body', widget: 'markdown' }
      - { label: "標籤", name: "tags", widget: "list", required: false}
      - { label: "分類", name: "categories", widget: "list", required: false}
  - name: "series"
    label: "系列"
    folder: "content/series"
    create: true
    fields:
      - {label: "標題", name: "title", widget: "string"}
      - {label: "内容", name: "body", widget: "markdown", required: false}
  - name: "categories"
    label: "分類"
    folder: "content/categories"
    create: true
    fields:
      - {label: "標題", name: "title", widget: "string"}
      - {label: "内容", name: "body", widget: "markdown", required: false}
  - name: "tags"
    label: "標籤"
    folder: "content/tags"
    create: true
    fields:
      - {label: "標題", name: "title", widget: "string"}
      - {label: "内容", name: "body", widget: "markdown", required: false}

collections 攸關你在後台能設定什麼內容,並且需要配置路由,相關的設定可以參考官方文檔:https://www.netlifycms.org/docs/configuration-options/#collections

XDGsQJ2 十分鐘將 Netlify CMS 添加到現有的 Hugo 網站

在 Netlify 啟用 Identity & Git Gateway

在 Netlify 後台進入你的 site 點擊 Site settings:

HsjUz63 十分鐘將 Netlify CMS 添加到現有的 Hugo 網站

左側選單找到 Identity,將之開啟:

Ob35FKJ 十分鐘將 Netlify CMS 添加到現有的 Hugo 網站

然後在左側找到 Registration-Edit settings

LZRYtRu 十分鐘將 Netlify CMS 添加到現有的 Hugo 網站

選擇「Invite only」然後按下 Save 保存設定。

MaAAyEJ 十分鐘將 Netlify CMS 添加到現有的 Hugo 網站

在左側找到 Services-Git way 將之開啟:

riwa0jh 十分鐘將 Netlify CMS 添加到現有的 Hugo 網站

如果你希望能使用第三方登入,可以在 External providers 添加:

m2hVkm5 十分鐘將 Netlify CMS 添加到現有的 Hugo 網站

邀請使用者

事實上,大部分教程教到以上步驟就停止了,然而若沒有完成這一步是沒辦法順利登入後台的。

在站點後台找到 Identity 並且點擊 Invite users:

keON2PT 十分鐘將 Netlify CMS 添加到現有的 Hugo 網站

將能夠登入後台的用戶Email輸入(若需要一次邀請多個用戶,每一行填一個Email):

mLjV2vU 十分鐘將 Netlify CMS 添加到現有的 Hugo 網站

接著可在信箱中收到 netlify 寄來的驗證信,點擊信中的「Accept the invite」便能接收邀請。

g2wy2Xv 十分鐘將 Netlify CMS 添加到現有的 Hugo 網站
vV2EvtT 十分鐘將 Netlify CMS 添加到現有的 Hugo 網站

登入網站後台

以上步驟都結束之後,就能夠在瀏覽器中輸入 https://你的域名/admin 進入網站後台了,進入後會看到netlify cms 要求你使用你的 Netlify 帳號來登入。

R3dAild 十分鐘將 Netlify CMS 添加到現有的 Hugo 網站

我是使用 Github 登入所以我就選擇下面的 Continue with GitHub

iBW9sAL 十分鐘將 Netlify CMS 添加到現有的 Hugo 網站

成功登入後便能看到網站後台的樣子了!

IKAgCK8 十分鐘將 Netlify CMS 添加到現有的 Hugo 網站

現在,你能夠在後台編輯、新增、刪除文章以及管理你的多媒體內容…等。

14rARCd 十分鐘將 Netlify CMS 添加到現有的 Hugo 網站
0 0 評分數
Article Rating
訂閱
通知
guest

1 Comment
在線反饋
查看所有評論
eafs
eafs
8 月 前

test