当前位置: 首页 > news >正文

Hexo 博客图片托管:告别本地存储,用 PicGo + GitHub 打造高速稳定图床

之前刚开始进行Hexo博客撰写,图片都保存在本地Hexo源文件目录(source/images/)文件夹,随着图片增多,管理起来压力增大,于是产生了使用图床,引入外链进行图片存储的想法

Pros and Cons

  • 提升部署速度:当你执行 hexo g -d 部署时,Hexo 需要将你博客的所有源文件,包括文章、主题、以及几十上百张图片,全部处理并拷贝到public文件夹,然后再将这个巨大的文件夹推送到GitHub,这个过程会非常缓慢。
  • 跨设备写作与协作更方便:本地存储时,如果你想在另一台电脑上写文章,必须把整个包含所有图片的庞大仓库克隆下来。而使用图床,你只需要克隆轻量级的博客源码仓库。文章里的图片都是绝对路径(URL),在任何设备上打开都能正常显示。
  • 版本控制体验极佳:使用图床后,你的博客源码仓库非常干净,Git 可以高效地管理文本差异。图片仓库独立出去,两者互不干扰,管理起来清晰明了。

  正因为有以上优势,因而我强烈建议将图片放在图床中进行存储,常见的的图床服务有阿里云OSS、腾讯云 COS、七牛云、SM.MS、Github等。
  考虑到前几者涉及到注册、实名认证、存储收费等问题,再加上认为Github大概率不会倒闭,图片存储较为稳定,且已有账号注册等原因,最终选择使用PicGo插件和Github实现图床功能!

  • 更简单的图床功能网站:IMG.TG(但是感觉像start up company界面有点简陋,担心有存储不稳定的问题)(后来发现有国内百度云 CDN 节点加速,口碑还不错,那大抵是我手拙无福消受了😢)

  • 不想折腾的可以看看这篇骚操作😀:图片外链方法大全: 免费的图床! 告别新浪图床 和 CDN

下面分别介绍 PicGo 图形化桌面版(适合新手,操作直观)和 PicGo-Core 命令行版(适合终端用户,轻量化)的完整配置流程,实现GitHub图床功能。

一、准备工作

GitHub 图床 为例,配置步骤如下:

  1. 创建 GitHub 仓库
  2. 新建一个公开仓库(如 blog-images),用于存储图片
  3. 记住仓库路径:用户名/仓库名(如 username/blog-images
  4. 生成 GitHub 访问令牌
  • 打开 GitHub → 点击头像 → SettingsDeveloper settingsPersonal access tokensGenerate new token
  • 勾选 repo 权限必须),生成后复制令牌(仅显示一次,需保存)

选择并安装图床插件
根据需求安装对应图床的插件,以常用的GitHub图床 为例:

picgo install github-plus  # GitHub 增强插件,支持自定义路径等

其他常用插件:

  • 阿里云 OSS:picgo install aliyun-oss
  • 腾讯云 COS:picgo install tencent-cos
  • 七牛云:picgo install qiniu

二、配置图床参数

GitHub 图床 为例,配置步骤如下:

  1. 创建 GitHub 仓库
  2. 新建一个公开仓库(如 blog-images),用于存储图片
  3. 记住仓库路径:用户名/仓库名(如 username/blog-images
  4. 生成 GitHub 访问令牌
  • 打开 GitHub → 点击头像 → SettingsDeveloper settingsPersonal access tokensGenerate new token
  • 勾选 repo 权限必须),生成后复制令牌(仅显示一次,需在记事本中保存)
    安装 Node.js(命令行版必装,图形化版可选)
    下载地址:Node.js 官网(推荐 LTS 版本)。
    验证安装:终端输入 node -vnpm -v,能显示版本号即成功。

三、PicGo 图形化桌面版配置(新手推荐)

