Fivor 
如何0成本搭建一个Blog网站
还记得二十年前，还只是初中生的我，每周最期待的就是去上微机课（也就是现在的电脑课），当然期待的是终于能玩4399小游戏，那时进教室前还得先穿鞋套。老师就曾讲过如何制作网页和搭建简单的个人博客，其实就是几个静态页面互相跳转。那个时候互联网刚刚兴起，博客还很流行。前不久在Github上偶然看到有个不错的Blog模板，于是便想着自己也搭建一个，也算是接到二十年前扔出的回旋镖。
Blog
没办法，自己不会编程，只能是照葫芦画瓢。好在Github上有个还不错的开源Blog项目，完全不会写代码就可以搭建和管理自己的blog。无需服务器，也无需任何费用。
1. 部署
我最熟悉的还是Vercel，这里就以Vercel为例，首先在Github上Fork这个Blog项目—— 2025-blog-public。
然后打开Vercel，创建 Project => Import 这个项目，无需配置，直接点部署。
大约 60 秒后部署完成，就会有一个 vercel 直接生成的域名，比如：fivor-blog.vercel.app
这个Vercel的域名国内访问可能比较慢，可以在设置里绑定自己的域名，这样就可以正常访问，后续Markdown及图床同理。
到这里部署的网站已经基本完成，下一步创建 Github App。
2. 创建 Github App 链接仓库
在 github 个人设置里面，找到最下面的 Developer Settings ，点击进入
进入开发者页面，点击 New Github App
GitHub App name 和 Homepage URL , 输入什么都不影响。Webhook 也关闭，不需要。
只需要注意设置一个仓库 write 权限，其它不用。
点击创建，谁能安装这个仓库这个选择无所谓。直接创建。
3. 创建密钥
创建好 Github App 后会提示必须创建一个 Private Key，直接创建后，会自动下载（不见了也不要紧，后面自己再创建再下载就行）。这个文件很重要，一定要保留好。页面上有个 App ID 需要复制一下，再切换到安装页面。
这里一定要只授权当前项目。
点击安装，就完成了 Github App 管理该仓库的权限设置。下一步就是让前端知道推送那个项目，就是最开始提到的环境变量。（如果你不会设置环境变量，直接改仓库文件 src/consts.ts 也行。因为是公开的项目，所以环境变量意义也不大）
直接输入这几个环境变量值就行，一般只用设置 OWNER 和 APP_ID。其它配置不用管，直接输入创建就行。
设置完成后，需要手动再部署一次，让环境变量生效。
- 可以直接 push 一次仓库代码会触发部署
- 也可以手动选择创建一次部署
4. 完成
现在，部署的这个网站就可以开始使用前端改内容，比如发布文章，或者更改一个分享内容。
提示：网站前端页面删改完提示成功之后，你需要等待后台的部署完成，再刷新页面才能完成服务器内容的更新哦。
5. 配置
首页右上角有一个不显眼的配置按钮，点击就能看到现在可以配置的内容。
可以在这里对网站进行个性化设置，设置好以后点击右上角 导入密钥，也就是上面下载的 Private Key 文件，后台就会自动完成部署发布，更新网站内容。
6. 写文章
到这一步Blog的框架都已经搭好，接下来就是往里面发布内容，点击首页右上角的 “写文章”。
在这里看到可以直接导入Markdwon文件，说实话我也是在这才知道这么好用的写作格式，终于不用在微信编辑器里一点点调整文章的样式。于是打开浏览器又是一顿搜搜搜，网上有很多现成的在线Markdown编辑器，用起来也非常方便，但是我还是想自己也搭建一个。
Markdown
在Github找了一个比较好用的Markdown排版助手—bm.md，
这个可以直接复制到微信公众号和知乎，就不用反反复复调格式，而且支持导入导出MD格式文件，另外还有13种排版的主题可以选择，支持实时预览，完全满足我的需求。
和上面部署Blog一样，Github上先Fork这个仓库，然后用Vercel导入，创建项目，绑定自己的域名，一气呵成。但是写文章经常需要上传图片，这个项目的作者已经给了一个现成的图床，可以直接上传图片，生成URL链接。但是我想着反正做都做了，索性再想想办法，搞一个自己的图床。
bd.md支持临时图片存储
支持上传图片到临时存储：
- S3 兼容存储（可配置）
- 支持拖拽图片到编辑器
- 支持粘贴剪贴板图片
- 文件大小限制 5MB
- 支持常见图片格式
图床
网上有很多付费和免费的图床方案，但终究还是赛博大好人Cloudflare给的免费方案最好。每个月有免费10GB流量，出口费用更是全部白给，对A类操作和B类操作有限制，但个人Blog使用根本用不完，也基本上属于白嫖方案。
首先还是要在Github上找个优秀的图床项目——CloudFlare-ImgBed，这个项目目前已经有4k个🌟。
1. Cloudflare Pages 部署
这个项目支持Docker和Cloudflare部署，我当然还是选择更熟悉的Cloudflare，当然首选还是Github上Fork本项目。
（1）创建 Pages 项目
- 登录 Cloudflare Dashboard
- 选择左侧菜单的 “计算和AI” -> “Workers & Pages”
- 点击 “创建应用程序”
- 在最下方
Looking to deploy Pages?选择 “Get started” - 在 “导入现有 Git 存储库” 处点击 “开始使用”
- 选择您 Fork 的
CloudFlare-ImgBed仓库 - 配置项目设置
- 点击 “保存并部署”，等待首次部署完成（约 2-3 分钟）
（2）配置数据库
数据库用于存储文件元数据，是必需的组件，可选数据库为 KV 数据库和 D1 数据库。根据自己使用场景从其中选择一种配置即可，这里以配置KV为例。
-
点击 “Workers KV”，“创建实例”，输入命名空间名称：
img_url（建议使用此名称），点击 “创建” -
返回您的 Pages 项目，选择 “设置” → “绑定”，点击 “添加” → “KV 命名空间”，填写绑定信息：
- 变量名称：
img_url（必须是这个名称） - KV 命名空间：选择刚创建的命名空间
- 变量名称：
-
点击 “保存”
（3）重新部署
绑定数据库后需要重新部署以生效：
- 进入项目的 “部署” 页面
- 找到最新的部署记录
- 点击右侧的 ”…” 菜单
- 选择 “重试部署”
- 等待部署完成
2. 配置说明
（1）存储渠道配置
存储渠道有以下五种，这里只以Cloudflare R2为例进行配置。创建R2存储桶需要绑定信用卡并订阅免费计划，这一步可能是整个文章里最麻烦的地方，需要大家多想想办法。
-
访问管理后台 访问
https://your-domain/dashboard，管理后台默认无需密码，登录后请及时设置管理员用户名和密码。 -
配置R2渠道，在项目设置中绑定 R2 存储桶：
- 选择 “设置” → “绑定”
- 添加 “R2 存储桶”
- 变量名称：
img_r2 - R2 存储桶：选择已创建的存储桶
- 在管理后台配置：
- 进入 “系统设置” → “上传设置”
- 配置 R2 渠道参数
- 配置 S3 渠道
在管理后台的 S3 渠道配置中填入：
- Access Key ID：访问密钥 ID
- Secret Access Key：机密访问密钥
- Bucket Name：存储桶名称
- Endpoint：服务端点（完整 URL，如 https://s3.us-east-005.backblazeb2.com）
- PathStyle：路径样式（如需兼容旧 S3 版本，开启此选项）
- Region：存储区域（可选）
（2）安全设置
- 认证管理
- 用户端认证：用于 Web 端用户登录和 API 认证
- 管理端认证： 管理员用户名和密码，用于访问管理后台
- 访问管理
- 域名过滤
- 放行域名：允许访问的域名列表（留空放行所有域名，否则需要手动添加图床自身域名）
- 白名单模式：启用后仅允许加入白名单的文件被访问
- 网页设置：可以对搭建的图床网站进行个性化设置，如有多个存储渠道，可以选择默认上传的存储渠道。
3. 搭建完成
登录网站后，可以选择拖拽上传，也可以直接粘贴文件，网站就会上传文件，并给出URL，很贴心的给出了一键粘贴。这个就是我按照上面教程搭的图床 Fivor ImgHub，访问密码是fivor。
3. MD设置
完成以上步骤，返回Vercel里的Markdown项目，在环境变量里输入S3存储桶的参数，也就是上面创建的R2存储桶，最后再部署一次。然后在Markdown里直接粘贴图片，就会后台上传到R2存储桶里。当然也可以在图床网站里上传，粘贴url放到Markdown里。
小结
以上便是搭建一个Blog的全部流程，主要分为Blog/Markdown/图床三部分，分别对应Github上三个现有的开源项目。全程不用写一行代码，只要能看懂说明文档，只要花点时间就能0成本完成，后续正常使用也没有任何费用。如果只是想搭建个Blog，那就只需要看完前三分之一的内容即可。
支持与分享
如果这篇文章对你有帮助，欢迎分享给更多人或赞助支持！