将博客迁移到Github->CloudFlare Pages

今天自建的gitlab runners 在拉取alpine镜像之后，尝试更新软件包的时候超时了…

WARNING: updating and opening https://dl-cdn.alpinelinux.org/alpine/v3.22/community: operation timed out

网络环境是真的差劲，十分无语，准备博客战略大转移。😅话不多说直接开始。

Github Pages
#

1. 添加 `.github/workflows/hugo_deploy.yml` 文件
#

AI一下简简单单，贴上来供参考：

name: Deploy Hugo Site to GitHub Pages # 命名
on: # 触发条件：
  push: # 1. 当代码被推送到 'main' 分支时
    branches:
      - main  # 如果你的主分支是 'master'，请改成 'master'
  workflow_dispatch: # 2. 允许你从 GitHub 仓库的 "Actions" 标签页手动运行此工作流
  
permissions: # 权限设置：
  contents: read
  pages: write      # 允许写入 pages
  id-token: write   # 允许 OIDC 认证

jobs: # 任务（Jobs）
  build:
    runs-on: ubuntu-latest  # 使用最新的 Ubuntu 运行环境
    steps:
      - name: Checkout # 第一步：检出你的代码
        uses: actions/checkout@v4
        with:
          submodules: recursive  # <-- 关键！会自动拉取主题子模块
      - name: Setup Hugo # 第二步：安装和设置 Hugo
        uses: peaceiris/actions-hugo@v3 # 常用action
        with:
          hugo-version: '0.151.1' # <-- 把这里改成你同学的 Hugo 版本
          extended: true          # 如果你的主题需要 SASS/SCSS，请保持 true
      - name: Setup Pages # 第三步：设置 GitHub Pages
        id: pages
        uses: actions/configure-pages@v5
      - name: Build Hugo Site # 第四步：构建 Hugo 网站
        run: hugo --minify # 如果需要github.io的链接这里需要加上 --baseURL "${{ steps.pages.outputs.base_url }}"
      - name: Upload Artifact # 第五步：打包构建产物
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./public # Hugo 默认的构建输出目录

  deploy:  # 部署任务
    runs-on: ubuntu-latest
    needs: build # 确保 'build' 任务成功完成后才运行
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }} # 输出部署后的 URL
    steps:
      - name: Deploy to GitHub Pages # 部署到 GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

2. 提交到 `Github`
#

这里没啥好说的push就完事了（~~这个github有点喜欢掉登录~~

3. 在 Github 中配置
#

在仓库中点击上方的 ⚙️Settings -> Pages -> Build and deployment -> Github Actions

在 Custom domain 中，填入你自己的域名，需要强制https的话可以打开下方的 Enforce https，点击 Save 保存

4. 在 `Cloudflare` 中配置
#

如果你需要挂在你的顶点域名上比如 xxxx.com 上，则在域的DNS配置下添加四个 A 记录，将 @ 解析到github提供的四个ip地址处
如果你需要挂在你的二级域名比如 blog.xxxx.com 上，则在域的DNS配置下添加一个CNAME记录，将 blog 解析到具体的 <>.github.io 处即可

详见下方链接

🐱Managing a custom domain for your GitHub Pages site - GitHub Docs

5. 部署完成！
#

尝试再次提交，这次 Action 应该就构建成功了，可以访问试试！

发现国内访问失效了（~~唉Github~~

所以我又换了…

CloudFlare Pages
#

🐧萌新如何优雅地使用Hugo和大善人搭建图床和博客 - 资源荟萃 - LINUX DO

没办法，最后投靠大善人。☁️ ~~我又来化缘了~~

1. github actions 配置记得先给他注释了
#

不要再在github占用资源了

2. `Cloudflare` 设置
#

这应该是最简单的一个了

左侧选择 计算与AI -> Works & Pages -> Pages -> 创建链接到Git -> Github

接下来Github授权环节，记得只选一个blog仓库就好了

取一个名字，无所谓，选好分支，框架预设 选择 Hugo

点击环境变量 -> 添加变量 -> 添加一个变量名称叫 HUGO_VERSION - 0.151.1 这里填入适合你的Hugo版本 -> 保存并部署

