用PagesCMS和GitHub创建免费静态网站

admin2周前 (10-25)技术教程43

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

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

Webmaster.jpg

一、架构原理

这套方案使用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“付费、卡顿、不安全”的缺陷,实现了免费、好看、高速、易用、免维护的完美博客体验。


相关文章

Cloudflare Pages搭建个人网站指南

Cloudflare Pages搭建个人网站指南

在静态个人网站搭建领域,GitHub Pages 是入门首选,而 Cloudflare Pages 则是进阶最优解。相较于传统静态托管服务,Cloudflare Pages 拥有全球极速 CDN、无流…

xiaocms伪静态规则

xiaocms伪静态规则

XiaoCms企业建站版基于PHP+Mysql架构 是一款小巧、灵活、简单、易用的轻量级cms。能满足各种企业站 博客 等中小型站点。我之前有不少网站是用它建的。但最近发现了官方伪静态的一个问题,当栏…

一些常用的linux命令

一些常用的linux命令

Linux服务器之间互相传输文件的命令:scp。例如主机a中存在一个大文件 /opt/test/abc.zip,传到主机b中的:/opt/test/目录下,可登录到主机a下,使用scp命令如下:scp…

腾讯地图和百度地图把地址转换成经纬度坐标并传递给url

腾讯地图和百度地图把地址转换成经纬度坐标并传递给url

   腾讯地图坐标转换方法 <!--引入qq地图的api,要填上key--> <script charset="utf-8" src=…

用DD脚本给服务器重装纯净Linux系统

用DD脚本给服务器重装纯净Linux系统

在每次使用VPS之前,我都会习惯性地执行一次DD命令。 这样做的好处:一方面可以将系统更换为我熟悉的Debian;另一方面可以移除VPS供应商系统内置的“使用情况监控”,顺便修改SSH连接端口。…

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。