Github+Jekyll+Netlify 搭建部落格CMS系統

墮落小生發表於2019-04-04
Github

使用github+jekyll搭建部落格，大家已經非常熟悉了，可是每次釋出新文章，都要向git倉庫推送一次，對於非專業人士來說，就顯得非常不友好了。
偶然的一次機會，發現了國外有一個網站，提供簡單的介面，對接GitHub的網頁託管服務，可以實現網站的CMS功能，快速的釋出文章等。

網站地址：https://app.netlify.com

遷移Jekyll網站到Netlify

首先在網站專案的根目錄新增兩個檔案 Gemfile 和 .ruby-version.

其中 Gemfile 檔案的內容是 

source "https://rubygems.org"
gem 'github-pages'

.ruby-version 檔案用來指定 Ruby 的版本，如果不知道，就直接填上 

2.4.3

然後登陸 Netlify 賬號，就可以開始了，按照嚮導一步一步來就可以了，

遷移Jekyll網站到Netlify

在 Deploy settings for bdougie/portfolio-template 這一步中，填寫上 Build command 和 Publish directory 。

Jekyll 對應的分別是 

Build command
    jekyll build
Publish directory
    _site

Bulid command

接下來就可以預覽網站，設定域名，開啟SSL等。

開啟 Netlify CMS

You can adapt Netlify CMS to a wide variety of projects. It works with any content written in markdown, JSON, YAML, or TOML files, stored in a repo on GitHub, GitLab, or Bitbucket. You can also create your own custom backend.

這是官網的一段介紹，可以看到，功能還是很強大的，有點小遺憾的是，網站還不支援中文。

在專案根目錄下新增 admin 資料夾，結構如下 

admin
 ├ index.html
 └ config.yml

這樣，就可以通過 yoursite.com/admin/ 進入 CMS。

檔案內容

<!-- index.html   -->

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Content Manager</title>
  <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>

# config.yml

backend:
  name: git-gateway
  branch: gh-pages # Branch to update (master by default)

media_folder: "assets" # Folder where user uploaded files should go

collections: # A list of collections the CMS should be able to edit
  - name: "posts" # Used in routes, ie.: /admin/collections/:slug/edit
    label: "Post" # Used in the UI, ie.: "New Post"
    folder: "_posts" # The path to the folder where the documents are stored
    sort: "date:desc" # Default is title:asc
    create: true # Allow users to create new documents in this collection
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    fields: # The fields each document in this collection have
      - {label: "Title", name: "title", widget: "string", tagname: "h1"}
      - {label: "Layout", name: "layout", widget: "hidden", default: "posts"}
      - {label: "Body", name: "body", widget: "markdown"}
      - {label: "Categories", name: "categories", widget: "string", required: false}
    meta: # Meta data fields. Just like fields, but without any preview element
      - {label: "Publish Date", name: "date", widget: "datetime", format: "YYYY-MM-DD hh:mm:ss"}

另外，在網站主頁的 head 中加入 

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

然後去 Netlify 專案的設定選項中開啟 Identity,全部預設設定，在 Identity 下級選單 Services 裡面 Enable Git Gateway 就可以用了。

官方向導

類似這個樣子

cms

相關文章