PicGo工具配置Gitee图床仓库

码农zhang在线搬砖

已于 2023-05-25 23:27:06 修改

阅读量885

点赞数 5

文章标签： gitee github git

于 2023-05-25 00:16:21 首次发布

本文链接：https://blog.csdn.net/wu_yao_wang/article/details/130769352

版权

1.图床的作用

图床其实是互联网中存储图片的空间，作为一个人的云端图片链接。

我们在写博客时大多使用Markdown文件来编辑文章，而Markdown文件的图片是通过链接的方式进行传输的的，图片与Markdown文件是分开存储的形式，我们如果想要将保存有图片的Markdown文件保存到其他设备进行展示时，就不得不连着图片的文件夹一起打包进行传输来保证我们在另外的设备上打开Markdown文件时图片能够正常显示。

因此一个云图片链接就很有必要了，而网上直接找到的链接不具有可靠性，因此搭建自己的图床还是很有必要的。本文章通过Gitee来构建图床仓库。

2.用到的工具

搭建自己的图床仓库需要用到的工具：

PicGo
Node.js
gitee-uploader插件
Gitee

3.各工具的下载及安装

3.1.PicGo

3.1.1.PicGo下载

PicGo文档地址：PicGo-Doc
PicGo下载地址：https://molunerfinn.com/PicGo
或者直接通过GitHub的仓库地址进行下载：https://github.com/Molunerfinn/picgo/releases
通过提供的国内可下载链接或者Assets内的链接进行PicGo安装包的下载（Windows环境下载.exe）

3.1.2.PicGo安装

右键单击安装文件进行安装，根据需要进行安装
选择安装位置，点击安装
点击安装，完成PicGo安装
PicGo界面

3.2.Node.js

3.2.1.Node.js下载

Node.js下载地址：https://nodejs.org/en

3.2.2.安装Node.js

右键单击文件，选择“安装”进行安装。
选择“Next”进行下一步，接受许可后，点击“Next”进行下一步。
选择安装路径，点击“Next”进行下一步。
直接默认安装，一直选择“Next”到最后一步，选择“Install”进行安装。
选择“Finish”完成安装。

3.2.3.配置Node.js环境变量

3.2.3.1.配置环境及验证

在“系统变量”中的“Path”中添加Node.js安装路径（这一步在安装Node.js时会默认添加）。
验证是否安装成功，输入以下命令验证：

//在cmd命令窗口查看Node.js版本
node -v
//在cmd命令窗口查看npm版本
npm -v

正常显示版本号即安装成功：

3.2.3.2.修改模块下载位置

在Node.js安装目录下新创建两个文件夹“node_global” 和 “node_cache” 两个文件夹
修改默认文件夹

//设置全局模块的安装路径到 “node_global” 文件夹
npm config set prefix "C:\Program Files\nodejs\node-global"
//设置缓存到 “node_cache” 文件夹
npm config set cache "C:\Program Files\nodejs\node-cache"

如下图显示即成功：

将“node-global”路径添加到“系统变量”下的“Path”中(由于node全局模块大多可以通过命令行进行访问，将路径添加到“系统变量”下的“Path”中，方便使用命令行运行)

3.2.3.3.测试默认位置是否修改成功

//使用以下命令来测试默认位置是否修改成功
npm install express -g
//或以下命令
npm install express --global

/**
	“-g”等同于“–global”，“-g” 是全局安装，不加“-g”就是默认下载到当前目录。
	“-g” 表示安装到之前设置的“node_global”目录下，同时nodejs会自动地在node_global文件夹下创建“node_modules”子文件夹。
*/

下图显示测试成功：

注意：在测试npm时会遇到测试失败的问题。可能有两方面原因：

文件夹没有修改权限，将文件的权限放开即可；
npm版本较低，升级npm版本即可；

//npm版本升级（在版本升级之前可以先放开文件夹的修改权限）

//清除npm缓存
npm cache clean -f
//升级到最新版版
npm install npm -g
//npm升级到指定版本
npm install npm@[版本号] -g

3.2.3.4.设置淘宝镜像

将npm默认的registry修改为淘宝registry

//查看当前使用的镜像路径
npm config get registry

//更换npm国内镜像
npm config set registry https://registry.npmmirror.com

//再次使用查看镜像的代码查看镜像路径
npm config get registry

更改成功！

安装基于淘宝源的cnpm（看个人需求可以不安装）

//安装基于淘宝源的cnpmcnpm 
npm install -g cnpm --registry=https://registry.npmmirror.com

//执行命令查看cnmp是否安装成功
cnmp -v

cnpm安装成功！

3.3.gitee-uploader插件

gitee-uploader插件可以通过PicGo中的“插件设置”进行安装，也可以使用npm进行安装，也可以将插件下载到电脑上通过PicGo中的插件设置进行手动导入。

