如何替换WordPress这样的动态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“付费、卡顿、不安全”的缺陷，实现了免费、好看、高速、易用、免维护的完美博客体验。

以前搭建博客或CMS网站，绝大多数人都会选择WordPress、Typecho、Zblog等基于PHP+MySQL的动态CMS系统，这类传统程序虽然功能成熟、后台可视化易用，但对于个人博客场景来说，存在成本高、维护麻烦、性能差、不安全等一系列问题。

这样的系统存在的问题是，需要服务器支持php、mysql数据库等服务，服务器成本较高，php程序漏洞多，很容易被挂马、被注入攻击，而且遇到大流量访问，服务器往往会遇到各种瓶颈，出现卡顿、报错等情况。

因此，很多人尝试使用Hugo等静态网站系统来搭建博客或CMS网站，由于Hugo本身并没有markdown写作界面，因此需要使用第三方的CMS系统来实现写作和管理文章的功能。

很多新手一般会选择用Obsidian来写markdown文章，把仓库建立在Hugo站点目录下，搭配各类发布插件推送到Github，但实际使用后就会发现，相关配置繁琐、坑点极多，各种BUG不断，调试排查全靠自己上网摸索。

实际上，现在AI时代已经到来了，我们完全可以采用另外一个简单易用方案来实现免费CMS网站的功能，经过实测对比，VS Code + Front Matter CMS + Hugo + GitHub 是目前最适合新手、最稳定、零折腾的免费个人博客网站方案。

一、工作原理

整体逻辑并不复杂，在 VS Code 装好 Front Matter CMS 插件，利用插件自动处理文章头部配置，直接写 Markdown 内容；写完把代码提交推送到 GitHub 仓库；仓库收到更新后触发 GitHub Actions，云端自动调用 Hugo 编译生成静态网页；最后由 GitHub Pages 对外提供网站访问。

简单说，我们只需要专注写内容，配置、编译、上线这些步骤都交给工具自动完成。

二、前置环境准备

本地电脑只需要准备三个软件，全部默认安装就可以，不用折腾额外设置。

第一个是 Git，主要用来做版本管理，我们本地写好的文章，靠它提交同步到 GitHub 上面。

第二个就是 VS Code，我们主要就在这个编辑器里面写文章、修改各类配置。除了VS Code，使用其他套壳软件也可以，例如：TRAE、Qoder、CodeBuddy、Antigravity等等。

第三个是 Hugo，记得一定要下载 Extended 扩展版本。平时主要用它新建站点，还有在本地预览博客实际效果。真正网站上线编译，是在 GitHub 服务器上跑的，就算关掉自己电脑也不受影响。

三、初始化Hugo博客项目并绑定GitHub仓库

1. 本地创建Hugo站点

打开电脑终端，一行一行复制执行下面的命令，就能生成完整的 Hugo 博客目录。

# 创建博客站点文件夹
hugo new site my-blog
# 进入项目目录
cd my-blog
# 初始化git仓库
git init
# 安装简约主题PaperMod
git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

2. 基础配置修改

进到生成好的项目文件夹，找到hugo.toml，把下面内容粘贴进去，记得把网址改成自己 GitHub 账号和仓库名字。

baseURL = 'https://你的用户名.github.io/仓库名/'
locale = 'zh-cn'
title = '个人技术博客'
theme = "PaperMod"

3. 关联GitHub远程仓库

先打开 GitHub 网页，手动新建一个空仓库，不要勾选 README、许可证这些选项。

回到终端执行下面代码，把本地全部文件推送到刚建好的 GitHub 仓库。

git add .
git commit -m "初始化hugo博客项目"
git remote add origin 你的仓库地址
git push origin main

四、VS Code核心配置：Front Matter CMS插件搭建本地CMS

这一步是这套方案的核心，不用每次手写一大段文章头部配置，借助插件完成文章管理。

1. 插件安装

打开 VS Code 的插件市场，搜索“Front Matter CMS”。注意选择正式稳定版，不要装 BETA 测试版本，正式版的功能完全够用。

2. 插件初始化（适配Hugo）

用VS Code打开博客项目根目录（必须打开根目录，不可打开子文件夹），左侧点击Front Matter CMS图标，启动初始化向导，框架选择：Hugo，文章目录配置：content/posts。

五、配置 GitHub Actions 实现自动部署

配置完成之后，只要本地把代码推送到 GitHub，就会自动编译并且更新网站，不用手动操作打包。

1. 打开你的 GitHub 仓库页面，进入 Settings → Pages；

2. Deployment source 选项选择 GitHub Actions；

3. 选择浏览工作流模板，搜索 Hugo，选用官方 Hugo 模板，点击 Configure；

4. 保存文件，工作流配置就写入仓库，自动部署正式生效。

六、平时写文章和发布的实际操作

