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

Posted 2022-08-27 琦彦

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

1 软件下载

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

2 方式一：GitHub

2.1 创建图片库

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

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

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

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.创建空间

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

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

2.3.自定义域名

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

2.4.配置七牛云图床

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

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

• 确认存储区域

存储区域	地域简称	上传域名
华东	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 。

安装后的软件界面如下：

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

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

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

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

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

经过实际验证，有一些理解：

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 缓存了。

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

例如，

• 原始图片地址的格式为https://raw.githubusercontent.com/用户名/仓库名/分支名/目录/图片名.png，https://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 的安装路径。

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

点击验证图片上传选项

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设置错误造成的

或者报错

StatusCodeError: 404 - "message":"Not Found","documentation_url":"https://docs.github.com/rest"
    at new StatusCodeError (D:\\java\\PicGo\\program\\resources\\app.asar\\node_modules\\request-promise-core\\lib\\errors.js:32:15)
    at Request.plumbing.callback (D:\\java\\PicGo\\program\\resources\\app.asar\\node_modules\\request-promise-core\\lib\\plumbing.js:104:33)
    at Request.RP$callback [as _callback] (D:\\java\\PicGo\\program\\resources\\app.asar\\node_modules\\request-promise-core\\lib\\plumbing.js:46:31)
    at Request.self.callback (D:\\java\\PicGo\\program\\resources\\app.asar\\node_modules\\request\\request.js:185:22)
    at Request.emit (events.js:200:13)
    at Request.<anonymous> (D:\\java\\PicGo\\program\\resources\\app.asar\\node_modules\\request\\request.js:1154:10)
    at Request.emit (events.js:200:13)
    at IncomingMessage.<anonymous> (D:\\java\\PicGo\\program\\resources\\app.asar\\node_modules\\request\\request.js:1076:12)
    at Object.onceWrapper (events.js:288:20)
    at IncomingMessage.emit (events.js:205:15)
-------Error Stack End------- 

查看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