Hi tree

行有不得,反求诸己

0%

Github + PicGo + Typora搭建图床

前面两篇博客介绍了个人博客搭建的过程,接下来就可以写博客了。但是写博客不可避免的需要用到一些图片,所以拥有一个图床是非常重要的事情。

网上有一些免费的图床,但是存在挂掉的风险。也有一些付费的云,如七牛、阿里云等,但是比较麻烦,需要花时间去研究怎么使用,可能在传图片的时候也需要手动操作许多步骤。

我个人比较倾向于使用Github作为图床,主打一个免费+稳定。然后在Typora中发现了PicGo这个应用,可以简化上传的动作。所以决定采用GitHub + PicGo + Typora搭建一个图床,方便日后博客使用图片。

Github

首先需要在GitHub上创建repo,权限为需要设置为public,用于存放图片。具体过程不表。

PicGo

下载

下载PicGo v2.3.1,这是最新的release版本,选择合适的格式下载,下载完成后安装。

配置

打开PicGo,图床设置选择GitHub,有三个必须的配置

  • 仓库名:填写为GitHub_username/repo_name
  • 分支名:填写分支名,一般新建的repo默认分支为mastermain,可以在repo的settings界面查看
  • Token:需要手动创建
    • 打开Settings
    • 左侧菜单最下面点击Developer settings
    • 选择Personal access tokens下的Tokens(classic)
    • 点击右侧Generate new token按钮,选择classic
    • 将生成的token复制到PicGo的设置里

保存配置之后就可以上传图片了。打开上传区,选择一张图片,拖住上传。上传成功后会将URL复制到剪贴板。登陆Github看到图片已经成功上传了。

此时图片上传到了repo的根目录,如果想要上传至指定的目录,可以在PicGo设置界面设定存储路径,如设置为imgs/,图片便会上传至repo下的imgs目录。注意一定要加/,否则变得是图片名字,而不是图片存储的路径。

还有一个配置是自定义域名,这个在一开始配置时是不需要动的。如果后续需要使用CDN加快图片访问速度,可以去修改

参考设置如图:

Typora

Typora支持了PicGo上传图片,也就是意味着只要复制粘贴图片到Typora,就可以自动使用PicGo上传图片并生成链接,十分方便。

配置过程为:

  • Typora左上角一次点击文件->偏好设置->图像
  • 如下图所示,依次设置:
    • 图片存储方式:上传图片
    • PicGo路径:选择为PicGo的安装路径
    • 点击验证图片上传选项

Typora会自动验证上传,一般情况下都会成功的。不需要额外配置什么。

此时就可以直接复制图片到Typora了。

但是会有一个问题,图片上传成功,但是无法在Typora预览。

从网上随便找了一张图片,复制链接到Typora,发现是可以正常预览的。那么可以定位问题出在域名上。

搜索了一下相关问题,在一篇博客中找到了一种解释:

使用Typora
上面的设置完成后,在 Typora 里插入图片时会把图片复制到本地的指定目录,待编辑完md文件后再选择格式 -> 图像 ->上传所有本地图片,就可以自动把md文件里的图片上传到github,并自动把图像的URL更换。不设置为插入图片就自动上传是因为上传到github后,自定义的图片URL生效需要一段时间,URL没生效时在Typora里无法预览图片。

注意:typora 在线预览github图片失败是因为自定义的URL还不能访问,而typora没有自动刷新远程图片的功能,稍等一下重启md文件,就能看到typora把github图片加载出来了。

但是个人认为有一些出入的地方,复制图片的链接到浏览器的地址栏,是可以正常打开图片,看起来不像是URL无法访问的问题。

同时在GitHub上找了一些类似链接的图片,同样无法预览,所以有可能是无法访问GitHub的原因,可能需要挂VPN在测试一下。

不巧这台电脑没有VPN客户端,只能后面再试了。

尽管在博客中的解释并不能让我信服,但是它提供的一种思路是可以借鉴的:

  • 文件->偏好设置->图像中,插入图片时不要设置为上传图片,而设置为复制到指定路径,然后在本地建立一个文件夹存放图片,此时插入图片是可以正常预览的。然后在编辑完成之后,点击格式->图像->上传所有本地图片,将本地图片统一上传。

另一种可能的解决方式就是,PicGo中配置自定义域名,使用CDN加速,可能能解决这个问题。

解决:修改hosts文件

原因是github屏蔽掉了图片,添加以下内容到本地的hosts文件

1
2
3
4
185.199.108.133 raw.githubusercontent.com
185.199.109.133 raw.githubusercontent.com
185.199.110.133 raw.githubusercontent.com
185.199.111.133 raw.githubusercontent.com

重启Typora即可。

参考自:博客

参考

本文只是简略记录了一下过程,详细的可以参考以下:

PicGo官方教程

知乎上的一个教程

-------------------------------------------The End -------------------------------------------