广告

使用PagesCMS和GitHub打造免费CMS网站

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

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

  一、架构原理

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

  二、搭建流程

1、创建GitHub专属网站仓库

登录GitHub,新建仓库,仓库名为:你的用户名.github.io,选择Public公开仓库,初始化空白仓库。

2、创建Hugo网站

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

3、配置GitHubActions

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

4、配置PagesCMS后台

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

media:

input:”static/images”#图片上传存放目录(Hugostatic,会被发布到网站根目录)

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网站的仓库,进入管理面板,就可以管理文章、媒体了,点击“Addanentry”可以发布一篇新文章,旧文章点“Edit”可以编辑,正文内容并非可见即所得的形式,需要自己写Markdown语法,建议现在记事本里写好内容,转为Markdown语法后再粘贴进去。图片拖拽上传,图片自动存入指定目录下。

3.自动发布更新

点击保存后,PagesCMS会自动提交Markdown文件到仓库,触发GitHubActions自动编译部署,等待1-2分钟,网站即可更新完成。

  结语

这套PagesCMS+Hugo+GitHubPages方案,是目前个人免费博客的最优解之一。既解决了传统静态博客“无后台、难维护”的痛点,又规避了WordPress“付费、卡顿、不安全”的缺陷,实现了免费、好看、高速、易用、免维护的完美博客体验。

月光博客

请登录后发表评论

    没有回复内容