图形化界面操作直观,无需记忆命令,适合首次配置图床的用户。

  1. 安装PicGo桌面版
    下载地址:PicGo GitHub Releases。
    选择对应系统版本(WindowsexeMacdmg),安装后打开。
  2. 配置 GitHub 图床参数
    左侧菜单栏点击 「图床设置」 → 选择 「GitHub图床」)。
    依次填写参数:
  • repo:用户名/仓库名(如 username/blog-images
  • branch:分支名(默认 main
  • token:刚才生成的 GitHub 令牌
  • path:图片在github的存储路径(可选,如 images/2024/
  • customUrl:自定义 CDN 域名(可选,如 https://cdn.jsdelivr.net/gh/用户名/仓库名
    填写完成后,点击 「设为默认图床」,配置生效。
  1. 验证配置(上传测试)
    点击 PicGo 主界面的 「上传区」,直接拖入本地图片,或粘贴剪贴板截图(如微信截图后直接粘贴或电脑快捷键截图)。上传成功后,进入Github,进入图片右键复制图片链接即可!

三、PicGo-Core 命令行版配置(终端用户推荐)

轻量化无界面,适合习惯用终端操作的用户,可集成到脚本或编辑器中。

  1. 安装 PicGo-Core
    打开终端(WindowsCMD/PowerShellMac/LinuxTerminal),执行以下命令全局安装:
npm install picgo -g
  • 验证安装:输入 picgo -v,显示版本号即成功。
  1. 安装 GitHub 图床插件
picgo install github-plus

其他常用图床插件(按需安装):

  • 阿里云 OSS:picgo install aliyun-oss
  • 腾讯云 COS:picgo install tencent-cos
  • 七牛云:picgo install qiniu
  1. 配置 GitHub 图床参数
picgo set uploader

依次填写参数(参考前面图形化版的参数说明)

  1. 配置完成后,设置 github-plus 为默认上传器:
picgo use uploader  # 再次选择 github-plus 并回车
  1. 验证配置(上传测试)
# 替换为你图片的本地路径
# Windows 示例
picgo upload C:\Users\Legion\Pictures\test.jpg
# Mac/Linux 示例
picgo upload ~/Desktop/test.jpg
  • 成功:终端会输出图片直链,复制链接到浏览器可打开图片。
  • 失败:检查 tokenrepo权限是否开通、图片存储路径是否正确,或网络是否通畅。

四、与 Hexo 集成

Hexo文章中直接使用上传后的图片链接,例如:

![示例图片](Github直链地址)

链接在csdn无法显示问题

  当我们在github配置好图床服务后,想要在CSDN进行引用 ,会发现编辑时显示正常,但是发布后会显示图片转存失败,如下图所示。这是因为CSDN 为了防止其他网站直接引用(消耗 CSDN 的服务器流量和带宽)本站的图片资源,会设置防盗链功能
在这里插入图片描述

请添加图片描述

  当在外站中插入一个来自 github.com 的图片链接时,用户的浏览器会向 GitHub 的服务器请求这张图片。GitHub 服务器在响应时,可能会检查请求的来源(Referer)。如果来源是 csdn.net,而 GitHub 并未将 CSDN 加入白名单,GitHub 可能会拒绝这个请求或返回一个错误(如 403 Forbidden)。反过来,如果 CSDN 检测到图片不是来自自己的服务器,也可能会拦截显示。

  在 CSDN 博客编辑器中,点击图片上传按钮。选择图片进行上传。CSDN自动将图片上传到自己的图床,并生成一个新的、稳定的 CSDN 内部链接,这时候就可以正常引用图片了!

封面来源:Imagen AI

http://www.dtcms.com/a/343505.html

相关文章:

  • ArcMap 数据框裁剪(Data Frame Clip)操作教程
  • Service方法事务失效的原因是什么?
  • 2025-08-21 Python进阶8——命名空间作用域
  • PiscCode实现MediaPipe 的人体姿态识别:三屏可视化对比实现
  • 算法题Day4
  • WaitForSingleObject函数详解
  • JavaScript 性能优化实战技术文章大纲
  • C++手撕LRU
  • 中国之路 向善而行 第三届全国自驾露营旅游发展大会在阿拉善启幕
  • Webpack的使用
  • 5.Shell脚本修炼手册---Linux正则表达式(Shell三剑客准备启动阶段)
  • AI 时代的 “人机协作”:人类与 AI 如何共塑新生产力
  • 7.Shell脚本修炼手册---awk基础入门版
  • camel中支持的模型与工具
  • 爬虫基础学习-POST方式、自定义User-Agent
  • FCN网络结构讲解与Pytorch逐行讲解实现
  • 小程序个人信息安全检测技术:从监管视角看加密与传输合规
  • 限流技术:从四大限流算法到Redisson令牌桶实践
  • SpringBoot整合HikariCP数据库连接池
  • 机器学习聚类算法
  • 【机器学习】线性回归
  • 深入解析C++非类型模板参数
  • Linux入门DAY29
  • AI 产业落地:从 “实验室神话” 到 “车间烟火气” 的跨越
  • 【TrOCR】模型预训练权重各个文件解读
  • SpringAI1.0.1实战教程:避坑指南25年8月最新版
  • 近端策略优化算法PPO的核心概念和PyTorch实现详解
  • Typescript入门-函数讲解
  • 创建一个springboot starter页面
  • LG P2617 Dynamic Rankings Solution