然后等他拉库，然后就可以添加自定义域名了，如果域名托管在大善人这，他会自动帮你把DNS的CNAME记录填好，真是方便🥰

OK，大功告成！

图床配置🖼️
#

直接来到大善人家里，来薅一个CloudFlare R2储存桶，每月有10G免费额度

创建R2储存桶
#

存储和数据库->R2对象存储->概述->创建储存桶->输入储存桶名字->创建储存桶

配置公开访问
#

进入储存桶->选择 “设置” ->自定义域->输入自己的二级域名->点击修改DNS，他会自动添加一个CNAME记录

开源 `CloudFlare ImgBed` 项目部署
#

1. Fork项目
#

🐱CloudFlare ImgBed 项目

2. 创建CloudFlare Pages
#

登录 Cloudflare Dashboard
选择左侧菜单的 “计算和AI” -> “Workers & Pages”
点击 “创建应用程序”
在最下方 Looking to deploy Pages? 选择 “Get started”
在 “导入现有 Git 存储库” 处点击 “开始使用”
给CloudFlare权限访问你的Fork仓库
构建命令 npm install，其他都可以默认
点击 “保存并部署”
等待首次部署完成（需要2-3min😋

3. 配置储存桶R2
#

进入imgbed这个pages
设置->绑定->R2储存桶
变量名称填写 img_r2 ，R2储存桶选择已经创建的那个，保存
选择自定义域名->添加一个二级域名，用来访问前端

4. 配置数据库D1
#

创建 D1 数据库
#

在 Cloudflare Dashboard 中选择 “存储和数据库”
点击 “D1 SQL 数据库”
点击 “创建数据库”
输入数据库名称：img_d1（建议使用此名称）
点击 “创建”

初始化 D1 数据库
#

创建完成后，点击进入数据库详情页
选择 “控制台” 选项卡
在 SQL 输入框中逐段粘贴并执行初始化语句（见项目仓库（尾缀CloudFlare-ImgBed/blob/main/database/init.sql））
点击 “执行”

绑定 D1 到项目
#

返回您的 Pages 项目
选择 “设置” → “绑定”
点击 “添加” → “D1 数据库”
填写绑定信息：
- 变量名称：img_d1（必须是这个名称）
- D1 数据库：选择刚创建的数据库
点击 “保存”

5. 重新部署Pages
#

进入项目的 “部署” 页面
找到最新的部署记录
点击右侧的 “…” 菜单
选择 “重试部署”
等待部署完成

`CF ImgBed` 项目生态 - Obsidian 上传插件
#

感谢开源！！ 🐱fantasy-ke/obsidian-cf-imgbed at 1.0.4

Obsidian 安装本地插件
#

找到该工作区的 .obsidian 文件夹
在其中创建 plugins 文件夹
将下载的本地插件 .zip 文件解压，将整个文件夹复制到该文件夹下
重启 Obsidian
Enjoy Your Plugins！

简单配置
#

点击插件中的小齿轮⚙️
填写url&upload_key这两个必要参数（url格式：https://your.domain 后面不要加 /，upload_key 使用正常POST上传的密钥即可，不用生成API Key）
选择上传途径 CF R2
其他自己随便调
可以试试上传啦！

作者

Haley

Github Pages#

1. 添加 .github/workflows/hugo_deploy.yml 文件#

2. 提交到 Github#

3. 在 Github 中配置#

4. 在 Cloudflare 中配置#

5. 部署完成！#

CloudFlare Pages#

1. github actions 配置记得先给他注释了#

2. Cloudflare 设置#

图床配置🖼️#

创建R2储存桶#

配置公开访问#

开源 CloudFlare ImgBed 项目部署#

1. Fork项目#

2. 创建CloudFlare Pages#

3. 配置储存桶R2#

4. 配置数据库D1#

创建 D1 数据库#

初始化 D1 数据库#

绑定 D1 到项目#

5. 重新部署Pages#

CF ImgBed 项目生态 - Obsidian 上传插件#

Obsidian 安装本地插件#

简单配置#