Featured image of post 个人Blog搭建方案
Blog Update

个人Blog搭建方案

hugo-Github-CloudFare Page-CloudFare R2

🌏 架构总览

在开始动手前，先理解我们要搭积木的逻辑：

  1. 写作端 (Obsidian): 你的“中央司令部”。
  2. 图片端 (R2 + PicGo): 图片自动上传到 Cloudflare R2 对象存储（不占用 Git 仓库）。
  3. 代码端 (GitHub): 只存储纯文本 Markdown 和 Hugo 配置文件。
  4. 发布端 (Cloudflare Pages): 自动抓取 GitHub 代码，拉取 R2 图片，生成网站并推送到全球 CDN。

第一阶段：地基搭建 (安装工具)

请确保电脑里安装了以下 4 个软件：

  1. Git: 官网下载 (用于版本控制)。

  2. Hugo Extended: GitHub下载 (一定要下载带 extended 字样的版本，否则主题会报错)。

  3. PicGo: GitHub下载 (图片上传工具)。

  4. Obsidian: 官网下载 (写作工具)。

第二阶段：构建图床 (Cloudflare R2)

这是为了防止 GitHub 仓库爆炸，我们先搞定图片存储。 选择使用cloudfare R2 ，要先给账户添加支付方式，才能领取免费计划（每月免费10G存储空间）， 然后，也要用cloudfare托管一个域名来为下一步做准备，（域名可以是其他平台注册的（比如阿里云），只是需要在对应注册平台进行DNS服务器修改为cloudfare的

image.png|614x125 两个框分别填cloudfare域名托管后给出的两个域名DNS，来实现修改DNS服务器为cloudfare image.png|720x232

，同时为了防止可能原来注册域名可能用于解析原来平台的服务器了，现在更换解析平台了，由于cloudfareDNS的模式选择为Full（https安全模式），所以原来服务器平台的安全组中的443（https）与80（http）端口必须开放） image.png|720x151

  1. 创建存储桶:

  2. 开放访问 (关键):

    • 进入桶 -> Settings -> Public Access -> Connect Domain -> 绑定你的二级域名 (如 img.yourname.com)。 image.png|648x276

  3. 获取密钥:

    • R2 主页右侧 -> Manage R2 API Tokens -> Create API Token。

    • 权限: 选 Object Read & Write (读写)。

    • 保存: 复制 Access Key ID, Secret Access Key, 和 Endpoint。

  4. 配置 PicGo:

    • 安装 picgo-plugin-s3 插件。 image.png|457x136

    • 配置参数 (严格照抄):

      • 应用密钥ID: Access Key ID

      • 应用密钥: Secret Access Key

      • 桶名: blog-img

      • 自定义节点: https://<账号ID>.r2.cloudflarestorage.com (注意： 去掉末尾的 /blog-img)

      • 自定义域名（设置输出图片URL前缀同理）: https://img.yourname.com

      • 强制路径样式: 是 (True)

    • 测试: 拖张图片进 PicGo，能上传成功即完成。

第三阶段：本地 Hugo 搭建

1. 初始化:

找个文件夹，右键终端打开：

1
2
3

hugo new site myblog
cd myblog
git init  # 初始化Git仓库

2. 安装主题 (Stack):

1

git submodule add https://github.com/CaiJimmy/hugo-theme-stack.git themes/hugo-theme-stack

3. 配置:

把 themes/hugo-theme-stack/exampleSite/ 里的 content 文件夹和 hugo.yaml 复制到你的博客根目录覆盖。

4. 设置忽略文件 (防止垃圾上传):

在根目录新建 .gitignore 文件，填入：

1
2
3

/public
/resources
.DS_Store

5.若设置了自定义域名，应该在hugo.yml中添加域名url

image.png|720x197

第四阶段：推送到 GitHub

  1. 创建仓库: 去 GitHub 新建一个空仓库 my-blog。

  2. 推送代码:

Bash

1
2
3
4
5

git add .
git commit -m "init"
git branch -M main
git remote add origin https://github.com/你的用户名/my-blog.git
git push -u origin main

第五阶段：Cloudflare Pages 自动上线

  1. 连接:

Cloudflare 后台 -> Workers & Pages -> Create application -> Pages -> Connect to Git -> 选择 my-blog 仓库。

  1. 配置构建 (抄作业):

  • Framework preset: 选 Hugo。

  • Build command: hugo --gc --minify。

  • Build output directory: public。

  1. 环境变量 (必填，否则报错):
  • 添加变量 HUGO_VERSION，值填 0.118.0 (或更高)。

  1. 部署: 点击 Save and Deploy。

  2. 绑定域名: 部署成功后，在 Custom domains 里绑定你的主域名 blog.yourname.com。

第六阶段：Obsidian 终极配置 (整合 PicGo + Publisher)

这是让你“像发朋友圈一样发博客”的关键。

1. 配置图片自动上传

image.png|720x540

  • 安装 Image Auto Upload Plugin。

  • 设置默认上传器为 PicGo。

  • 开启 Auto upload on paste。

  • 效果: 粘贴截图 -> 自动变成 R2 图床链接。

2. 配置文章自动发布 (GitHub Publisher)

  • 安装 GitHub Publisher 插件。

  • 连接设置:

  • Repo Name: my-blog

  • User: 你的 GitHub 用户名

  • Token: 去 GitHub 申请一个 Repo 权限的 Token 填入。

  • 上传路径:

  • Default Folder: content/posts (Hugo 的默认文章目录)。

  • 文本转换:

  • 开启 Convert WikiLinks (把 [[链接]] 转为 []())。

  • 重要: 不要配置 Image 上传相关的设置，因为我们已经用 PicGo 处理好图片了，这里只传文本。

🎉 最终使用流程 (Day-to-Day)

现在，你已经搭建好了一套全自动流水线。以后的每一天，你只需要做三件事：

  1. 写:

打开 Obsidian，新建笔记。直接粘贴图片，看着它自动变链接。

Markdown

1
2
3
4
5
6
7
8

---
title: 我的新文章
date: 2023-10-27
description: 这里的描述会显示在卡片上
image: cover.jpg (可选)
---
这是正文...
![](https://img.yourname.com/cat.jpg)
  1. 发:

在 Obsidian 里按 Ctrl+P (或设置好的快捷键)，选择 Upload active note。

  • 后台动作: 插件把文字推送到 GitHub。
  1. 看:

Cloudflare Pages 检测到 GitHub 有新文字，自动拉取 R2 的图片，构建网站。

等待 1 分钟，你的博客就更新了。

💡 为什么这么选？(总结)

  • Hugo: 生成速度最快，不用担心文章多了卡顿。

  • GitHub: 只存代码，仓库永远轻量级，不会被封号。

  • R2 图床: 10GB 免费存储 + 无限流量，图片随便放，不怕刷爆卡。

  • Cloudflare Pages: 全球 CDN 加速，访问速度极快，且完全免费。

  • Obsidian: 本地数据最安全，写作体验最好。

comments powered by Disqus