IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 开发工具 -> 基于GitHub/七牛云 + PicGo 搭建属于Typora的图床 -> 正文阅读

[开发工具]基于GitHub/七牛云 + PicGo 搭建属于Typora的图床

基于GitHub/七牛云 + PicGo 搭建属于Typora的图床

1 软件下载

  1. Typora 官网:Typora
  2. PicGo 在 GitHub 上的地址:GitHub - PicGo

2 方式一:GitHub

2.1 创建图片库

在自己的 GitHub 上创建一个库,当做图床,专门用来存储图片。具体操作流程与建仓库的流程一样。

由于 GitHub 不允许存在空的仓库,也不允许存在空的文件夹,因此可以勾选默认创建一个 ReadMe 文件

打开自己 GitHub 主页,点击New新建仓库。

image-20210113000300203

Repository name填写仓库名字,Description填写仓库描述,勾选Add a README file,点击Create repository创建仓库。

在这里插入图片描述

2.2 获取令牌

GitHub 的令牌,其实就是 token,自我感觉就像自己的 GitHub 对外的一个公钥一样,可以让拥有此 token 的软件访问 GitHub 的 API 接口。

生成过程,参考经验即可,大致步骤如下:

  • 点击自己的 GitHub 头像
  • Settings
  • Developer settings
  • Personal access tokens
  • Generate new token

Note填写 token 用途,用于备忘。下面只需要勾选 repo,只给更新仓库的权限。最后点击最下面的Generate token创建成功。
在这里插入图片描述

复制Token字符串下一步使用。注意,为了安全起见此字符串只会出现一次,点击其他页面后就无法再查看了,需要重新创建,所以最好先保存到本地编辑器中。

2 方式二:配置七牛云图床

github图床虽然已经配置好,但是因为github服务器在国外,所以访问和上传都很慢,所以使用国内的七牛云是个不错的选择,七牛云有免费的10G空间,对于博客创作者还是非常友好的.

2.1.注册七牛云账号

七牛云注册地址:注册七牛云

2.2.创建空间

点击管理控制台 -> 对象存储 -> 空间管理 -> 新建空间

image-20200517204842963

  • 指定空间名称
  • 区域选择离自己近的
  • 访问控制一定要选择公开,不然picgo无法访问

2.3.自定义域名

七牛的默认域名只有30天有效期,如果要长期使用,则需要自定义域名.

2.4.配置七牛云图床

image-20200517205006616

  • AccessKey(AK)和SecretKey(SK)在个人中心 -> 密钥管理 ,没有则创建

image-20200517205204055

  • 设定存储空间,为最初创建的空间名称
  • 访问地址为七牛云分配的外链域名
  • 注意:配置时域名前要添加http://

image-20200517205501180

  • 确认存储区域
存储区域地域简称上传域名
华东z0服务器端上传:http(s)://up.qiniup.com 客户端上传: http(s)://upload.qiniup.com
华北z1服务器端上传:http(s)://up-z1.qiniup.com 客户端上传:http(s)://upload-z1.qiniup.com
华南z2服务器端上传:http(s)://up-z2.qiniup.com 客户端上传:http(s)://upload-z2.qiniup.com
北美na0服务器端上传:http(s)://up-na0.qiniup.com 客户端上传:http(s)://upload-na0.qiniup.com
东南亚as0服务器端上传:http(s)://up-as0.qiniup.com 客户端上传:http(s)://upload-as0.qiniup.com

配置好后就可以上传了

3 本地配置步骤

3.1 安装配置PicGo

win10 电脑,直接安装下载下来的 EXE 文件即可,整个安装步骤一路 next 。

安装后的软件界面如下:

image-20220409093823490

打开 PicGo ,选择图床设置,选择GitHub图床,填写参数:

  • 设定仓库名,填写格式为用户名/仓库名
  • 设定分支名,填写默认分支master或者main
  • 设定Token,填写上一步获取的 token 值
  • 指定存储路径,选填,可以自定义名称,比如用年月来分类,不填图片会上传在仓库根目录。
  • 设定自定义域名,用于修改返回的 url 前缀,不填则返回原始 url。后面配置CDN加速需要更改此项。

选择设为默认图床,点击确定保存配置。

在这里插入图片描述
然后找到 PicGo 设置,打开里边的 时间戳重命名,这样可以避免图床在上传文件时,由于文件名相同造成的错误。
在这里插入图片描述

配置完成后,点击上传区,随便选择电脑上一张图片拖动到上传区,上传成功后会弹窗提示,将该 url 复制到浏览器打开就可以看到图片。可以在PicGo设置,打开上传后自动复制URL,这样上传成功后图片 url 会自动复制在剪贴板,可以直接粘贴到记事本。

image-20210113223506305

经过实际验证,有一些理解:

  1. 在上传时,如果进度条到一半出现红色,代表上传失败;
  2. 在上传时,如果进度条一直是蓝色,应该就是上传成功了;
  3. PicGo设置此选项下,可以找到对应的日志文件,查看相关错误信息,进而辅助我们排查问题。

3.2 CDN 加速(jsDelivr)

从上一步可以看到 GitHub 存储的图片地址是 https://raw.githubusercontent.com 开头的网址,这个域名在某些地方可能打不开或者很慢导致图片加载失败,所以我们需要对图片配置 CDN 加速。