全部环境搭好之后，后续写博客就很简单，一共几步：

1. 打开 Front Matter 面板，点击创建新文章。插件会自动生成 Hugo 需要的头部信息，自动填好标题、时间、标签、草稿标识。

2. 在 VS Code 里面写 Markdown 正文，图片直接拖拽进去，插件会自动保存图片并生成访问链接。

3. 内容写完检查完毕，如果要对外发布，把文章头部的 `draft: true` 修改成 `draft: false`。draft 为 true 代表草稿，Hugo 不会把这篇文章编译到线上网站。

4. 通过 VS Code 的 Git 功能，提交改动并推送到 GitHub 远程仓库。

5. 等待 GitHub Actions 执行构建，一般几十秒到一分钟，线上网站就完成更新。

过程里碰到配置报错、页面渲染异常、部署失败之类的问题，不用到处搜帖子慢慢试。直接复制报错信息丢给 VS Code 内置 AI，让它帮你定位和修改配置，大部分问题很快就能处理完成。

之前我介绍了Cloudflare Pages，GitHub Pages等静态网站托管平台，那么，用户如果想搭建一个静态网站，还需要一个静态网站生成软件，在大量的同类工具里，例如Hexo、Jekyll等等，Hugo是速度最快，而且上手也最容易的一个选择，由于Hugo是Go语言编写，速度极快，几千页的网站能在几秒钟生成完毕，这也是目前个人网站搭建平台最优的选择之一，下面我就介绍一下如何使用Hugo搭建一个静态网站。

第一步：安装Hugo

安装Hugo之前，首先要先从下面的两个地址来安装Git和Go：

Git下载地址：https://git-scm.com/install/

Go下载地址：https://go.dev/dl/

安装完成之后，就可以从下面的地址来安装Hugo：

Hugo下载地址：https://github.com/gohugoio/hugo/releases/latest

地址里有很多个Hugo版本，建议选择下载 Hugo Extended 这个版本，大多数包管理器默认安装的就是这个版本。

对于Windows系统来说，Hugo本身只有一个EXE文件，下载后将其放在任意目录均可，但该目录需要在“系统变量”的Path里才行，比如C:\Windows目录。

之后，打开cmd或者powershell，输入hugo version可以查看当前Hugo程序的版本号。

第二步：创建站点

安装好之后，就可以使用Hugo来搭建网站了。

先创建一个目录，然后用一条命令就能生成一个新静态网站的基础目录结构：（本例创建的站点名为mysite，大家可以自定义）：

hugo new site mysite

之后，我们会看到当前目录新增了一个mysite的文件夹，这个文件夹就是Hugo的工作目录。

下面简单说明几个关键目录的作用：

content/：存放你的文章和页面内容（Markdown 文件）

layouts/：网站模板文件

static/：静态资源，比如图片、字体，会原样复制到最终生成的网站中

themes/：主题存放目录

hugo.toml：站点的核心配置文件

修改 hugo.toml 文件，可以修改网站的语言、标题、网址、分页、permalinks等功能。

第三步：安装主题样式

Hugo 本身不自带任何样式，需要单独安装主题。这里以轻量、简洁著称的 PaperMod 主题为例，用 Git 子模块的方式引入：

git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

之后编辑 hugo.toml ，在文件中加入下面这一行，指定使用这个主题：

theme = "PaperMod"

如果不用Git子模块，也可以直接从GitHub仓库下载该主题的压缩包，解压到 themes/ 目录下即可，效果是一样的。

第四步：写文章

创建好了站点后，现在网站中还什么内容都没有，执行下方命令创建一篇markdown格式的文章：

hugo new posts/hello-world.md

生成的文件位于 content/posts/hello-world.md，打开后大致长这样：

---
title: "Hello World"
date: 2026-08-30T10:00:00+08:00
draft: true
---

顶部用 --- 包裹起来的部分是文章的配置信息，用来定义标题、发布时间、是否为草稿、标签、目录等元信息。正文部分使用标准 Markdown 语法编写就可以了，支持标题、列表、代码块、图片等常见格式。

在顶部加入 tags 和 categories 字段，配合主题自带的归档页面，可以自动生成标签云和分类列表。

默认新建文章为草稿状态，必须将 draft 改为 false，上线后才能正常展示。

把图片放进 static/images/ 目录，在文章中用 /images/xxx.png 的相对路径引用即可。

第五步：预览并生成静态文件

一切准备就绪后，可以使用下面的命令，启动本地开发服务器，实时预览效果：

hugo server

命令执行后，在浏览器打开 http://localhost:1313 就能看到网站了。修改任何文件保存后，页面会自动刷新，不需要手动重启服务。

确认内容和样式都没问题之后，执行下面的命令生成最终的静态网站：

hugo

