Cf Pages + Github Repo 创建自己的图床~


前言

想必各位站长都有图片不知道存哪里的烦恼吧。
网站服务器硬盘太小,塞下博客的东西就快满了。
想放COS桶,又无奈的看看自己空无一物的钱包,最后不了了之。
在这个时候,总会想起那亲爱的github.
但是大陆github访问不上,很尴尬。
救星Jsdelivr也在前几天被吊销ICP证。
难道就无解了吗?

不!

实现思路

Jsdelivr不行,那我们就自建呗!
本着能白嫖就不多花一分钱的原则, 我找到了好大哥CloudFlare.
CloudFlare的Pages允许我们上传Github Repo的静态内容, 相当于一个网站空间。
还有免费CDN加速,香到爆炸

过程

首先,我们得让Typecho的附件上传到github
这个项目就可以实现了。
放到plugins.
接下来需要动一下plugin.php
由于这个插件使用jsdelivr进行加速,我们需要手动修改为自己的域名。
找到plugin.php
把所有的
"https://cdn.jsdelivr.net/gh/" . $options->githubUser . "/" . $options->githubRepo . "@latest" .
替换成提前准备好的CDN域名。
就像这样:

需要注意的是,在attachmenthandle函数中
要额外删除$latest函数 要不然导入后可能就长这样了

或者你也可以使用我的修改过的版本 - 点我

启用插件。
到Typecho后台,填写以下内容:
Github用户名
Github仓库名(建议新建一个)
Github账号token:可以看这个指南

如果你用的是我修改过的版本,填写自定义域名.

是否保存本地: 建议否。要不然为啥要上传到Github¿

剩下的建议不动。 具体是干什么的可以看插件的README

接下来就是配置Cloudflare了。
登录Cloudflare控制台
找到Pages
点击新建->点击从Github导入:

然后选择刚刚在设置里填的仓库名。
点击下一步,
设置直接留空就好了。
然后点击Deploy。
就好啦!
但是现在上传图片需要手动到CF部署。

后寄:好像现在cf会自动部署了。

十分的不方便。
这时候 GithubActions 就帮上大忙了。
Cloudflare有github push一键部署的功能,我们直搬过来,按需修改就可以了
https://github.com/cloudflare/pages-action
首先在Github Repo中创建.github/workflows/publish.yml这么一个文件。
然后在cloudflare后台获取一个API Token(可以看这个)
然后转回Github,在仓库设置里,创建一个环境变量:

名字命名为CLOUDFLARE_API_TOKEN,内容就是刚刚获取的API Token.
回到publish.yml,把这些内容贴进去:

# This is a basic workflow to help you get started with Actions

name: CI

# Controls when the workflow will run
on: [push]

jobs:
  publish:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      deployments: write
    name: Publish to Cloudflare Pages
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      # Run a build step here if your project requires

      - name: Publish to Cloudflare Pages
        uses: cloudflare/pages-action@v1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: 这里填你的CF账户ID
          projectName: 这里填你CF page的名字
          directory: ./
          # Optional: Enable this if you want to have GitHub Deployments triggered
          gitHubToken: ${{ secrets.GITHUB_TOKEN }}
          # Optional: Switch what branch you are publishing to.
          # By default this will be the branch which triggered this workflow
          branch: main
          # Optional: Change the working directory
          workingDirectory: ./
          # Optional: Change the Wrangler version, allows you to point to a specific version or a tag such as `beta`
          wranglerVersion: '3'

账号ID是哪个?点Pages, 他就会在这了:

保存, 然后测试测试。 理论上就可以了.

效果预览

本站所有图片均已使用本方法上传至Github. 十分滴方便.
速度不能说很快,但是只少比Jsdelivr好多了。
有问题可以在评论区留言哦~