cms网站内容如何自定义(,主题丰富,,国内访问快,的博客渲染工具)
优采云 发布时间: 2022-04-05 20:26cms网站内容如何自定义(,主题丰富,,国内访问快,的博客渲染工具)
为什么说这是最佳实践?如果你和我一样是追求终极目标的人,希望你的博客全面、在线编辑(这是最重要的)、主题丰富、支持高度定制、国内快速访问,那么我认为这是最好的做法。
为什么要使用 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