cms网站内容如何自定义(,主题丰富,,国内访问快,的博客渲染工具)

　　cms网站内容如何自定义(,主题丰富,,国内访问快,的博客渲染工具)

　　为什么说这是最佳实践？如果你和我一样是追求终极目标的人，希望你的博客全面、在线编辑（这是最重要的）、主题丰富、支持高度定制、国内快速访问，那么我认为这是最好的做法。

　　为什么要使用 Hexo？杰基尔

　　jekyll 是一个简单的免费博客*敏*感*词*，类似于 WordPress。但它与 WordPress 有很大的不同，因为 jekyll 只是一个生成静态网页的工具，不需要数据库支持。但它可以与第三方服务合作，例如 discuz。最重要的是jekyll可以免费部署在Github上，可以绑定自己的域名。

　　雨果

　　Hugo 是一个用 Go 编写的静态 网站 *敏*感*词*，它快速、易于使用且可配置。Hugo 有一个内容和模板目录，并将它们呈现为完整的 HTML 网站。Hugo 依赖 Markdown 文件、元数据字体。用户可以从任意目录运行 Hugo，支持共享主机等系统

　　海索

　　Hexo 是来自台湾的 Tommy Chen 的基于 nodejs 的静态博客 网站 *敏*感*词*。

　　特征：

　　格地亚

　　上手非常快，操作简单，适合小白，但是在新阶段，功能还不成熟。

　　私人原因

　　还是喜欢hexo的下一个主题。同时这个主题的高度定制化和丰富的插件让喜欢折腾的人很满意，所以我还是选择用hexo，不过现在大家好像都在迁移到hugo了。据说网站生成速度快，但是题材比较单一，所以暂时放弃。

　　为什么要在 Github 上托管？

　　因为大部分的博客渲染工具（hexo、hugo、gridea）都依赖于github，所以国内的编码页面在稳定性和易操作性、推送代码和广告等方面不如github稳定，全看你的水平氪金。所以推荐使用github托管。你可能会说编码页面在国内访问速度很快，但仅凭这个优势并不能称为最佳实践，下面的netlify会解决这一系列问题，先按未列出。

　　最重要的是我们只使用github作为博客的托管仓库，不使用它的github页面进行部署

　　为什么要使用 Netlify？

　　先说一下它的作用：

　　github页面：

　　Netlify 和 Travis CI 的区别：

　　所以使用 Netlify 就相当于替换了 GithubPage+ Travis CI。并且完美弥补了两者的不足。

　　ps：在搜索相关资料的时候，发现有的博客把源码和渲染好的网页放在两个分支中（这也是hexo提倡的做法），但是只让netlify托管渲染的分支，这样的话, netlify 不能做自动部署。此时netlify只充当githubpage的角色

　　为什么使用 Netlify cms？cms 是什么？内容管理系统（英文：content management system，缩写为cms）是指一套系统。该系统可应用于人工操作，也可应用于计算机或网络。内容管理系统作为一个中央存储库，可以集中存储相关内容，具有群组管理、版本控制等功能。版本控制是内容管理系统的主要优势。

　　Netlify cms 的优点

　　以下是编辑界面效果：

　　

　　部署Hexo相关操作

　　由于关于hexo部署的文章已经有很多了，而且我也从网上看到了详细优质的hexo部署教程，这里就不解释如何部署hexo了。提供相关链接如下：

　　Hexo 官方指南

　　NextT 主题

　　Git 页面用户指南

　　Hexo + NexT + GitHub Pages 超深度优化打造个性化博客

　　如何部署 Netlify

　　首先要做的是注册。建议直接使用GitHub账号，然后按照提示授权选择仓库。部署参数如图：

　　

　　部署环境设置：

　　

　　第一次部署后会要求设置域名，直接输入自己的域名，然后默认即可。接下来，设置DNS，如下图：

　　

　　然后按照提示，进入你的域名服务商的管理界面，将域名服务器（DNS服务器）更改为Netlify提供的地址，如下图：

　　

　　接下来，设置 HTTPS。其实Netlify会自动为我们设置好，但是由于域名服务器的缓存（更改后的DNS无法及时生效），这个时间可能会比较长，所以可以去前面提到的谷歌文档。网站清除缓存以加快进程。

　　

　　其他设置压缩css、js、图片加速访问：

　　

　　至此，我们的netlify部署成功了，

　　可以查看自动部署状态：

　　

　　​​​

　　Netlify cms操作记录添加依赖

　　在hexo文件夹的左键菜单中打开git bash

　　

　　输入以下内容：

　　yarn add hexo-netlify-cms

// or npm

npm i hexo-netlify-cms --save

　　在hexo的config配置文件中添加如下内容（非next主题配置）

　　netlify_cms:

config_file: netlify.yaml

　　在hexo根目录下新建netlify.yaml文件，添加如下内容

　　backend:

name: git-gateway

branch: master

media_folder: source/images

public_folder: /images

publish_mode: editorial_workflow

# pages auto generate

pages:

enabled: true

# over page collection config

# if fields not set, would use posts fields config

config:

label: "Page"

delete: false

editor:

preview: true

# fields:

# through hexo config over fields

over_format: true

scripts:

- js/cms/youtube.js

- js/cms/img.js

# A list of collections the CMS should be able to edit

collections:

# Used in routes, ie.: /admin/collections/:slug/edit

- name: "posts"

# Used in the UI, ie.: "New Post"

label: "Post"

folder: "source/_posts" # The path to the folder where the documents are stored

sort: "date:desc"

create: true # Allow users to create new documents in this collection

editor:

preview: true

fields: # The fields each document in this collection have

- {label: "Title", name: "title", widget: "string"}

- {label: "Publish Date", name: "date", widget: "datetime", format: "YYYY-MM-DD HH:mm:ss", dateFormat: "YYYY-MM-DD", timeFormat: "HH:mm:ss", required: false}

- {label: "Updeted Date", name: "updated", widget: "datetime", 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}

　　在 Netlify 中启动服务 启动服务：

　　

　　添加netlify-identity-widget.js，代码如下

　　​​​

　　

　　同时，为了防止你的文章被任意修改，设置为仅邀请模式：

　　

　　您可以发送具有权限的电子邮件邀请，最多 5 人。同时，您还可以添加使用您的 github 帐户登录的选项：

　　

　　完成后在你的网站添加后缀/admin，就会进入在线编辑界面（你也可以像我一样做个按钮放在博客侧边栏，方便操作）

　　

　　

　　参考链接：

　　部署 Hexo 静态博客到 Netlify

　　Hexo Netlify cms

　　不足之处

　　git fetch --all && git reset --hard origin/master && git pull

　　远程仓库拉取命令后，强制覆盖本地的，因为远程仓库被netlify自动部署后，远程仓库和本地仓库的内容会不一样

　　待续

　　个人主页：42one.xyz