Cyan Blog Cyan Blog
首页
  • Java (opens new window)
  • JUC (opens new window)
  • JVM (opens new window)
  • Redis

    • Redis安装 (opens new window)
    • Redis基础 (opens new window)
    • Redis实战 (opens new window)
    • Redis集群安装 (opens new window)
    • Redis分布式缓存 (opens new window)
    • Redis多级缓存 (opens new window)
    • Redis原理 (opens new window)
  • 管理工具

    • Maven (opens new window)
    • Git (opens new window)
  • SSM

    • Spring (opens new window)
    • SpringBoot (opens new window)
    • Mybatis (opens new window)
    • MybatisPlus (opens new window)
  • 微服务

    • Docker (opens new window)
    • RabbitMQ (opens new window)
    • SpringCloud (opens new window)
    • Dubbo (opens new window)
    • MongoDB (opens new window)
    • Zookeeper (opens new window)
  • Java面试题 (opens new window)
  • JUC面试题 (opens new window)
  • JVM面试题 (opens new window)
  • Linux面试题 (opens new window)
  • SQL面试题 (opens new window)
  • Maven面试题 (opens new window)
  • Redis面试题 (opens new window)
  • SSM面试题 (opens new window)
  • SpringCloud面试题 (opens new window)
  • Linux (opens new window)
  • C++ (opens new window)
  • 数据库

    • MySQL (opens new window)
    • NoSQL (opens new window)
  • 软件测试

    • 软件测试 (opens new window)
  • 加密解密 (opens new window)
  • bilibili字幕提取 (opens new window)
  • 道理 (opens new window)
  • 关于博主

    • Github (opens new window)
    • CSDN (opens new window)
  • 关于本站

    • 如何搭建博客网站 (opens new window)
首页
  • Java (opens new window)
  • JUC (opens new window)
  • JVM (opens new window)
  • Redis

    • Redis安装 (opens new window)
    • Redis基础 (opens new window)
    • Redis实战 (opens new window)
    • Redis集群安装 (opens new window)
    • Redis分布式缓存 (opens new window)
    • Redis多级缓存 (opens new window)
    • Redis原理 (opens new window)
  • 管理工具

    • Maven (opens new window)
    • Git (opens new window)
  • SSM

    • Spring (opens new window)
    • SpringBoot (opens new window)
    • Mybatis (opens new window)
    • MybatisPlus (opens new window)
  • 微服务

    • Docker (opens new window)
    • RabbitMQ (opens new window)
    • SpringCloud (opens new window)
    • Dubbo (opens new window)
    • MongoDB (opens new window)
    • Zookeeper (opens new window)
  • Java面试题 (opens new window)
  • JUC面试题 (opens new window)
  • JVM面试题 (opens new window)
  • Linux面试题 (opens new window)
  • SQL面试题 (opens new window)
  • Maven面试题 (opens new window)
  • Redis面试题 (opens new window)
  • SSM面试题 (opens new window)
  • SpringCloud面试题 (opens new window)
  • Linux (opens new window)
  • C++ (opens new window)
  • 数据库

    • MySQL (opens new window)
    • NoSQL (opens new window)
  • 软件测试

    • 软件测试 (opens new window)
  • 加密解密 (opens new window)
  • bilibili字幕提取 (opens new window)
  • 道理 (opens new window)
  • 关于博主

    • Github (opens new window)
    • CSDN (opens new window)
  • 关于本站

    • 如何搭建博客网站 (opens new window)
  • 零成本搭建个人博客网站
  • 从零开始搭建博客
  • 更多配置
  • 域名
  • 图床
    • 图片上传工具
    • 图床选择
    • Github
    • 七牛云
  • 同步GitHub和Gitee
  • 自动部署
  • 代码私有
  • 评论区
  • 站点信息
  • MoreMore
  • 障碍与反思
  • Blog
2025-03-26
0
0
目录

图床

# 图片上传工具

我的博客是基于 Markdown 的,如果我们每次上传图片都需要登录到七牛云控制台并上传,就太慢了(使用Github图床也可以不用安装)。因此市面上出现了很多图片上传工具,能实现的效果是这样的:将图片拖拽到工具里,就能自动上传到对象存储里,并且获取图片链接,极大简化了我们的操作。

我使用的工具是:

  • PicGo (opens new window):支持 Windows,Mac 和 Linux,基于 Electron 开发,支持多种图床上传

‍github.com/NothingMeaning/foureggs (opens new window) (opens new window):博主目前在用的,直接在 Markdown 文件上右键即可上传,并自动替换原始文件里的图片链接,不过会生成一个新的Markdown文件,非常方便。

该工具有安装包和源码,源码里有可运行的exe文件,如果使用源码可以自己将工具注册到右键中 (opens new window)

