最近将博客迁移到Hugo 弄了个CMS方便写文章和编辑文章等,然后想着做个教程吧,记录一下,不仅限于Hugo,其他基于git的文章文档等都适用,如vuepress vitepress等
1.在hugo项目创建以下文件
static/admin/config.yml (后期就配置这个就行)
backend:
name: github
repo: Rakers1024/chengzz-hugo
branch: main
publish_mode: editorial_workflow
media_folder: assets/img
public_folder: /img
# 时区设置 - 使用中国标准时间 (UTC+8)
# 这样在 CMS 中创建的文章会自动使用正确的时区
locale: 'zh-Hans'
# Sveltia CMS 会自动处理时区转换为 UTC
collections:
- name: 'post'
label: '新建日常'
folder: 'content/posts'
create: true
slug: '{{year}}-{{month}}-{{day}}-{{slug}}'
fields:
- label: '标题'
name: 'title'
widget: 'string'
- label: '草稿'
name: 'draft'
widget: 'boolean'
default: true
- label: '发布日期'
name: 'date'
widget: 'datetime'
default: '{{now}}'
date_format: 'YYYY-MM-DD'
time_format: 'HH:mm'
format: 'YYYY-MM-DDTHH:mm:ssZ'
picker_utc: false
- label: '最后修改日期'
name: 'lastmod'
widget: 'datetime'
required: false
default: '{{now}}'
date_format: 'YYYY-MM-DD'
time_format: 'HH:mm'
format: 'YYYY-MM-DDTHH:mm:ssZ'
picker_utc: false
- label: '文章ID'
name: 'post_id'
widget: 'string'
required: false
default: '{{timestamp}}'
- label: 'URL'
name: 'url'
widget: 'string'
required: false
default: '/{{timestamp}}.html'
- label: '作者'
name: 'author'
widget: 'string'
required: false
default: '诚哥'
- label: '封面'
name: 'cover'
widget: 'image'
required: false
- label: '分类'
name: 'categories'
widget: 'list'
summary: '{{fields.category}}'
field:
label: '分类项'
name: 'category'
widget: 'string'
default: '日常干货'
- label: '标签'
name: 'tags'
widget: 'list'
summary: '{{fields.tag}}'
field:
label: '标签项'
name: 'tag'
widget: 'string'
- label: '正文'
name: 'body'
widget: 'markdown'
static/admin/index.html(这里我做了重定向 方便自己的域名支持单点登录,你可以删除,也可以自己改成netlify生成的域名。)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Content Manager</title>
</head>
<body>
<!-- Redirect to canonical domain if not already there -->
<script>
(function() {
const canonicalDomain = 'chengzz-hugo.netlify.app';
if (window.location.hostname !== canonicalDomain) {
const newUrl = 'https://' + canonicalDomain + window.location.pathname + window.location.search + window.location.hash;
window.location.replace(newUrl);
}
})();
</script>
<!-- Include the script that builds the page and powers Sveltia CMS -->
<script src="https://unpkg.com/@sveltia/cms/dist/sveltia-cms.js"></script>
</body>
</html>
2.去app.netlify.com创建项目部署自动化部署版
必须,因为单点登录只认这里的生成的域名
这就是根据你项目自动部署和配置的域名
3.去github创建auth授权app
注意这里的Authorization callback URL固定填写`https://api.netlify.com/auth/done` Homepage URL就填写netlify生成的那个
创建后得到客户端id和密钥 去
填入绑定即可
5.最后提交完代码等待自动构建,然后测试效果
访问自己的域名如我的就是:`https://chengzz-hugo.netlify.app/admin` 当然也可以用自定义域名(需要第1步的重定向)。如我访问:`https://chengzz.com/admin`一样重定向到`https://chengzz-hugo.netlify.app/admin` 就可以直接单点登录了。最终登录后如下
然后就可以对文章进行curd 了。
最后 感谢您的阅读!!