Github+PicGo+Jsdelivr搭建个人图库

前言

图片存储、显示的问题是只要写blog的人就避免不了的问题之一。之前由于一直在本地的jupyter notebook（以下简称 jupyter） 写 blog（到底是算笔记还是blog呢？），jupyter 有一个很神奇的功能：当你使用 windows 自带的截图，截图后直接 ctrl+v 就能直接在 jupyter 上面正常显示，都不需要保存图片。但是这样也有缺点，就是你不能对这些图片的位置进行移动，不然就不能正常显示图片了。

但是由于最近，打算写一个真正的 blog，所以在没有搭建图床之前，遇到了一些关于图片的问题。

背景

1.由于是刚接触 hexo，还不太会用，所以图片的存储路径是一个很大的问题。

2.知道 hexo 会将本地的 blog 文件夹（即存放 hexo 资源和blog文件的文件夹，以下统称blog文件夹）中 source 文件夹中的文件上传到 github 中。

3.也是刚接触 marktext，很多功能不太熟悉。

4.图片显示只能在 marktext 和网页中选一个（即写 blog 时看见图片，上传后网站里就看不见图片）

5.以为搭建一个个人图床，必须要有服务器（坚定的白嫖党怎么能花钱！）。当然不一定要服务器，有公网 ip 在自己电脑上也可搭建、但是公网 ip 也同样没有。

遇到的问题

1.不知道在 blog 文件夹中的哪里创建文件夹用于存储图片比较好，所以就在 blog 文件夹下的 source文件夹 中创建了一个用于存储所有图片的文件夹 pic。但是图片不能像在j upyter 中一样直接 ctrl+v 就可以万事大吉。而且图片只会在写文章时显示（因为使用的绝对路径），在网站中就不显示。

2.然后为了在网站中显示图片，就在写文章时将图片的路径改为相对路径，这样网站中图片显示的问题就解决了（emmm那么代价就是写文章时就看不见图片了）

3.而且为了管理好图片，每次写文章都要再创建一个同名文件夹存储该文章的图片，实在太麻烦，打击写 blog 的心情。

4.然后查阅hexo官方配置文档时，发现一个功能，就是创建文章时，能自动在_posts目录下再创建一个同名文件夹，可以用来存储图片。（但是还是没有解决图片显示 和 还要额外将图片存储到文件夹的问题）

解决办法

创建一个 github 公开仓库，将 Pico 绑定 github，然后将本地的图片使用 picgo 上传，picgo 会将图片上传到 github 仓库，然后生成一个图片的 url ，然后使用免费 jsdelivr cdn对 github 仓库（即对生成的url进行加速）进行加速，最后使用 shareX 解决 windows截图不会自动保存，导致不能直接 截图 +ctrl+v 上传图片的问题。

这样一套组合拳就能和之前在 jupyter 上写笔记一样了，十分便捷，而且完全免费。

需要用到的知识（小白必看）

1.会用github，指创建仓库

3.愿意折腾，会自己解决问题

用到的软件

1.[picgo网址](PicGo is Here | PicGo)：一个用于快速上传图片并获取图片 URL 链接的工具

2.ShareX - The best free and open source screenshot tool for Windows (getsharex.com)：一个截屏软件

3.MarkText：一个md编辑器

4.npm包管理器

5.魔法，如果遇到网站打不开，或者图片上传失败，可能是没有使用魔法

环境

1.picgo-2.3.1(指客户端的picgo)

2.markText- 0.17.0.1

3.shareX-15.0

4.windows10

创建github仓库(嫌啰嗦的从这里开始)

1.创建一个 github 仓库 ，repository name 自己订，但是下面的必须选Public（血泪教训，不然后面只能上传github，但是图片根本不显示）

2.仓库创建完成以后，点击右侧自己的头像，选择 settings

3.左边侧边栏最下面，选择 Developer settings

4.点击 Personal access tokens,然后选择 Tokens，点击右边的 Generate new token，选择 Generate new token classic。

5.自定义Note 和 Expiration，记得勾选 repo，然后划到最下面点击 Generate token即可

6.生成后你会看到一串字符串，一定要把这个Token复制、保存下来(可以新创一个txt文件，保存到里面)，因为只会出现一次。

安装Picgo

1.打开picgo官网，可以看见许多下载方式，这里使用的是山东大学镜像站

2.进入山东大学镜像站后选择 v2.3.1

3.windows10用户选下面的

4.下载完成进行安装即可，可以参考下面

配置picgo

1.打开刚刚安装的 picgo，点击图床设置，选择 github

2.将你上面创建的github仓库填入，分支名默认为main（如果你没有修改github仓库的分支），token填入上面要你复制的token

3.存储路径可以不填，也可自己定义，即使你的github仓库没有对应的路径，picgo会帮你自动创建

jsdelivr 加速

(jsDelivr - A free, fast, and reliable CDN for JS and open source)

在自定义域名处填入jsdelivr 加速 github 的 url 格式：https://cdn.jsdelivr.net/gh/ 你的账户名/你的仓库名@你的分支名

如我的就是：https://cdn.jsdelivr.net/gh/aericalao/picgo@main

现在就可以尝试上传图片，选择上传区和下面的 url，随便选一个图片上传进行测试

上传过程下面会有进度条

上传完成后，会有提示，此时你点击 相册可以看见图片的预览，也可可以复制url，到浏览器打开查看图片，都能看见图片就可以继续了。

MarkText设置picgo

[MarkText的安装](Hexo+Github Page搭建个人博客 - GoodYuan)在本站有，可以自行查看。

v0.17.1这个版本的MarkText识别不了exe文件直接安装的picgo，所以使用npm安装picgo

1.打开 cmd 或者 gitbash，全局安装 picgo，执行 npm install picgo -g

2.执行 where picgo 可以查看picgo的安装路径，看见 picgo 和 picgo.cmd，则说明安装成功

3.配置picgo的github，执行 picgo set uploader,使用小键盘的↑↓选择，Enter进行确认，配置的东西和上面picgo客户端一致，下面是我已经配置好的。

4.也可以打开 C:\Users{username}\.picgo\config.json 文件直接在文件中进行修改

5.打开 MarkText,点击左上角,选择文件，选择 偏好设置

6.选择 图片，配置和下面一致就行

安装ShareX

1.进入 sharex官网，点击 download ，点击 Setup 等待下载

2.选择 I accept

3.自定义文件路径

4.自行按需勾选

5.点击 install

ShareX解决截图粘贴问题

使用 windows 自带的截图时，直接粘贴到 MarkText 会导致图片一直在上传，这是因为windows 自带的截图不会自动保存到本地。

1.打开 shareX ，点击 截图后的任务

2.安装 shareX后，可能会出现，这是因为ShareX默认的截图快捷键和windows自带的截图快捷键发生了冲突，自行取消一个即可。

最后

这篇文章只是简单记录以下自己搭建个人图床的过程，只是列出了我搭建图床中遇到的问题，希望大家可以避坑，中间可能还会遇到我的文章中没有提到的问题，大家可以自己搜索解决，希望大家都能完成自己的个人图床的搭建。

参考

1.如何用github搭建图床（亲测有效）_github图床_jxwd的博客-CSDN博客

2.好用的Markdown编辑器——MarkText配置（MarkText+Picgo+GitHub）_依然的风暴的博客-CSDN博客

3.MarkText + picgo图床选择(GitHub或MinIO)_picgo minio_木一番的博客-CSDN博客

4.一篇就够，超详细配置Marktext的Picgo-Core图片上传到七牛云图床 - 陶小桃Blog (52txr.cn)