CDN的全称是(Content Delivery Network),即内容分发网络。其目的是通过在现有的Internet中增加一层新的CACHE(缓存)层,将网站的内容发布到最接近用户的网络”边缘“的节点,使用户可以就近取得所需的内容,提高用户访问网站的响应速度。具体原理见CDN加速原理。通俗来讲,就是 CDN 服务商在全球各个地方建立服务器把要加速的站点进行缓存备份,当你访问站点时实际上是从离你最近的服务器访问缓存,速度自然就快了。

既然要搭建这么多服务器,服务肯定是要收费的吧。在这个互联网时代,还真有免费 CDN —— jsDelivr CDN,不仅开源免费而且在中国大陆建有许多服务站点,官网还声称是中国大陆唯一拥有许可证的公有 CDN,所以速度、稳定性都可以放心了。

打开jsDelivr CDN 官网,可以看到 jsDelivr 支持 npm、GitHub、WordPress三个站点的加速,用于我们的GitHub图床是再适合不过了。

在这里插入图片描述

// load any GitHub release, commit, or branch
// note: we recommend using npm for projects that support it
https://cdn.jsdelivr.net/gh/user/repo@version/file


// load jQuery v3.2.1
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js


// use a version range instead of a specific version
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2/dist/jquery.min.js

https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js


// omit the version completely to get the latest one
// you should NOT use this in production
https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js


// add ".min" to any JS/CSS file to get a minified version
// if one doesn't exist, we'll generate it for you
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/src/core.min.js


// add / at the end to get a directory listing
https://cdn.jsdelivr.net/gh/jquery/jquery/

在浏览器输入https://cdn.jsdelivr.net/gh/用户名/仓库名/,(注意最后的/不要丢),可以打开我们在 GitHub 上创建的仓库的文件列表,说明我们在 Github 上创建的仓库已经默认被 jsDelivr 缓存了。

image-20220409102227478

所以只要把资源链接中的前面部分更改一下就可以使用 CDN 加速了。

例如,

  • 原始图片地址的格式为https://raw.githubusercontent.com/用户名/仓库名/分支名/目录/图片名.pnghttps://raw.githubusercontent.com/yushuaige/myblog/master/img/image-20201219114500183.png

  • 更改后的图片地址的格式https://cdn.jsdelivr.net/gh/用户名/仓库名@分支名/目录/图片名.png

    https://cdn.jsdelivr.net/gh/yushuaige/myblog@master/img/image-20201219114500183.png

可以分别打开一下两个图片网址感受一下速度区别。

PicGo 中需要改一下自定义域名,之后上传图片自动生成的链接就是 jsDelivr 的链接了。具体就是在设定自定义域名填写https://cdn.jsdelivr.net/gh/用户名/仓库名@master
在这里插入图片描述

3.3 Typora 配置

打开文件偏好设置图像,选择插入图片时上传图片,勾选图中三个选项,上传服务设定选择PicGo (app),PicGo 路径通过后面的文件夹选择自己电脑上 PicGo 的安装路径。

image-20210112233235226

此时,使用 Typora 编辑文件,拖入或者粘贴图片时,会自动调用 Pic

点击验证图片上传选项

image-20220409095757869

4 常见问题

在这里总结一下自己在使用过程中,遇到的一些坑,记录一下。

4.1 GitHub 成功上传图片,但是不能正常显示

此处好像是由于 hosts 文件解析的问题,我在使用过程中,参考的这个网址:解决github图片不显示问题,配置后,GitHub 即可正常显示图片,很赞,已收藏文章。

特别提醒:在修改 hosts 文件之前,一定要记得先备份!备份!备份!!!避免一些未知的原因,到时候想恢复回去都很难。

4.2 两个设备都要配置同样的环境,token 可以一样吗?

其实我自己在配置的时候,也是很蒙逼的,由于之前配置了一台电脑,生成了一个 token,然后第二台电脑想再次使用之前的 token 时,发现我找不到在哪了,由此推断:GitHub 给的 token ,应该是一台设备一个,然后我又重新生成了一个 token 给第二台电脑用。

4.3 PicGO图片长传GitHub 失败

Error:Can’t find github config,,一般是由于PicGO中的GitHub设置错误造成的

在这里插入图片描述

查看GitHub图床的参数:

  • 仓库名,填写格式为用户名/仓库名
  • 设定Token,如果忘记,需要重新生成

4.4 Failed to fetch

Failed to fetch,一般是由于端口设置错误造成的,此时需要打开 PicGo 设置,点击 设置 Server,此时监听的端口号需要与 Typora 中的端口号保持一致,一般默认就是 36677,只是需要去查看是否被篡改等等。

在这里插入图片描述

5参考链接

https://support.typora.io/Upload-Image/#picgoapp-chinese-language-only

  开发工具 最新文章
Postman接口测试之Mock快速入门
ASCII码空格替换查表_最全ASCII码对照表0-2
如何使用 ssh 建立 socks 代理
Typora配合PicGo阿里云图床配置
SoapUI、Jmeter、Postman三种接口测试工具的
github用相对路径显示图片_GitHub 中 readm
Windows编译g2o及其g2o viewer
解决jupyter notebook无法连接/ jupyter连接
Git恢复到之前版本
VScode常用快捷键
上一篇文章      下一篇文章      查看所有文章
加:2022-04-15 00:19:38  更:2022-04-15 00:22:02 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/14 15:14:06-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码