零基础搭建静态博客
GitHub Pages + VitePress + PicGo 全免费方案，AI 时代人人都能拥有自己的博客
作者：一行栗子（B 站 up 主，搜索"一行栗子"即可关注）
编辑时间：26 年 6 月 3 日
文档说明
本文档面向萌新，快速搭建自己的静态博客。
前提条件：
- 有 VPN
- 有自己的 GitHub 账号
- 会使用最基础的 git（会提交、推送即可，团队协作命令不会也不影响）
先解答几个常见误解
我是代码萌新，不会写前端代码，可以搭建自己的博客吗？
可以的，友友。以前就有一些专门写博客的低代码模板平台，也是零代码搭建。现在是 AI 时代，通过 agent 去写前端，自由度更高，我们可以零前端代码就搭建出自己炫酷的博客。
需要收费吗？
不需要，友友。我们采用的全是免费方案：使用 GitHub 的 Pages 服务做托管，图床也使用 GitHub 服务，大平台不会在意这点流量费。
这套搭建方式的弊端？
因为我们使用的是 GitHub 托管，所以国内不开 VPN 访问会不稳定。但也不用担心，主播实测，国内 PC 端和移动端也是可以加载的，不稳定只代表加载慢，或者偶尔加载不出来，刷新一下就好。
至于图片加载，无论是前端代码的懒加载等优化，还是通过压缩图片体积，都可以很好地解决。
为什么不采用国内平台搭建？
国内阿里的 Gitee Pages 服务现在已经下架了，其他三方服务普遍收费，主播觉得没必要。
搭建流程很麻烦吗？时间成本高吗？
主播是每天工作之余抽时间，用了三天就搭建出一个还不错的博客，所以还是很简单的。
写在前面
对于非前端的同学，评价一个博客的质量，更多的还是内容创作的质量，而不是 UI 写得有多华丽（其实你愿意的话，这件事也很简单，不过是几句提示词罢了）。博客更多的是当成个人信息、技术、兴趣的展示。
那我们开始 build ..
首先，我们需要在 GitHub 上创建三个空仓库，仓库名随意：
| 仓库 | 可见性 | 用途 |
|---|---|---|
blog | 私有 | 代码编辑区，管理博客代码 |
blog_pages | 公共 | 页面发布展示区，会开启 GitHub Pages 服务 |
blog_images | 公共 | 图床，存放博客图片，类似 OBS / OSS |
创建仓库步骤
进入 GitHub 新建仓库页面：
点击 New repository 创建新仓库：
填写仓库名，在 Choose visibility 处选择仓库是公共（外网可访问）还是私有（仅自己可访问），按照前面表格说的权限配置即可，其他默认。
关联本地仓库
有了仓库后，我们需要在 IDEA（或其他编辑器，自由选择）里关联仓库：
克隆我们的空仓库：
项目初始化完毕，开始第一次 git 提交：
注意
IDEA 会初始化几个配置文件，有洁癖的友友可以忽略，不忽略也行，不影响项目。
点击推送后，就可以在 GitHub 上看到我们的项目了：
此时友友就可以看到我们的仓库已经有了第一次提交。按照同样的流程，把三个仓库都初始化好即可。
配置图床仓库
我们需要使用一个开源中转项目：PicGo
PicGo 是专门用来搭建图床的软件。
什么是图床？
把图片丢到网上寄存，拿回网址，到处粘贴使用——这个存图的网站 / 服务就叫图床。
获取地址：Releases · Molunerfinn/PicGo
在页面下滑找到下载地址：
安装完毕后运行软件。
获取 GitHub Token
我们需要在 GitHub 获取一个认证 Token。因为图床的使用方式是：你打开 PicGo 页面，把图片拖到上传栏，PicGo 会自动按你的配置，把图片存到你 GitHub 配置好的仓库里。所以需要你在 GitHub 生成一个有仓库写权限的 Token。
配置步骤：
首页找到设置入口：
点击设置：
下滑到左栏最底部，点击 Developer settings：
点击 Tokens (classic)，再点击右边创建一个新 Token：
只需要配置三个参数：
Note：令牌名字Expiration：过期时间Select scopes：只需要勾选repo权限
重要
把生成的 Token 立刻复制保存，只会显示一次！如果没配置上，可以把旧的删除，再重新创建。
在 PicGo 配置图床
进入 PicGo → 图床设置 → 选择 GitHub：
| 配置项 | 填写内容 | 说明 |
|---|---|---|
| 设定仓库名 | 你的GitHub用户名/仓库名 | 例如：zhang3/my-blog-images |
| 设定分支名 | main | 新仓库默认 main，旧的可能是 master，看仓库主页 |
| 设定 Token | 刚才复制的 ghp_xxxx | 完整粘贴，不要带空格 |
| 指定存储路径 | images/（推荐） | 会自动建 images 文件夹；留空则放根目录 |
| 设定自定义域名 | https://cdn.jsdelivr.net/gh/你的用户名/仓库名@main | 必须写这个，才会走 jsDelivr 免费 CDN |
主播说明一下：上传区用来上传图片，相册用来管理我们的图片。
此时就可以上传图片了，上传完会返回一个图片链接：
https://cdn.jsdelivr.net/gh/iuCoder99/blog_images@main/images/20260607113809458.png链接清理
返回的链接前后可能会有非法字符，记得自己清理一下。
然后点击链接看看能不能正常加载出图片。能正常显示，就可以在博客里引用，此时博客就不止有文字，还有图片了。
关于图片处理
正常图片体积通常以 MB 为单位，但如果直接这么大，前端加载会很有问题，所以我们需要图片压缩。
讲个小故事：微信朋友圈大家应该都知道，上传图片会吞画质——原本好几 MB 的图片，上传后微信会自动压缩到 100KB 左右，所以加载很快。再加上前端的懒加载，综合来看图片加载体验还是很好的。
推荐两个免费的专业图片压缩网站：
使用很简单，这里就不赘述了。
至此 blog_images 图床仓库大功告成。
配置 blog 与 blog_pages 仓库
再解释一下：
blog：你用 agent 编辑器打开、日常写代码的仓库blog_pages：blog打包后产物上传的仓库，通过 GitHub Pages 进行托管
blog 仓库配置
这一步主要是教大家通过和 agent 对话交互，初始化前端项目以及打包。
有前端基础的友友可以跳过这部分，直接瞬移到「为前端项目开启 GitHub Pages 服务」一节。
主播推荐的 agent 编辑器是字节家的 Trae CN。写这些简单的前端博客，用免费的内置模型就够了，很方便。
下载地址：https://www.trae.cn/
打开 Trae CN，然后打开我们 IDEA 初始化的那个项目文件夹。
使用 Trae Solo（Vibe Coding 模式）：
点击进行切换。
首次对话提示词（仅供参考，自由度已经很高了）：
当前是我自己的博客项目，现在需要你初始化一个项目规范文档、项目约束以及项目结构速览。前端技术栈使用 VitePress 1.6.4 + Vue 3 + ES Module，包管理器使用 npm，部署平台 GitHub Pages，同时初始化 trae rules 规则文件。初始化前端博客模板，供我查看。
建议
友友也可以在本次对话中交代自己的身份、昵称、博客设计风格等。
接下来主要就是两个 npm 命令：
npm run dev：运行测试版本npm run build：打包前端项目
点击链接即可看到本地预览，按 Ctrl + C 停止。
打包成品文件位置：
我们的成品就在 docs/.vitepress/dist（如果找不到位置，或有任何疑问，都可以问 agent）。
把成品复制到 blog_pages
然后把 dist 文件夹里的内容复制到 blog_pages 仓库根目录。
关于一些 git 使用细节，主播在文章末尾再阐述一下，照顾下萌新友友。
复制文件夹：
打开 blog_pages 项目，把 dist 里的文件粘贴到根目录：
主要参照物就是 index.html。
二次提交
如果是二次提交，记得先删除旧文件再粘贴新文件。
点击 git 提交：
等待提交完成。
在 GitHub 上开启 Pages 服务
打开 GitHub 查看：
可以看到打包好的博客文件夹已经推送上去了，接下来开启 GitHub Pages 服务：
点击 Settings：
自定义域名
这个自定义域名，主播记得是有开源项目可以免费获取的。嫌麻烦不配置也可以，后面有个性化需求再整。
开启成功后就可以看到 Deployments，代表我们的博客已经上线了：
到这里其实就已经大功告成，友友已经可以访问自己的博客项目了！
写在最后
整套方案总结起来就是：
- 三个 GitHub 仓库：代码区、发布区、图床
- PicGo + GitHub 做免费图床，jsDelivr 走 CDN 加速
- VitePress + Trae CN 用 AI 零代码生成前端
- 构建产物推送
blog_pages，开启 GitHub Pages 托管
整个流程零成本、零前端基础，只要愿意花一点点时间，每个人都能拥有属于自己的博客。
来交个朋友
有任何问题欢迎在 B 站搜索"一行栗子"找到我交流。也欢迎在博客 友链 留下你的小站，一起分享互联网的美好。