GitHub + jsDelivr + PicGo + Imagine 打造稳定快速、高效免费图床

前言

为什么要使用图床呢?

因为在不同平台发布同一篇文章的时候,最一个痛苦的点就是,图片存储问题,各个平台的文件存储方式各不相同,无法直接 Ctrl + C 的方式一键搞定,为了解决这个问题,使用 MarkDown + 图床 的方式进行文章的写作,将图片放到一个统一的地方,在文章中引入图片外链。

所谓图床,就是将图片储存到第三方静态资源库中,其返回给你一个 URL 进行获取图片。MarkDown 支持使用 URL 的方式显示图片,我想这也是程序员为什么对其偏爱的原因之一。

作为程序员,你会发现,现在很多论坛和社区都开始支持使用 MarkDown,如果你没使用图床的情况下,你分享同一篇文章,你要在不同的平台,各自重新编辑排版一遍和上传图片一次。

有了图床,情况就不一样了,Ctrl+C 的方式就搞定了,根本不用再 Check 文章内容一遍。

图床的选择?

  1. 微博图床:以前用的人比较多,从 2019 年 4 月开始开启了防盗链,凉凉
  2. SM.MS:运营四年多了,也变得越来越慢了,到了晚上直接打不开图片,速度堪忧
  3. 其他小众图床:随时有挂掉的风险
  4. Imgur 等国外图床:国内访问速度太慢,随时有被墙的风险
  5. 大厂储存服务:例如七牛云、又拍云、腾讯云COS、阿里云OSS等,操作繁琐,又是实名认证又是域名备案的,麻烦,而且还要花钱(有钱又不怕麻烦的当我没说)
  6. GitHub 图床:免费,但是国内访问速度慢(不过没关系,利用 jsDelivr 提供的免费的 CDN 加速 速度足够了)

使用流程

  1. 新建 GitHub 仓库
  2. 生成一个 Token
  3. 配置 PicGo 并使用 jsdelivr 作为 CDN 加速
  4. 使用 Imagine 进行图片压缩
  5. 上传图片到 PicGo 并使用图床

新建 GitHub 仓库

  • 登录/注册 GitHub
  • 新建一个仓库,填写好仓库名
  • 仓库描述
  • 将权限设置成 public
  • 根据需求选择是否为仓库初始化一个 README.md 描述文件

生成一个 Token

  1. 点击用户头像 -> 选择 Settings

  1. 点击 Developer settings

  1. 点击 Personal access tokens

  1. 点击 Generate new token

  1. 填写 Token 描述,勾选 repo,然后点击 Generate token 生成一个 Token

  1. 获取 Token 密钥

注意这个 Token 只会显示一次,自己先保存下来,或者等后面配置好 PicGo 后再关闭此网页

配置 PicGo 并使用 jsdelivr 作为 CDN 加速

前往下载 PicGo点击下载),安装好后开始配置图床

  • 设定仓库名:按照 用户名/图床仓库名 的格式填写

  • 设定分支名:master

  • 设定 Token:粘贴之前生成的 Token

  • 指定存储路径:填写想要储存的路径,如 img/,这样就会在仓库下创建一个名为 img 的文件夹,图片将会储存在此文件夹中

  • 设定自定义域名:它的的作用是,在图片上传后,PicGo 会按照自定义域名+上传的图片名的方式生成访问链接,放到粘贴板上,因为我们要使用 jsDelivr 加速访问,所以可以设置为https://cdn.jsdelivr.net/gh/用户名/图床仓库名

Q:什么是 jsdelivr ?

A:jsDelivr 为开发者提供免费公共 CDN 加速服务

使用 Imagine 进行图片压缩

通常情况下,图片大小都是超过 200KB 的,所以网页加载的时候会特别慢,一般我们会对图片进行压缩,这里我推荐 Imagine点击下载) 支持全平台。

Imagine 采用的是有损压缩,介意的可以忽略这一步

顺便推荐一个无损压缩的网站:https://tinypng.com/

上传图片到 PicGo 并使用图床

配置好 PicGo 后,我们就可以进行高效创作了,将压缩后的图片拖拽到上传区,将会自动上传并复制访问链接,将链接粘贴到博文中就行了,访问速度杠杠的

此外 PicGo 还有相册功能,可以对已上传的图片进行删除,修改链接等快捷操作,PicGo 还可以生成不同格式的链接、支持批量上传、快捷键上传、自定义链接格式、上传前重命名等,更多功能自己去探索吧!

欢迎访问我的个人博客:https://sitoi.cn

