最近将博客迁移到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 了。

最后 感谢您的阅读!!