markdown是一门易于上手能帮助作者专心写作的文档编辑语言,它的好处太多了,建议想自己动手做笔记写博客的朋友都可以学一学,10分钟上手(我昨天晚上还不会用,今天就开始用它写博客了。。足以证明它是真的很简单)

Tpyora是一款优雅的markdown编辑器,也推荐给大家,至于安装和配置,比安装word还简单,就不赘述了

但是,这都不是重点,重点是咱们写博客的时候,总是需要插入图片的,图片存在本地的话上传到博客网站去就没法显示了,就算一个图一个图的复制粘贴上去,想移植到其他的博客网站,图就会失效,我们就需要图床

图床是干什么的?
图床就是一个便于在博文中插入在线图片连接的个人图片仓库。设置图床之后,在自己博客中插入的图片链接就可以随时随地在线预览了,并且不会因为任何意外原因无法查看,除非自己亲自删除。

神奇的PicGo就是为了解决这个问题诞生的,它可以将图片上传到指定的图床上,然后返回markdown链接,直接粘贴到你的文档中,就搞定啦

问题又来了,网上推荐七牛云阿里云都是要租赁服务器的,太麻烦还要钱,微博现在挂链接又很厉害。大部分人选择用github,但是github虽好却是国外的网站,速度终究比不上国内网站,研究了小半天,终于发现完美的解决方案

最终决定使用PicGo + gitee码云来实现markdown图床

废话说到这里,开始进入正题

1. 安装

  • PicGo
  • picgo-plugin-gitee-uploader插件

首先打开picgo官网,下载安装包

img

如果速度慢,点击此地址下载:

mac: https://gschaos.club/down/PicGo-2.3.0-beta.3-mac.zip

win: https://gschaos.club/down/PicGo-Setup-2.3.0-beta.3.exe

安装之后打开主界面

image-20251105092633640

选择最底下的插件设置,搜索gitee

image-20200911093648928

点击右边的gitee-uploader 1.1.2开始安装

这里注意一下,必须要先安装node.js才能安装插件,没装的自己装一下,然后重启就行。


2. 建立图床库

点击右上角的+号,新建仓库

image-20200911093729491

新建仓库的要点如下:

  1. 输入一个仓库名称
  2. 其次将仓库设为公开
  3. 勾选使用Readme文件初始化这个仓库

image-20200911135935950

点击下一步完成创建


3. 配置PicGo

安装了gitee-uploader 1.1.2插件之后,我们开始配置插件

配置插件的要点如下:

image-20200911093830243

  • repo:用户名/仓库名称,比如我自己的仓库MysticalYu/pic,找不到的可以直接复制仓库的url,复制浏览器的仓库地址,而不是页面左上角显示的,容易出现大小写问题

image-20200911093907929

  • branch:分支,这里写上master
  • token:填入码云的私人令牌
  • path:路径,一般写上img
  • customPath:提交消息,这一项和下一项customURL都不用填。在提交到码云后,会显示提交消息,插件默认提交的是 Upload 图片名 by picGo - 时间

这个token怎么获取,下面登录进自己的码云

  1. 点击头像,进入设置

img

  1. 找到右边安全设置里面的私人令牌

image-20200911093943588

  1. 点击生成新令牌,把projects这一项勾上,其他的不用勾,然后提交

image-20200911094009969

这里需要验证一下密码,验证密码之后会出来一串数字,这一串数字就是你的token,将这串数字复制到刚才的配置里面去。

image-20200911094119173

注意:这个令牌只会明文显示一次,建议在配置插件的时候再来生成令牌,直接复制进去,搞丢了又要重新生成一个。

保存,完成即可。

4. 将仓库配置成giteePage页

我们需要通过链接来访问图片,这里将刚才建立的仓库设置成GiteePage页

  1. 点击服务,选择Gitee Pages

image-20200911095044868

  1. 如果自己想使用Https的图片,比如自己的博客网站是支持SSL认证的话,可以勾选强制使用Https; 这里参考:为什么部署SSL证书后还是提示不安全

image-20200911095640287

开启成功后再次访问就会变成下面的页面,这里的更新间隔是一分钟,需要手动更新,当然也可以配置WebHook触发服务器钩子来调用API自动更新,这里不涉及这方面,不展开。

image-20200911095541779

这样我们就获得了一个可以访问的网址

通过这个网址和上面PicGo配置的Path组合就可以访问我们需要的图片的。类似这种:

https://mysticalyu.gitee.io/pic/img/20200409141450-lee-gh-2.jpg

gitee图床访问异常

如果你是要用gitee作为自己博客的图床的话,当我们获得上述图片链接之后可能还是不能在我们的博客中正常显示,那是因为gitee上了防盗链,不允许自己和外部未授权站点请求图片资源,这个过程是使用请求头里面的referer字段实现的,它会判断用户ip来源,然后禁止掉非法访问。

我们只需要在HTML的head部分加上这样一行代码就可以解决了:

<meta name="referrer" content="no-referrer" />

如果你是Hexo主题博客的话,可以在主题目录下的:layout/_partial/head.ejs中添加meta标签

image-20251105101722042

Typora配置PicGo

**一个编写md文件的神器,官网地址:https://typora.io/ ** 使用方法和基本配置见百度谷歌。

这里说明一下如何配置PicGo文件上传到服务器。

配置如下

image-20200911094434501

  1. 配置好PigGo的执行文件
  2. 验证一下图片是否能上传成功

image-20200911094603050

这里可以选择插入图片的操作,比如直接上传服务器。

以上配置后,基本就可以实现自己的图床了。

推荐阅读

Windows 翻墙教程:从零开始科学上网(最稳定的科学上网方案)

苹果/IOS系统手机实现科学上网教程-翻墙VPN软件工具

安卓/Android系统手机实现科学上网教程-翻墙VPN软件工具