Hugo会把所有内容编译到 public/ 目录下，这里面的文件就是可以直接部署的完整网站，全是纯 HTML、CSS 和 JS，不依赖任何后端服务。把这个目录发布到Cloudflare Pages或GitHub Pages等静态网站托管平台，即可完成部署上线，具体如何部署，可参考我之前的两篇文章。

如果对于页面不满意，可以修改模板，强烈建议使用目前的Codex、Antigravity或Trae等AI编程工具来修改模板，效率非常高。

小结

总的来说，整个流程走下来其实并不复杂：安装 Hugo、初始化站点、装主题、写 Markdown、本地预览、生成静态文件、推送部署。相比传统的 CMS 建站方式，Hugo 的好处在于内容都是纯文本文件，可以用 Git 做版本管理，也不用操心数据库和服务器安全问题，特别适合个人博客、文档站点这类以内容为主的场景。

我在使用Cloudflare Pages的时候，发现了一个非常奇怪的问题，就是发布的带有.html后缀的网页，会自动308重定向到一个没有.html的地址，并且，这个行为是Cloudflare Pages底层硬编码，无法通过配置参数关闭。

这个问题我用中文咨询了所有主流AI，都没有得到好的解决，有给方案说，使用.htm代替.html，因为Cloudflare Pages不会重写.htm文件，但这对于老网站的SEO来说显然不行，还有一个方案说是使用 Pages 函数进行拦截，说将一段代码放入functions/[[path]].js 文件中，然后重新发布，然后就会返回 200 + HTML内容，不会再有308重定向的状态码。我按照其方法发布了，也不行。

接着，我使用Google搜索“Cloudflare Pages html 308 Permanent Redirect”这样的关键词，看到一大堆Cloudflare的用户反馈同样的问题，但每一个问题都没有给出解决方案，翻了好几页也没找到解决方法。

后来，我用Google Translate将我原先的问题翻译为英文，然后提交给Google Gemini，这时候Gemini给出了一个全新的方案，这是以前没见过的，我按照这个新方案试了一下，竟然成功了，使用 curl -I URL，得到的回应从308变成200了，再访问网页，也没有再跳转了，看来还是英文AI更靠谱啊。

这个解决方案，通过使用Cloudflare Pages 函数（中间件）绕过308重定向限制，在重定向发生之前拦截请求，在内部获取HTML，并将其连同200 OK状态一起返回给浏览器。

下面就是保留.html扩展名的解决方案：

1、在项目根目录（与输出/构建目录同级，但不要位于其内部）创建一个文件夹functions。

2、在它里面创建一个名为_middleware.js的文件。

3、添加以下代码以拦截.html请求：

JavaScript代码如下：

export async function onRequest(context) {
  const url = new URL(context.request.url);
  // 1. Check if the incoming request is for an .html file
  if (url.pathname.endsWith('.html')) {
    // 2. Remove the .html extension for the internal lookup
    url.pathname = url.pathname.slice(0, -5);
    // 3. Clone the original request (to keep headers) but use the new URL
    const newRequest = new Request(url.toString(), context.request);
    // 4. Fetch the extension-less asset internally. 
    // This returns the 200 HTML response directly to the browser.
    return context.env.ASSETS.fetch(newRequest);
  }
  // For all other requests, proceed to normal Cloudflare routing
  return context.next();
}

这种方法的原理是，当用户请求.html页面时，此中间件会捕获该请求，这个函数会在后台秘密地向 Cloudflare 请求不带扩展名的页面路径，然后，它会获取成功的HTML 响应，并将其直接发送回原始URL，这时候，旧永久链接将立即加载，无需任何重定向跳转。

需要注意的是，这个功能并不是无限使用的，免费的Cloudflare Pages用户每天的额度是十万次，超过十万次以后当天该函数就停了，需要等到第二天重置额度。

摘要：自动更新和多平台同步播客的方法：找到一些特定材料，分批导入notebooklm，输入提示词，生成音频文件。在喜马拉雅（国内）或spotify（国外）上创建播客，将音频文件上传，并生成RSS Feed。在iTunes、Youtube、网易云音乐等平台创建播客，选择使用RSS，并将其导入。之后，只需要更新喜马拉雅或spotify，即可同步将播客发布到多个平台。

今天我将介绍一下怎么用 AI + 自动化工具，实现播客内容的“一次制作、多平台分发”。

播客是啥？现在谁还在听？

播客（英文：Podcast）是指的是通过数字广播技术制作的，在互联网上传播的音频内容。简单来说，播客就是“可以订阅的音频节目”，你可以把它理解成“音频版的专栏文章”或者“随时能听的电台节目”。它不像直播那样需要你盯着屏幕，也不像视频那样吃流量，适合开车、做饭、散步的时候听。

在内容泛滥的今天，播客反而成了注意力稀缺下的“净土”——节奏慢、干货多、听众粘性强。

目前主流播客平台包括：

