如何替换WordPress这样的动态CMS网站，上文提到的VS Code + Front Matter CMS + Hugo + GitHub是一个免费方案，但对于普通用户来说，使用VS Code还是有一定难度，无法像WordPress那样全部在网站上操作，因此，这里介绍一个更为简单的和WordPress一样的可视化后台的博客方案：PagesCMS + Hugo + GitHub Pages。

这套方案可以完美替代传统的WordPress系统，具有静态网站高速访问、全自动部署、可视化后台发文的三大特点，没有任何费用，个人用户可以长期零成本使用，个人博客、技术随笔、笔记站点完全够用。

一、架构原理

这套方案使用Pages‑CMS这个免费服务，技术人员可以搭好系统配置，做完初期的配置设置，之后，没有任何技术基础的客户可以使用Github账号登陆Pages‑CMS，然后通过网站的CMS界面发布和管理文章，保存提交之后，Github Actions自动部署发布，网站自动实时更新。

二、搭建流程

1、创建 GitHub 专属网站仓库

github.io

，选择 Public 公开仓库，初始化空白仓库。

2、创建 Hugo 网站

本地克隆仓库，新建并初始化一个Hugo站点，同步该仓库。

3、配置 GitHub Actions

访问GitHub仓库，在Settings-Pages-Deployment source 选项选择 GitHub Actions，选择浏览工作流模板，选用Hugo模板，点击 Configure，保存文件，工作流配置就写入仓库，自动部署正式生效。

4、配置 Pages‑CMS 后台

使用GitHub登陆Pages‑CMS网站，选定目标仓库，新建并修改一个配置文件，该文件会被保存在仓库根目录的 .pages.config.yml，适配 Hugo 配置的文件内容如下：

media:
媒体：

input: “assets/images”

output: “/images”

content:

- name: “posts”

label: “博客文章”

type: “collection”

path: “content/posts”

create: true
创建：true

delete: true
删除：true

fields:
领域：

- name: title
- 名称：标题

label: 文章标题

type: string
类型：字符串

- name: date
- 名称：日期

label: 发布日期

type: date
类型：日期

- name: draft
- 名称：草案

label: 草稿状态

type: boolean
类型：布尔值

- name: description
- 名称：描述

label: 文章摘要

type: string
类型：字符串

- name: tags
- 名称：标签

label: 标签

type: list
类型：列表

- name: categories
- 名称：类别

label: 分类

type: list

- name: body
- 名称：主体

label: 正文内容

type: markdown
类型： Markdown

保存好了以后，所有前期的操作配置就完成了。

三、Pages‑CMS后台日常发文

1. 登录后台

前期配置好了以后，后面就可以全在浏览器上进行操作管理了，客户可以打开Pages‑CMS官网：

https://app.pagescms.org

，使用GitHub账号授权登录，即可进入后台进行管理。

2. 新建/编辑文章

登录之后，选择打开CMS网站的仓库，进入管理面板，就可以管理文章、媒体了，点击“Add an entry”可以发布一篇新文章，旧文章点“Edit”可以编辑，正文内容并非可见即所得的形式，需要自己写Markdown语法，建议现在记事本里写好内容，转为Markdown语法后再粘贴进去。图片拖拽上传，图片自动存入指定目录下。