当前位置: 代码迷 >> 综合 >> 使用Github+PicGo+jsDelivr创建个人图床
  详细解决方案

使用Github+PicGo+jsDelivr创建个人图床

热度:108   发布时间:2023-10-23 23:06:10.0

文章目录

    • 前言
      • 方案选择
    • 在GitHub上创建一个存储库
    • 使用PicGo客户端
      • 1、准备工作:
      • 2、PicGo下载安装
      • 3、配置 PicGo
      • 4、PicGo使用

前言

Markdown是一门文档编辑语言(使用简单的语法,就可以完成排版)。在本地电脑上使用Tpyora(一款优雅的Markdown编辑器)写的笔记和文章可以直接复制到CSDN和简书上进行发布。

唯一的问题就是要处理下图片!

用Typora 写文章时插入本地图片,图片是存储在本地,如果本地图片被删除或者移动位置,那么文章中的图片就无法正常显示了。把内容复制到 CSDN,简书等博客发表,都会显示不支持外部链接。解决方法就是将图片上传到图床。

图床是干什么的? 图床就是一个便于在博文中插入在线图片连接的个人图片仓库。设置图床之后,在自己博客中插入的图片链接就可以随时随地在线预览了,并且不会因为任何意外原因无法查看,除非自己亲自删除。

使用其他平台的图床这里就不说了,本文主要是介绍如何创建自己的图床。

方案选择

有些人选择用Gitee创建图床,因为Gitee网速比Github快。但是Gitee仓库容量有限制。
使用Github+PicGo+jsDelivr创建个人图床
GitHub免费而且容量没有限制,而且经过查阅资料发现,国内访问github速度不快的问题,可以利用jsDelivr CDN加速访问来解决。

jsDelivr 是一个免费开源的 CDN 解决方案。国内该平台是首个「打通中国大陆与海外的免费CDN服务」,网页开发者无须担心中国防火墙问题而影响使用。

因此,使用GitHub作为图床,利用jsDelivr CDN加速访问,PicGo工具一键上传,操作简单高效,GitHub和jsDelivr都是大厂,不用担心跑路问题,不用担心速度和容量问题,而且完全免费,可以说是目前免费图床的最佳解决方案!

在GitHub上创建一个存储库

添加一个存储库(New repositories)命名为:images,用于上传图片文件。
使用Github+PicGo+jsDelivr创建个人图床

上传完图片,就可以直接通过图片链接访问图片了。
图片链接的格式:https://github用户名.github.io/存储库名/图片文件名(带文件后缀名)
我的github账号用户名为”zhoumei”,创建的存储库名称为”images”,图片为”01.png”
访问地址为:https://zhoumei.github.io/images/01.png

在markdown插入图片链接,就可以显示该图片了。
markdown中代码如下:

![](https://zhoumei.github.io/images/01.png)

使用PicGo客户端

1、准备工作:

(1)images存储库分支选master
在images存储库点击Settings:
使用Github+PicGo+jsDelivr创建个人图床
分支选master branch:
使用Github+PicGo+jsDelivr创建个人图床
(2)生成Personal access tokens
创建好images存储库后,需要在 GitHub 上生成一个 token 以便 PicGo 来操作我们的仓库,来到个人中心,选择 Developer settings 就能看到 Personal access tokens,我们在这里创建需要的 token。
使用Github+PicGo+jsDelivr创建个人图床
点击 Generate new token 创建一个新 token,Note随意填写,选择 repo,同时它会把包含其中的都会勾选上,我们勾选这些就可以了。然后拉到最下方点击绿色按钮,Generate token 即可。之后就会生成一个 token ,记得复制保存到其他地方,这个 token 只显示一次!
使用Github+PicGo+jsDelivr创建个人图床

2、PicGo下载安装

github下载地址:https://github.com/Molunerfinn/PicGo/releases
使用Github+PicGo+jsDelivr创建个人图床
我用这个地址无法下载,最后到CSDN下载了一个安装包:https://download.csdn.net/download/chen_junyong/12329873
总之,找个安装包下载安装即可。

3、配置 PicGo

点击PicGo配置,选择我们要用的GitHub图床:
使用Github+PicGo+jsDelivr创建个人图床
GitHub设置:
使用Github+PicGo+jsDelivr创建个人图床

说明:
设定仓库名: 用户名/仓库名
设定分支名:master
设定Token:上一步创建的token
指定存储路径:图片在images存储库下的存储路径(我想把上传上来的图片存储在imgs文件夹里面,这里就填imgs/)
设定自定义域名:
不使用jsDelivr:https://用户名.github.io/仓库名
使用jsDelivr后:https://cdn.jsdelivr.net/gh/用户名/仓库名

备注:
图片访问路径为:https://cdn.jsdelivr.net/gh/用户名/仓库名/图片路径
如:https://cdn.jsdelivr.net/gh/zhoumei/images/imgs/20200508222335.jpg

4、PicGo使用

(1)上传图片:
使用Github+PicGo+jsDelivr创建个人图床
(2)上传完图片可以在相册中查看上传的图片(当然在github的images存储库中,也可以查看)
使用Github+PicGo+jsDelivr创建个人图床
(3)点击复制图片的访问地址,就可以直接在 Markdown 编辑器中使用了。
使用Github+PicGo+jsDelivr创建个人图床
(4)图片重新命名
在相册中,选则图片点击修改按钮,可以修改图片的名称。
使用Github+PicGo+jsDelivr创建个人图床
工具默认上传前不做重命名,如果需要在上传前重新命名,我们可以到 PicGo设置中进行设置,把上传前重命名开关打开即可。
使用Github+PicGo+jsDelivr创建个人图床
(5)修改上传快捷键:
使用Github+PicGo+jsDelivr创建个人图床
参考文章:
https://www.jianshu.com/p/9d91355e8418
https://blog.csdn.net/qq_36759224/article/details/98058240

欢迎大家访问我的博客:随风飘雁的博客

  相关解决方案