使用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 commandPublish 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