Hexo Netlify CMS

It's a hexo plugin for netlify-cms, so you can use it easily.

Live Demo | 中文文档

Quick start

Step1: Adding dependencies

yarn add hexo-netlify-cms

hexo s --debug add --debug option, open http://localhost:400/admin/ to preview

Step2: Open the service in Netlify

• You need to push your source code to the GitHub repository and use this project to enable the netlify service.

• Enable the netlify git-gateway service

Note: set authentication to invitation only mode

Wait for the deployment to complete, visit ${your-site}/admin/ to view and use

Advance configuration

Set the custom configuration file, overwrite default, the definition variable of the custom configuration file is equivalent to the one defined in the netlify_cms variable of the hexo configuration file.

netlify_cms:
  config_file: netlify-cms.yaml

Set post and page auto generator

auto_generator:
  post:
    # If you have multiple Post folders, define multiple here, see https://github.com/jiangtj/blog/blob/master/netlify-cms.yaml
    all_posts:
      # set to false, turn off the default Post
      #enabled: true
      label: "Post"
      folder: "source/_posts"
      create: true
      editor:
        preview: true
  # PageGeneration Configuration
  page: 
    enabled: true
    config:
      label: "Page"
      # By default, deleting Page files is prohibited.
      delete: false
      editor:
        preview: true

Set global fields

global_fields:
  # Overwrite time format by hexo configuration
  over_format: true
  # default fields
  default:
    - {label: "Title", name: "title", widget: "string"}
    - {label: "Publish Date", name: "date", widget: "datetime", dateFormat: "YYYY-MM-DD", timeFormat: "HH:mm:ss", format: "YYYY-MM-DD HH :mm:ss", required: false}
    - {label: "Tags", name: "tags", widget: "list", required: false}
    - {label: "Categories", name: "categories", widget: "list", required: false}
    - {label: "Body", name: "body", widget: "markdown", required: false}
    - {label: "Permalink", name: "permalink", widget: "string", required: false}
    - {label: "Comments", name: "comments", widget: "boolean", default: true, required: false}
  # default post fields, if set, posts fields will be taken from here
  #post:
  # default page fields, the same reason
  #page:

Add scripts for custom components and preview styles

E.g:

Add youtube.js to your blog

Or add img.js to your blog

netlify_cms:
  scripts:
    - js/cms/youtube.js
    #- js/cms/img.js
    #或使用jsdelivr cdn
    #- https://cdn.jsdelivr.net/gh/JiangTJ/hexo-netlify-cms-example@0.0.1/source/js/cms/youtube.js
    #- https://cdn.jsdelivr.net/gh/JiangTJ/hexo-netlify-cms-example@0.0.1/source/js/cms/img.js

In addition, other netlify_cms configuration variables can be found in Netlify CMS

Tips

1. It is recommended to enable Netlify Large Media to make the media load faster. Large Media Docs