Original link: https://yousazoe.top/archives/62b1072e.html
introduction
We all know that Hexo is a framework for statically deploying blogs. The advantages are fast speed and low cost (no server required). The disadvantage is that it is cumbersome. Every time you update an article, you need to change the code, deploy the push, and modify the configuration. The same is true, you You cannot modify the configuration directly in the background and make it take effect like WordPress.
However, there are many tutorials that allow you to push the code without tedious deployment. You can easily deploy the blog through GitHub Actions, travis-ci, Vercel, Netlify, etc. Just write the code and push it. Similar tutorials are very useful. More, and will not be repeated here. So, can we write and manage static blogs more conveniently on this basis? The answer is yes.
We can do this by deploying the blog to Netlify and using Netlify cms.
First, let’s take a look at what can be done after configuration?
- Create, edit, preview, delete blog posts online
- Support article drafts, workflow
- Support the management of blog pictures
- Support online modification of blog configuration, such as modification of the top image of the home page, modification of the friend chain
Picture Preview
online demo
In order to be more intuitive, the original author made a blog that has been configured, you can experience the above functions online ?Click me to check
Brief description
Below I will demonstrate with the Hexo + NexT theme, and configure the Friends chain function of the Fluid theme to achieve the purpose of editing and previewing the Friends chain online, but this method is not only applicable to the Friends chain function of the Fluid theme, other themes are also This method can be used to modify the configuration online. As long as the configuration is completed, almost all configuration items can be modified. Including but not limited to the following types of files yml, yaml, toml, json, md, markdown, html, please check the ?Netlify cms document for details.
Specific configuration
A prerequisite for using Netlify cms is that you must deploy your blog to Netlify. Because there are many deployment tutorials on the Internet, I won’t repeat them here.
Can be deployed to other hosting sites, but needs to be modified by yourself
Specifically, you can view:
Preparation
After the deployment is complete, you need to enable Identity :
Go to settings:
Modify Registration preferences to Invite only . This item is whether to enable registration. The default is to enable registration. After modifying it to Invite only , it means that only invited users can register. Of course, you can modify this item after registering yourself.
Scroll down to find Git Gateway and open it.
The preparation work is now complete.
Modify blog configuration
Find _config.yml in the blog root directory and modify it. This step is to skip the folder rendering, otherwise an error will occur later:
In the blog source folder, create an admin folder and create two new files index.html and config.yml :
Add the following to index.html :
<!doctype html >
< html >
< head >
< meta charset = "utf-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
< meta http-equiv = "x-UA-Compatible" content = "IE=Edge" >
< meta name = "apple-mobile-web-app-status-bar-style" content = "white" />
< script type = "text/javascript" src = "https://identity.netlify.com/v1/netlify-identity-widget.js" > </ script >
< title > Fl0w3r </ title >
</ head >
< body >
< script defer = "true" src = "https://cdn.jsdelivr.net/npm/netlify-cms@2/dist/netlify-cms.js" > </ script >
</ body >
</ html >
|
Because it involves Jsdelivr acceleration, I choose to download two js source files to theme\next\source\js :
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="x-UA-Compatible" content="IE=Edge">
<meta name="apple-mobile-web-app-status-bar-style" content="white" />
- <script type="text/javascript" src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
+ <script type="text/javascript" src="js/netlify-identity-widget.js"></script>
<title>Fl0w3r</title>
</head>
<body>
- <script defer="true" src="https://cdn.jsdelivr.net/npm/netlify-cms@2/dist/netlify-cms.js"></script>
+ <script defer="true" src="js/netlify-cms.js"></script>
</body>
</html>
|
Add the following folds in config.yml :
backend:
name: git-gateway # https://github.com/netlify/netlify-cms
branch: main # branch to update (optional; defaults to main)
# This line should *not* be indented
publish_mode: editorial_workflow
# This line should *not* be indented
media_folder: "source/images/uploads" # Media files will be stored in the Repo under images/uploads.
public_folder: "/images/uploads" # The src attribute of uploaded media will start with /images/uploads.
site_url: https://www.myql.xyz # Website URL
display_url: https://www.myql.xyz # Display URL
locale: "zh_Hans" # Locale https://github.com/netlify/netlify-cms/tree/master/packages/netlify-cms-locales/src
collections: # https://www.netlifycms.org/docs/configuration-options/#collections
- name: "posts" # Used in routes, eg: /admin/collections/blog.
label: "Post" # used in the UI
folder: "source/_posts" # Path to the folder where the files are stored.
create: true # Allow users to create new files in this collection.
fields: # The fields of each file, usually the previous content.
- {
label: "Top Image" ,
name: "banner_img" ,
widget: "image" ,
required: false ,
}
- {
label: "Article Cover" ,
name: "index_img" ,
widget: "image" ,
required: false ,
}
- { label: "article sorting" , name: "sticky" , widget: "number" , required: false }
- { label: "title" , name: "title" , widget: "string" }
- {
label: "release date" ,
name: "date" ,
widget: "datetime" ,
format: "YYYY-MM-DD HH:mm:ss" ,
dateFormat: "YYYY-MM-DD" ,
timeFormat: "HH:mm:ss" ,
required: false ,
}
- {
label: "Update Date" ,
name: "updated" ,
widget: "datetime" ,
format: "YYYY-MM-DD HH:mm:ss" ,
dateFormat: "YYYY-MM-DD" ,
timeFormat: "HH:mm:ss" ,
required: false ,
}
- { label: "tags" , name: "tags" , widget: "list" , required: false }
- { label: "categories" , name: "categories" , widget: "list" , required: false }
- { label: "keywords" , name: "keywords" , widget: "list" , required: false }
- { label: "summary" , name: "excerpt" , widget: "list" , required: false }
- { label: "content" , name: "body" , widget: "markdown" , required: false }
- {
label: "Permalink" ,
name: "permalink" ,
widget: "string" ,
required: false ,
}
- {
label: "comments" ,
name: "comments" ,
widget: "boolean" ,
default: true ,
required: false ,
}
- name: "pages"
label: "Pages"
files:
- file: "source/about/index.md"
name: "about"
label: "About"
fields:
- { label: "title" , name: "title" , widget: "string" }
- { label: "content" , name: "body" , widget: "markdown" , required: false }
- {
label: "comments" ,
name: "comments" ,
widget: "boolean" ,
default: true ,
required: false ,
}
# If you are not a fluid theme, please delete the following configuration, or modify the file path and fields
# - name: "settings"
# label: "settings"
# files:
# - file: "source/_data/fluid_config.yml"
# name: "fluid"
# label: "fluid theme configuration"
# editor:
# preview: true # Whether to enable edit preview
# fields:
# - label: "Home"
# name: "index"
# widget: "object"
# collapsed: true # Whether to collapse
# fields:
# - label: "Top Image"
# name: "banner_img"
# widget: "image"
# - label: "height"
# name: "banner_img_height"
# widget: "number"
# - label: "Article Page"
# name: "post"
# widget: "object"
# collapsed: true
# fields:
# - label: "Top image (default)"
# name: "banner_img"
# widget: "image"
# - label: "height"
# name: "banner_img_height"
# widget: "number"
# - label: "Article cover image (default)"
# name: "default_index_img"
# widget: "image"
# - label: "Archive Pages"
# name: "archive"
# widget: "object"
# collapsed: true
# fields:
# - label: "Top Image"
# name: "banner_img"
# widget: "image"
# - label: "height"
# name: "banner_img_height"
# widget: "number"
# - label: "Category Page"
# name: "category"
# widget: "object"
# collapsed: true
# fields:
# - label: "Top Image"
# name: "banner_img"
# widget: "image"
# - label: "height"
# name: "banner_img_height"
# widget: "number"
# - label: "tab page"
# name: "tag"
# widget: "object"
# collapsed: true
# fields:
# - label: "Top Image"
# name: "banner_img"
# widget: "image"
# - label: "height"
# name: "banner_img_height"
# widget: "number"
# - label: "About page"
# name: "about"
# widget: "object"
# collapsed: true
# fields:
# - label: "Top Image"
# name: "banner_img"
# widget: "image"
# - label: "height"
# name: "banner_img_height"
# widget: "number"
# - label: "Friend Link Page"
# name: "links"
# widget: "object"
# collapsed: true
# fields:
# - label: "Top Image"
# name: "banner_img"
# widget: "image"
# - label: "height"
# name: "banner_img_height"
# widget: "number"
# - label: "item"
# name: "items"
# widget: "list"
# fields:
# - {
# label: "Site name",
# name: "title",
# widget: "string",
# required: false,
# }
# - {
# label: "URL description",
# name: "intro",
# widget: "string",
# required: false,
# }
# - {
# label: "Website address",
# name: "link",
# widget: "string",
# required: false,
# }
# - {
# label: "Site image",
# name: "avatar",
# widget: "image",
# required: false,
# }
|
Please note that here I have configured Fluid themes, such as banner_img , index_img and other items, please delete them if they cannot be used normally. If you are not a Fluid theme, please modify the source\admin\config.yml configuration according to the actual situation.
Reference article
This article is reprinted from: https://yousazoe.top/archives/62b1072e.html
This site is for inclusion only, and the copyright belongs to the original author.