国内平台： 喜马拉雅、网易云音乐、小宇宙

海外平台： Apple Podcasts、Spotify、YouTube Music、Pocket Casts

大部分平台都支持用 RSS Feed 自动订阅内容更新——这就是我们可以“自动同步”的关键点。

根据《PodFest China2020中文播客听众与消费调研》显示，中文播客听众最常使用的5个收听渠道是：Apple Podcasts（49.7％）、喜马拉雅（37.9％）、网易云音乐 （35.0％）、微信公众号内嵌音频 （21.9％）和Pocket Casts（19.5％）。

为什么要自动更新播客？

我们做内容的都知道，最大的问题不仅仅是创作，而且发布太繁琐也是个大问题。你要一条条上传音频、写描述、同步封面，光是把一集播客发到5个平台，就能让人劝退。

但如果有个方法，可以让我只上传一次，就能全平台同步更新，是不是省时省力又体面？于是就有了这套玩法：AI生成播客 + 多平台同步。

第一步：用AI批量生成播客内容

先说最核心的一步——播客内容从哪来？

我的方法是：找一些结构化或主题清晰的素材（比如电子书章节、技术文章合集、行业报告等），然后分批导入 NotebookLM 这个工具。

这个工具的牛点在于，它能理解资料内容，然后你可以通过提示词让它生成一段质量不错的，类似播客主持人口吻的音频。通过对提示词的调整，可以从不同角度来优化和调整输出的播客音频。

第二步：在主平台创建播客并上传音频

内容搞定之后，得找个“主阵地”上传音频文件。我试了两家：

Spotify for Podcasters（海外）

喜马拉雅（国内）

这两家都有一个共同特点：能生成 RSS Feed，用户量大。

这个 RSS Feed 非常关键，它就像播客的“分发中枢”，有了它，其他平台就可以自动订阅并更新你的播客内容。

这里重点讲一下喜马拉雅的RSS Feed，隐藏的非常深，不容易找到，登录喜马拉雅创作中心后台，点击“创作实验室”，选择“Apple 播客托管服务”，即可生成一个RSS Feed，这个RSS Feed不仅仅可以同步到Apple Podcasts，同步到其他播客平台也没问题。

Spotify的RSS Feed就好找多了，登录spotify for creators的后台，点击“设置”-“Availability”，即可看到RSS Distribution里面的链接。

你上传好音频，设置好标题、描述、封面，播客就上线了，同时也自动生成了对应的 RSS 链接。

第三步：把RSS同步到其他平台

拿着刚才生成的 RSS 链接，我们可以去以下平台注册并导入：iTunes Podcasts（Apple）、YouTube Music、网易云音乐、小宇宙、Pocket Casts等等。

这些平台在创建播客时一般都有“使用RSS导入”选项，只要粘贴你的链接，它们就能自动抓取更新。

这样一来，你只需要维护喜马拉雅或者Spotify的那一个源头，其余平台会自动同步更新，不用你操心。

后续更新流程就是“一次上传，全网同步”。

从第二期音频开始，你就爽了。流程如下：

把新内容丢进 NotebookLM，设计一个提示词，生成音频。

上传音频到你的主平台（比如喜马拉雅）。

所有绑定RSS的平台都会自动更新。

这不就是我们程序员最爱的“自动化工作流”吗？

一些实用小贴士

素材限制： NotebookLM 对处理的文本长度（包括中文）有以下限制：1、按来源文件限制：每个上传到 NotebookLM 的来源文件（例如 PDF、Google 文档、文本文件等）的字数上限为 50 万字。同时，上传的本地文件大小上限为 200MB。2、按笔记本限制：一个笔记本中可以包含的来源数量，普通用户上限为 50个。

节奏控制： AI生成内容最好控制在10~20分钟，既不累也容易被听完。

配图和封面： ChatGPT出图非常快，图片质量高，顺手还能给社媒配套宣传图。

结语：别等完美，先上车

很多人总觉得做播客门槛高，其实现在有了AI工具和自动化同步工具，真的不难。重要的不是一开始多完美，而是先跑起来，优化可以慢慢来。

如果你也想做知识型播客，这套方法值得一试：轻量、自动化、省心、可扩展。

我的播客地址

下面是我自己创建的各个平台的播客地址：

YouTube：https://www.youtube.com/@williamlong

Apple Podcasts：https://podcasts.apple.com/podcast/%E6%9C%88%E5%85%89%E6%92%AD%E5%AE%A2/id1816103541

Spotify：https://open.spotify.com/show/4iGoK7x88ul8V8MdibQy9C

喜马拉雅：https://www.ximalaya.com/album/92461056

网易云音乐：https://music.163.com/#/djradio?id=1224404483

小宇宙：https://www.xiaoyuzhoufm.com/podcast/68302549457b22ce0d25dc08