教你免费做一个属于自己稳定有效的图床-PicGo

当你在写博客或分享内容的时候，常会遇到需要储存图片并在文章中插入的情况。这时候一个好用的图床就很有必要了。本教程将介绍如何使用PicGo将图片上传至七牛云图床，并应用于自己的网站或博客当中。

环境准备

• 安装 node.js
• 注册七牛云账号并获取 accessKey 和 secretKey 以及需要使用的存储空间名称

安装PicGo

首先需要安装 PicGo，PicGo是一款开源、跨平台的图片上传工具，可以将图片上传到各大图床，如七牛云、腾讯云、阿里云等。

npm install picgo -g

配置七牛云存储

PicGo 默认是不支持七牛云的，需要安装七牛云的插件。

npm install picgo-plugin-qiniu -g

执行完毕后，运行 PicGo 并创建一张新的令牌，在「上传设置」中选择「七牛云」，将下列信息填写好：

• 存储区域：选择就近的（华南、华东、华北等）
• 储存空间名称：填写你的空间名称
• Access Key 和 Secret Key：填写你的密钥信息
• 空间访问链接前缀：填写你的图床域名加上所使用的防盗链域名，例如：https://yourdomain.com/yourAntiTheftDomain/

填写好这些信息后，可以进行测试，测试成功后即可保存。

配置本地上传目录

这里以 Windows 系统为例，假设我们的博客仓库在 D:\MyBlog\ 目录下，我们就可以在 D:\MyBlog\source\images 目录中保存需要上传的图片。

运行 PicGo，在配置项「上传设置」-「路径设置」中设置 上传路径 为 D:\MyBlog\source\images。

使用PicGo上传图片

打开命令行工具，进入要上传的图片所在的目录下，运行 PicGo：

picgo

这时 PicGo 将自动获取当前目录下所有的图片文件，并显示出来，可以选择需要上传的图片并进行上传。

示例1：配置Hexo

我们将上传好的图片使用 Git 进行版本控制并发布到网站上。这里以 Hexo 为例。

首先安装 hexo-deployer-git 插件：

npm install hexo-deployer-git --save

然后，在 _config.yml 中添加如下配置：

deploy:
  type: git
  repository: [e-mail]:username/username.github.io.git # 你的仓库名称
  branch: master # 仓库的分支
  message : 'Site updated {{ now(\'YYYY-MM-DD HH:mm:ss\') }}'

在博客根目录下运行 hexo clean 和 hexo deploy

hexo clean
hexo deploy

这时候我们的图片已经上传到 GitHub 的仓库内，我们通过 https://username.github.io/图片名 就可以在博客中插入这张图片了。

示例2：使用typora写文章

typora 是一款轻量级的 Markdown 编辑器，常用于写博客或笔记。我们可以为 typora 配置存储图片的文件夹，方便与博客同步。

在 typora 中，点击偏好设置，进入「图像」标签页。在「上传图片」-「上传服务」中选择「自定义命令」并输入以下内容：

picgo upload $filePath

在「自定义命令」的下方输入「文件夹」-「图片上传目录」并选择存储的本地目录。

这时候，在写文章时，使用 Cmd + Shift + i 就可以快速上传图片并插入到文章中了。

完成以上两个示例之后，我们就可以方便地使用自己的图床来存储图片了。