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

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

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

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

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

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

　　一、工作原理

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

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

　　二、前置环境准备

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

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

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

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

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

1.本地创建Hugo站点

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

#创建博客站点文件夹

hugonewsitemy-blog

#进入项目目录

cdmy-blog

#初始化git仓库

gitinit

#安装简约主题PaperMod

gitsubmoduleaddhttps://github.com/adityatelange/hugo-PaperMod.gitthemes/PaperMod

2.基础配置修改

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

baseURL=’https://你的用户名.github.io/仓库名/’

locale=’zh-cn’

title=’个人技术博客’

theme=”PaperMod”

3.关联GitHub远程仓库

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

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

gitadd.

gitcommit-m”初始化hugo博客项目”

gitremoteaddorigin你的仓库地址

gitpushoriginmain

　　四、VSCode核心配置：FrontMatterCMS插件搭建本地CMS

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

1.插件安装

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

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

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

　　五、配置GitHubActions实现自动部署

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

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

2.Deploymentsource选项选择GitHubActions；

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

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

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

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

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

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

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

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

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

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

月光博客