3.3.1.通过PicGo安装

在PicGo中的“插件设置”界面，搜索框中输入“gitee”来搜索gitee-uploader插件。
点击gitee-uploader插件上的“安装”按钮进行安装。
当gitee-uploader插件上的安装按钮显示为“已安装”时，插件安装成功。

注意：通过PicGo中“插件设置”进行安装时有概率发生安装失败的情况。（安装失败的原因及解决办法暂未找）

3.3.2.通过npm手动安装

以管理员身份运行命令提示符
输入“cd C:\Program Files\PicGo”命令进入PicGo安装目录
输入“npm install picgo-plugin-gitee-uploader”命令安装gitee-uploader插件，
重启PicGo完成插件安装

注意：使用npm手动安装成功的gitee-uploader插件在PicGo中有概率不显示（安装失败），这时就需要再进行手动导入操作。

3.3.3.通过本地手动导入

首先将gitee-uploader插件下载到本地
打开PicGo中“插件设置”，找到“导入本地插件”
找到下载好的插件picgo-plugin-gitee-uploader文件，选择文件后导入成功

注意：插件一般都是下载到PicGo安装目录的“node_modules”文件中，如果根目录中没有，手动创建即可。

3.4.Gitee创建图床仓库

3.4.1.建仓

在这里插入图片描述

建仓时给仓库命名
添加仓库介绍
仓库性质只有“私有”选项（后续可能改为“开源”）
选择分支模型为单分支模型（master）
点击“创建”完成建仓
找到仓库“管理”更改仓库为“开源”
允许“仓库公开须知”，点击“保存”完成更改
注意：Gitee仓库性质不管是开源还是私有，都能够实现图床仓库的功能，但是私有仓库中图片在PicGo工具中不显示缩略图，开源仓库没有此问题。

3.4.2.创建私人令牌

在gitee“设置”中找到“私人令牌”
点击“生成新令牌”来创建用于PicGo图床的私人令牌
添加私人令牌的描述
允许“查看、创建、更新项目”的权限
点击“提交”完成私人令牌的创建
保存好私人令牌后可关闭（关闭后私人令牌将不可见）

4.PicGo配置Gitee图床仓库

4.1.配置

打开PicGo，找到“图床设置”中的“gitee”选项并点击打开
选中“gitee”并打开，点击“+”添加gitee图床仓库
添加gitee图床仓库，根据要求填写仓库的信息（图床配置名，repo图床仓库名，branch分支名，token私人令牌，path图片存放路径）
图床仓库添加好之后，在“上传区”找到“图片上传”下拉框，找到“gitee”选择配置好的图床仓库

注意：PicGo在配置Gitee图床仓库的时候，“repo（图床仓库名称）”要格外注意，这个需要gitee的用户名加上仓库名才行，单独填写仓库名配置不成功。repo的参数可以直接通过浏览器中的URL进行复制获取。

//repo的参数格式如下
用户名/仓库名

//eg：
zhangsan/picgo-images

4.2.使用

4.2.1.PicGo使用

通过拖拽图片进行上传
点击“点击上传”选择图片上传
复制的图片通过“剪切板图片”按钮上传

注意：图片上传失败的原因可能是图床仓库配置有问题，或是在上传界面没有选择已经配置好的图床仓库。

4.2.2.Typora使用

打开“Typora”，点击“文件”选择“偏好设置”
选择“图像”进行设置
“插入图片时…”选择上传图片
“上传服务设定”中的“上传服务”选择PicGo(app)，“PicGo路径”选择PicGo安装目录下的PicGo.exe文件
点击“验证图片上传选项”查看是否配置成功

注意：如果Typora在使用PicGo时显示上传失败，原因可能时PicGo上面的图床仓库配置有问题。

5.配置过程中遇到的问题汇总

5.1.PicGo工具遇到的问题

直接在PicGo工具上安装插件时可能会出现安装失败的情况，这时需要通过npm工具手动安装，或者手动导入本地插件；
PicGo在配置图床仓库的时候要注意repo的仓库名（格式：用户名/仓库名）；
在上传图片之前要先在上传界面选择已经配置好的Gitee图床仓库；

5.2.Node.js遇到的问题

在使用命令提示符修改模块下载位置时可能会出现修改失败的情况，这时需要将需要修改的文件夹的权限放开后再进行操作，可以规避掉上述问题；
将“node-global”路径添加到“系统变量”下的“Path”中(由于node全局模块大多可以通过命令行进行访问，将路径添加到“系统变量”下的“Path”中，方便使用命令行运行)；
cnpm工具安装时可能会出现失败的情况，如果npm工具的镜像已经更改为国内镜像，cnpm可以不进行安装；
在测试npm工具时，提示npm工具版本过低，升级npm工具版本至最新，命令：npm install npm -g；