README

Hexo Netlify CMS

npm npm

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

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

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

Usage no npm install needed!