之前刚开始进行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.pswp.cn/diannao/96398.shtml
繁体地址,请注明出处:http://hk.pswp.cn/diannao/96398.shtml
英文地址,请注明出处:http://en.pswp.cn/diannao/96398.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于 VScode 无法连接 Linux 主机并报错 <未能下载 VScode 服务器> 的解决方案

1. 出现的情况 VScode 远程登录 Linux 主机, 出现一下报错:2. 检查方案 2.1 VScode 方面 菜单栏: 点击 <帮助> →\to→ 点击 <关于> 在出现的弹窗中记录 [提交: ] 之后的字符串 (暂且将该字符串命名为变量 $commit_id) 2.2 Linux 方面 使用 ssh or MobaXterm 远程登…

泛型与反射

也是重新温习了下泛型与反射,反射基本就是一些api理解即可,不过需要注意类加载器原理,而泛型则需要理解其设计思想,可以代替Object,更加灵活,可读性强。泛型泛型如果指定后,编译阶段就会检查,不让乱输其他类型,必须是引用类型; 如果不指定就默认Object// 如果指定泛型, 就必须存…

Docker端口映射与数据卷完全指南

目录 Docker端口映射与数据卷完全指南 1. 端口映射:连接Docker容器与外部世界 1.1 为什么需要端口映射 1.2 实现端口映射 1.3 查看端口映射 1.4 修改端口映射(高级操作) 2. 数据卷:Docker数据持久化解决方案 2.1 数据持久化问题 2.2 数据卷的含义 2.3 数据卷的特点 2.4 挂载…

【Linux篇章】穿越网络迷雾:揭开 HTTP 应用层协议的终极奥秘!从请求响应到实战编程,从静态网页到动态交互,一文带你全面吃透并征服 HTTP 协议,打造属于你的 Web 通信利刃!

本篇摘要 本篇将介绍何为HTTP协议&#xff0c;以及它的请求与答复信息的格式&#xff08;请求行&#xff0c;请求包头&#xff0c;正文等&#xff09;&#xff0c;对一些比较重要的部分来展开讲解&#xff0c;其他不常用的即一概而过&#xff0c;从静态网页到动态网页的过渡&a…

QT的项目pro qmake编译

使用qmake管理Qt库的子工程示例-CSDN博客 top_srcdir top_builddir

语音交互系统意图识别介绍和构建

一、意图识别简介**意图识别&#xff08;Intent Recognition&#xff09;**是语音交互系统的核心组件&#xff0c;用于理解用户语音输入背后的真实目的&#xff08;如查询天气、播放音乐等&#xff09;。输入&#xff1a;语音转文本&#xff08;ASR输出&#xff09;的语句输出&…

DINOv3 重磅发布

2025年8月14日 Meta 发布了 DINOv3 。 主页&#xff1a;https://ai.meta.com/dinov3/ 论文&#xff1a;DINOv3 HuggingFace地址&#xff1a;https://huggingface.co/collections/facebook/dinov3-68924841bd6b561778e31009 官方博客&#xff1a;https://ai.meta.com/blog/d…

ansible playbook 实战案例roles | 实现基于firewalld添加端口

文章目录一、核心功能描述二、roles内容2.1 文件结构2.2 主配置文件2.3 tasks文件内容免费个人运维知识库&#xff0c;欢迎您的订阅&#xff1a;literator_ray.flowus.cn 一、核心功能描述 这个 Ansible Role (firewalld) 的核心功能是&#xff1a;动态地、安全地配置 firewal…

【深度学习实战(55)】记录一次在新服务器上使用docker的流程

使用docker&#xff1a;apt-get install dockersudo usermod -aG docker sliu &#xff08;将用户 sliu 添加到 docker 用户组&#xff09;newgrp docker &#xff08;刷新&#xff09;docker imagessudo docker load --input /home/sliu/workspace/env/shuai_docker.tar &…

面试后的跟进策略:如何提高录用几率并留下专业印象

面试结束后&#xff0c;许多求职者认为自己的任务已经完成&#xff0c;只需等待结果通知。然而&#xff0c;面试后的跟进策略同样是求职过程中的关键环节&#xff0c;它不仅能提高你的录用几率&#xff0c;还能展示你的专业素养和持续兴趣。本文将结合酷酷面试平台的专业建议&a…

