使用 PicX 创建免费的图床神器

2,226 阅读3分钟

这是我参与8月更文挑战的第1天,活动详情查看:8月更文挑战

前言

写博客文章时,图片的上传和存放是一个问题,我们也许会在不同的平台发布同一篇文章,这样一来每个平台都要上传图片。

为了解决这些问题,做法是把图片统一上传到一个在线的第三方静态资源库中,我们把这个资源库称为图床。其返回一个图片的URL,使用markdown+图片url的方式写作文章,然后就可以直接使用链接引入图片。然后整篇文章复制即可,再也不用担心图片的问题了。

介绍

PicX,基于 GitHub API 开发的图床管理神器,图片外链使用 jsDelivr 进行全球 CDN 加速。免费、稳定、高效。免下载、免安装,只需一个 GitHub 账号,打开网站即可进行配置使用,轻松解决图床难题。

一共3个步骤就完成设置了

  1. 创建 GitHub 仓库
  2. 获取 GitHub Token
  3. 配置图床

作者:@XPoet

网站:picx.xpoet.cn/

仓库:github.com/XPoet/picx

文档:github.com/XPoet/picx/…

1. 创建 GitHub 仓库

这创建仓库相信大家都会了啊,那就直接上图了。

1.png

2. 获取 GitHub Token

创建一个有 repo 权限的 GitHub Token

2.png

这里我们填完名称勾选上repo选项之后呢,然后直接点击 Generate token 按钮,即可生成一个token,如下图:

token.png

注意 那个英文的意思是:

确保立即复制您的个人访问令牌。 你将无法再看到它! 那万一没了重新生成一个就行。

3. 配置图床

进行图床配置(绑定 GitHub Token、存储图片的仓库和目录)

  1. 这里我们先登录一下,点击右上角的未登录,然后填入刚刚在Github生成的Token,点击确认Token。会自动获取该用户下的仓库

3.png

  1. 在仓库的下拉列表中,选择一个作为图床的仓库

4.png

  1. 选择一种目录方式(目录即仓库里存放图片的文件夹)

5.png

  • 新建目录:需手动输入一个新目录。
  • 根目录:图片将直接存储在仓库根目录下。
  • 自动目录:自动生成日期格式 YYYYMMDD 的目录。例如:20200909
  • 选择仓库目录:自动获取仓库下所有目录,选择一个即可。

如果想对图片进行一个分类怎么办呢?

这个也很简单,新建一个文件夹然后再上传,等到下次还要上传到这个文件夹,我们在目录方式中勾选选择仓库目录,就会展示你创建的所有文件夹。然后进行选择。

比如我这里选择vue3这个啊,然后点击完成配置

6.png

上传图片

点击左侧菜单栏的上传图片,我们可以看到目录以及变成我们刚刚选的vue3知识点

7.png

上传是可以多选

上传前可以设置图片的名字哈希或者重命名,如果都不勾选就是你原本图片的名字。

8.png

图床管理

点击左侧菜单栏的图床管理,我们可以看到当前目录是我们选择的vue3知识点

9.png

点击切换目录可以切换图片目录,点击图片下面的Github和CDN可以复制相对应的链接

点击图片下面的MD按钮所复制的链接可以直接使用在MD文件中。否则就是默认链接。

例:

  1. 点击MD之后的链接

10.png

  1. 默认链接(仅仅是一条链接,在MD文件中不生效)

11.png

结语

总得来说操作简单,我们使用的时候尽量使用CDN的链接,这样访问会快很多。

觉得不错的话,欢迎收藏点赞喔~