# 图床选择

Github:如果想要免费使用可以选择Github作为图床,不过图片有概率上传失败,不过也有别的解决方法。

七牛云:如果能接受一定的费用,可以选择七牛云,按照我的操作可以用自己的域名和免费的证书访问七牛云图床,只需要支付CDN流量费用0.28/GB

# Github

如果不介意图片加载慢的话,可以使用GitHub做免费图床

  • 只需要创建一个保存图片的仓库,需要public

  • 在setting->developer settings->Personal access token->创建一个token(classic)(只需要授予repo的权限就行)。

  • 然后在picGo上配置。

  • image-20250330184137609

  • 可以使用https://raw.gitmirror.com (opens new window)进行加速,在国内也能访问图片资源,博主目前就是用的GitHub + 加速

也可以用CloudFlare加速,虽然博主也没做出了😵

两种免费图床搭建教程:GitHub + Cloudflare 加速 & Cloudflare R2(附 PicGo 配置详解) (opens new window)

不过一个一个图片上传,有时图片会上传失败

  • 可以直接将图片仓库拉取到本地文件夹中,将你的图片保存路径修改为该文件夹,在你需要上传图片时再手动上传,并把文章中的路径修改为你的git图片仓库的路径。(这样其实也用不到前面的Picgo工具了)

这里的路径修改应该可以写个脚本来自动进行,我之后看怎么做。TODO

# 七牛云

七牛云提供了3个月有效期的免费访问域名可以使用,想要长期使用还需要用自己的域名

而且七牛云图床免费域名的使用的是http协议,不能用于https的网站(比如GitHub Page),会导致图片加载不出。

想要用https协议需要购买证书。

可以在阿里云购买域名,使用阿里云免费证书,就供个人网站、测试用。每年有20个证书额度,一个证书可以用三个月

不过七牛云的https协议不是免费的,CDN流量0.28元/GB。

# 设置自己的域名

在阿里云云中添加一个新的子域名,用于博客网站访问我们的图床

  • 解析记录类型选CNAME,
  • 主机记录就是访问图床时的子域名
  • 记录值等下还要再改,先随便填

image-20250327195035760

# 将阿里云的证书添加到七牛云

参考视频:wordpress 极速搭建个人独立博客 014七牛云上传阿里云SSL证书 (opens new window)

在阿里云中搜索ssl证书。

在个人测试证书中立即购买,可以购买免费的证书,每年可以有20个额度,

购买后创建证书,输入刚刚创建的子域名img.cyanyep.top,并输入个人信息进行验证就可以了

image-20250327182639386

创建证书后在更多里找到下载,下载证书,服务器类型为其他

image-20250327190139813

点击绑定域名可以跳转到添加域名中

image-20250327191122830

在SSL 证书服务中上传自有证书

  • 证书备注名:随便填,可以填你的域名
  • 证书内容(PEM 格式):上传 下载的zip中 .pem后缀的文件
  • 证书私钥(PEM 格式):上传 下载的zip中 .key后缀的文件

image-20250327193656277

# 在七牛云添加域名

  • 输入刚刚创建的子域名

  • 选择https和刚刚上传的证书

  • 使用场景:图片小文件

  • 缓存配置:使用推荐配置

  • 其他不用修改

  • 点击创建

image-20250327201600024

# 验证域名所有权

image-20250327201659604

根据图片在阿里云添加域名解析,

  • 记录类型:txt

  • 主机记录:verification

  • 记录值:填你自己生成的

image-20250327201721567

# 将子域名解析到七牛云

添加后回到七牛云点击验证,验证后会给你一个CNAME,将其配置到刚刚创建的子域名img.cyanyep.top的记录值中。

这样你的子域名就会解析到七牛云的域名,可以通过你的子域名访问图片

image-20250327201838662

image-20250327201858912

等待片刻就会发邮箱通知你加速域名创建成功

修改你的外链域名就可以用你的子域名访问图片了

image-20250327202228150


参考:

两种免费图床搭建教程:GitHub + Cloudflare 加速 & Cloudflare R2(附 PicGo 配置详解) (opens new window)

十分钟搭建你自己的图床,手把手教你,免费,picgo, 七牛云 (opens new window)

wordpress 极速搭建个人独立博客 014七牛云上传阿里云SSL证书 (opens new window)

将工具注册到右键中 (opens new window)

上次更新: 2025/4/20 13:21:35
域名
同步GitHub和Gitee

← 域名 同步GitHub和Gitee→

最近更新
01
项目优化
05-06
02
项目优化
05-06
03
延迟消息
05-05
更多文章>
Theme by Vdoing | Copyright © 2025-2025 Cyan Blog
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式