我要评论如何替换这样的动态cms网站，上文提到的vs code + front matter cms + hugo + github是一个免费方案，但对于普通用户来说，使用vs code还是有一定难度，无法像wordpress那样全部在网站上操作，因此，这里介绍一个更为简单的和wordpress一样的可视化后台的博客方案：pagescms + hugo + github pages。
这套方案可以完美替代传统的wordpress系统，具有静态网站高速访问、全自动部署、可视化后台发文的三大特点，没有任何费用，个人用户可以长期零成本使用，个人博客、技术随笔、笔记站点完全够用。
一、架构原理
这套方案使用pagescms这个免费服务，技术人员可以搭好系统配置，做完初期的配置设置，之后，没有任何技术基础的客户可以使用github账号登陆pages‑cms，然后通过网站的cms界面发布和管理文章，保存提交之后，github actions自动部署发布，网站自动实时更新。
二、搭建流程
1、创建 github 专属网站仓库
登录 github，新建仓库，仓库名为：你的用户名.github.io，选择 public 公开仓库，初始化空白仓库。
2、创建 hugo 网站
本地克隆仓库，新建并初始化一个hugo站点，同步该仓库。
3、配置 github actions
访问github仓库，在settings-pages-deployment source 选项选择 github actions，选择浏览工作流模板，选用hugo模板，点击 configure，保存文件，工作流配置就写入仓库，自动部署正式生效。
4、配置 pagescms 后台
使用github登陆pagescms网站，选定目标仓库，新建并修改一个配置文件，该文件会被保存在仓库根目录的 .pages.config.yml，适配 hugo 配置的文件内容如下：
media:
input: "static/images" # 图片上传存放目录（hugo static，会被发布到网站根目录）
output: "/images"
content:
- name: "posts"
label: "博客文章"
type: "collection"
path: "content/posts" # hugo文章md所在文件夹
create: true # 允许新建文章
delete: 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: body
label: 正文
type: markdown
保存好了以后，所有前期的操作配置就完成了。
三、pagescms后台日常发文
1. 登录后台
前期配置好了以后，后面就可以全在浏览器上进行操作管理了，客户可以打开pagescms官网：https://app.pagescms.org，使用github账号授权登录，即可进入后台进行管理。
2. 新建/编辑文章
登录之后，选择打开cms网站的仓库，进入管理面板，就可以管理文章、媒体了，点击“add an entry”可以发布一篇新文章，旧文章点“edit”可以编辑，正文内容并非可见即所得的形式，需要自己写markdown语法，建议现在记事本里写好内容，转为markdown语法后再粘贴进去。图片拖拽上传，图片自动存入指定目录下。
3. 自动发布更新
点击保存后，pagescms 会自动提交 markdown 文件到仓库，触发 github actions 自动编译部署，等待 1-2 分钟，网站即可更新完成。
结语
这套 pagescms + hugo + github pages 方案，是目前个人免费博客的最优解之一。既解决了传统静态博客“无后台、难维护”的痛点，又规避了 wordpress“付费、卡顿、不安全”的缺陷，实现了免费、好看、高速、易用、免维护的完美博客体验。
发表评论