使用VS Code和Github打造免费网站系统

以前搭建博客或cms网站，绝大多数人都会选择、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，让它帮你定位和修改配置，大部分问题很快就能处理完成。