GitHub + jsDelivr + PicGo + Imagine 打造稳定快速、高效免费图床的更多相关文章

  1. GitHub+jsDelivr+PicGo 打造稳定快速、高效免费图床

    标题: GitHub+jsDelivr+PicGo 打造稳定快速.高效免费图床 作者: 梦幻之心星 347369787@QQ.com 标签: [GitHub, 图床] 目录: 图床 日期: 2019- ...

  2. VSCode + PicGo + Github + jsDelivr 搭建稳定快速高效图床

    VSCode + PicGo + Github + jsDelivr 搭建稳定快速高效图床 目录 前言 准备 配置 验证 前言 所谓图床,就是将图片储存到第三方静态资源库中,其返回给你一个 URL 进 ...

  3. GitHub+JSDelivr+PicGo+Typora免费白嫖高速稳定图床

    0. 初衷1. 创建 GitHub 仓库2. 使用 jsDelivr 进行 CDN 加速3. 使用PicGo上传图片4. Typora 配置 PicGo 上传 0. 初衷 平时写文章,经常需要插入图片 ...

  4. GitHub+PicGo构建免费图床及其高效使用

    搭建免费图床全过程! 一.搭建缘由 一开始搭建博客,避免不了要用许多图片,最初使用七牛云来做博客图床,但是后来发现,七牛云只有30天的临时域名,hhhhhhh,果然啊,天下就没有免费的好事啊~后来就发 ...

  5. 利用服务器+jsDelivr+GitHub搭建咱的免费图床

    前言 有人就问了你这个标题写错了?不应该是PicGo+jsDelivr+GitHub搭建咱的免费图床吗? 2333,是一个上传程序啊,不系写错了. 程序介绍 目前程序已实现两种模式上传到GitHub或 ...

  6. 教你如何使用github+jsDelivr搭建免费图床

    前言 之前写了一篇文章,教你如何使用Typora+PicGo实现图片自动上传到图床 . 这里我用的是七牛图床,七牛图床有一定的免费使用量(没记错的话应该是10个G),如果你的存储量超过这个大小就需要付 ...

  7. 阿里云加Picgo或MPic搭建最豪横的图床

    阿里云加Picgo或MPic搭建最豪横的图床 首先解释一下什么是图床,图床其实就是提供图片存储的服务器. 对于自建博客来说,由于各种原因的限制(比如穷...)可能无法购买存储空间比较大的VPS. 而对 ...

  8. 10分钟教你使用Picgo+GitHub+ jsDelivr搭建CDN加速免费图床

    前言 经常写Markdown或者博客的同学,肯定都要用到图床.图床是什么呢?其实相当于一个存储图片的网站,类似百度云这样,不过上传图片到图床后可以直接通过外链进行访问. 比如把本地一张a.jpg上传到 ...

  9. 使用jsdelivr + GitHub + PicGo搭建免费图床

    前言 之前一直有开通有道云笔记会员,主要是为了会员markdown图片可以在线保存的功能,前一阵子会员到期,考虑这个功能可不可以自己单独实现,从而替代使用有道云会员. 通过网上搜索的方式,查询到了几种 ...

随机推荐

  1. python程序调用C/C++代码

    这篇用来记录在些模拟Canoe生成CAN数据桢工具时遇到的问题, 生成CAN数据桢,主要分为两个关注点: 1.如何从can信号名获取到can信号的ID长度以及信号的起始位,并将信号值按照一定的规则填写 ...

  2. JMXtrans + InfluxDB + Grafana实现Zookeeper性能指标监控

    一.总体效果图 这里是将集群全部放在一起,可以根据自己的审美看怎么放 二.监控指标 其中有些指标与第一篇Zookeeper通过四字命令基础监控(Zabbix)的四字命令的指标是有重复的,二者选一个则可 ...

  3. java初始化与清理

    初始化与清理 欢迎转载,转载烦请注明出处,谢谢. https://www.cnblogs.com/sx-wuyj/p/11177257.html 1.用构造器确保初始化 java中通过提供构造器,可以 ...

  4. 【Spring Cloud】实战项目搭建

    0.项目搭建 创建maven项目,删除其中的src目录,作为整体父项目,在其中添加module实现各个组件. 1.Eureka Server的实现 添加module,创建Spring Boot项目,添 ...

  5. boost::thread_specific_ptr

    thread_specific_ptr代表了一个全局的变量,而在每个线程中都各自new一个线程本地的对象交给它进行管理. 线程之间就不会因为访问同一全局对象而引起资源竞争导致性能下降. 而线程结束时, ...

  6. 微信小程序之页面引用utils中的js文件

    /* 只可使用相对路径 */const utils = require('../../../utils/util.js') Page({})

  7. c#菜单动态合并

    说明 在程序中经常使用弹出菜单,并且一个窗体中可以存在多个弹出菜单.开发过MDI窗体的读者可能都知道,当MDI子窗体最大化时,子窗体和主窗体的菜单能够自动的合并.这是如何实现的呢?本例实现了将两个弹出 ...

  8. SpringBoot 开发案例之参数传递的正确姿势

    前言 开发这么多年,肯定还有不少小伙伴搞不清各种类型的参数是如何传递的,很多同学都是拿来即用,复制粘贴一把撸,遇到问题还是一脸懵逼. 姿势 学习参数传递的正确姿势,先说怎么做,再说为什么,本质上还是复 ...

  9. 惊人!Spring5 AOP 默认使用Cglib ?从现象到源码深度分析

    Spring5 AOP 默认使用 Cglib 了?我第一次听到这个说法是在一个微信群里: 真的假的?查阅文档 刚看到这个说法的时候,我是保持怀疑态度的. 大家都知道 Spring5 之前的版本 AOP ...

  10. qt 计时器自动刷新图片

    计时器 QTimer *timer; timer->start (); void PictureShow::stopStartPage() { if (timer->isActive()) ...