深入解析RAGFlow六阶段架构

下面用“流程图 六阶段拆解”的方式&#xff0c;把 RAGFlow 的完整流程逐层剖开&#xff0c;力求把每一步的输入、输出、可选策略、内部机制都讲清楚。 ──────────────────────── 一、总览图&#xff08;先建立体感&#xff09; 用户提问 │ ├─→【…

Go语言中的迭代器模式与安全访问实践

Go语言中的迭代器模式与安全访问实践 1. 迭代器模式在Go中的演进 1.1 传统迭代器模式回顾 在传统面向对象语言中&#xff0c;迭代器模式通常涉及三个核心组件&#xff1a;可迭代集合接口(Iterable)迭代器接口(Iterator)具体实现类// 传统迭代器模式示例 type Iterator interfac…

从零开始:JDK 在 Windows、macOS 和 Linux 上的下载、安装与环境变量配置

前言 在进入 Java 世界之前&#xff0c;搭建一个稳定、可用的开发环境是每个开发者必须迈过的第一道门槛。JDK&#xff08;Java Development Kit&#xff09;作为 Java 程序开发的核心工具包&#xff0c;其正确安装与环境变量配置直接关系到后续编译、运行、调试等所有开发流程…

【音视频】芯片、方案、市场信息收集

系统级芯片安霸&#xff08;Ambarella&#xff09;Ambarella H22/H32&#xff1a;高端方案&#xff0c;支持8K/4K高帧率录制&#xff0c;低功耗&#xff0c;广泛用于GoPro Hero 11/12、Insta360等旗舰机型。 Ambarella A12/A10&#xff1a;早期主流方案&#xff0c;支持4K60fps…

中科米堆CASAIM提供机加工件来料自动化测量尺寸方案

机加工行业面临日益严格的质量追溯要求&#xff0c;来料质量的稳定性直接影响着后续生产效率与成品合格率。传统人工检测方式受限于接触式工具的测量精度与操作效率&#xff0c;难以应对小批量、多品种的现代生产需求。传统机加工件来料检测长期面临这些问题&#xff1a;其一&a…

MySQL只操作同一条记录也会死锁吗?

大家好&#xff0c;我是锋哥。今天分享关于【MySQL只操作同一条记录也会死锁吗?】面试题。希望对大家有帮助&#xff1b; MySQL只操作同一条记录也会死锁吗? 超硬核AI学习资料&#xff0c;现在永久免费了&#xff01; 在 MySQL 中&#xff0c;死锁通常是由于多个事务对不同…

知识蒸馏 Knowledge Distillation 论文 Generalized Knowledge Distillation (GKD) 乘法法则、全概率公式、贝叶斯定理

知识蒸馏 Knowledge Distillation 论文 Generalized Knowledge Distillation (GKD) 乘法法则、全概率公式、贝叶斯定理 flyfish 代码实践 On-Policy Distillation of Language Models: Learning from Self-Generated Mistakes 设定&#xff08;方便算数&#xff09;&#x…

Fastjson 2.x踩坑——序列化Java字段为null值默认输出

先上无法实现效果的代码&#xff0c;我的目的是序列化时如果数字型字段为null则填0&#xff0c;尽可能保证数据整齐。 Data NoArgsConstructor AllArgsConstructor ToString JSONType(serializeFeatures {JSONWriter.Feature.WriteNulls,JSONWriter.Feature.WriteMapNullValue…

4G高负荷解决方案

4G高负荷解决方案 一、网络优化手段&#xff08;低成本优先&#xff09;参数优化 调整功率控制、负荷均衡参数。优化小区重选与切换参数&#xff0c;避免高负荷小区拥塞。负荷均衡 开启 MLB&#xff08;Mobility Load Balancing&#xff0c;移动负荷均衡&#xff09;。引导用户…

K8S 安装部署 Rocky Linux 10.0 + Docker + Containerd + Calico

Docker Containerd Flannel 安装部署K8S 系统环境准备 # 1. 设置主机名 hostnamectl set-hostname k8s-n1 && bash# hostnamectl set-hostname k8s-n2 && bash # hostnamectl set-hostname k8s-n3 && bash# 2. 删除系统自带的容器软件&#xff08;可…