从零开始免费搭建自己的博客(五)——Typora + PicGo + GitHub/Gitee图床

本文是博客搭建系列文章第五篇，其他文章链接：

从零开始免费搭建自己的博客(一)——本地搭建 Hexo 框架

从零开始免费搭建自己的博客(二)——基于 GitHub pages 建站

从零开始免费搭建自己的博客(三)——基于 Gitee pages 建站

从零开始免费搭建自己的博客(四)——编写Markdown文章利器 Typora

从零开始免费搭建自己的博客(五)——Typora + PicGo + GitHub/Gitee图床

从零开始免费搭建自己的博客(六)——三个站点一键发布博客

从零开始免费搭建自己的博客(七)——迁移 CSDN 博客到个人博客站点

从零开始免费搭建自己的博客(八)——博客网站个性化设置及优化

前言

前面我们搭建好了博客，选择了 Typora 作为创作软件，但是现在一篇博客从写完到发布到网站还是有许多步骤要手动处理，比如处理图片路径，发布更新等。写博客已经很耗费时间了，我们肯定不希望花费大量时间在部署上，毕竟使用 CSDN 等平台写博客时只需一键就可以发布博客，所以有必要把一些重复工作自动化，提升自己的创作体验。接下来两篇文章就做这件事情，首先是完成图床的搭建，然后是通过脚本一键发布博客。

本篇文章先介绍怎么搭建自己的免费图床。我尝试了各种组合方案，最终选用了最方便的 Typora + PicGo + GitHub + jsDelivr CDN加速的方案。不过既然前面讲了使用 Gitee Pages 建站，这里也介绍一下使用 Gitee 搭建图床的方法。关于 Typora 的使用介绍见上一篇文章。

什么是图床

图床是什么？Picture bed？No ，其实是 Picture host，即提供外链访问的图片存储服务器（看了《西部世界》，见到 “host” 最先想到的竟是“接待员” -.-）。通俗讲就是你把图片上传到一个图床提供者的图片服务器上，它会生成一个存储链接，你就可以随时通过这个链接就下载这个图片，而且还可以把这个链接放到 html 里或者 Markdown 文件里，浏览时再由浏览器或者阅读器自动加载出来。

具体有什么用呢？对于我们的 Markdown 格式的博客而言，图片就成了一个文本，你可以把文章复制到 CSDN/简书/知乎/个人博客等地方，每次换地方不需要重新上传图片，这些网站都能根据图床链接将图片加载出来。这样一说是不是发现“图床”这个翻译还挺贴切的。

当然也有翻车的时候，有时候我们浏览网页时，发现文字都能加载出来，图片都变成了一个个的叉号，这就是因为图床挂了，网站无法根据链接加载到图片，所以图床的稳定性就很重要了。还有一个问题，就是外链大家都可以访问，那么你的图片就很容易被盗链，别人直接用你的链接就可以下载到你的高清大图，版权问题不说，如果你是使用付费图床，一般是按访问流量收费，别人在文章中直接用你的图片链接，走的都是你的流量费，不过现在的图床都提供了防盗链方案。

图床服务国内的有微博图床、聚合图床、七牛云、阿里云、腾讯云等，国外的有 imgur、imgbox、SM图床等，大都是要收费的。此外也有些免费的图床服务，但是不敢用啊，万一哪天没了。

其实我们可以利用 GitHub 的存储能力和对外开放访问的特点，将 GitHub 仓库作为图床。不但免费，而且不用担心图床挂掉，毕竟如果 GitHub 挂了，部署在 GitHub Pages 的博客网站也打不开了，还管什么图片能不能加载出来。当然也请大家合理利用资源，GitHub仓库有 1G 大小的上限。

什么是 PicGo

PicGo 是一位中国开发者基于 electron-vue 开发的用于快速上传图片并获取图片 URL 链接的开源工具，GitHub主页：PicGo，作者博客：MARKSZのBlog。

写文章需要引用图片时，我们要打开浏览器将图片上传到图床服务器，再把链接复制粘贴到文章中。这太影响效率了，能不能每次插入图片时自动把图片上传并返回链接地址呢？PicGo 便是做这件事的软件，只要配置好图床类型，就可以直接拖拽图片进行上传并自动返回图片链接，配合 Typora 还可以实现在文章中插入图片时自动上传并替换为链接内容，完全不用感知上传图片的过程。

PicGo 本体支持七牛云、腾讯云、又拍云、阿里云、SM、Imgur、GitHub这些图床，而且还支持自己扩展第三方图床的支持插件，比如就有人开发了 Gitee 的插件。更多介绍见官方文档，下载地址：PicGo

打开下载地址，选择一个版本点进去，点击下载对应的安装包安装即可。同样的，如果下载速度太慢，右键复制链接地址，粘贴到迅雷下载。

GitHub 图床

1. 新建仓库

第一步要先在 GitHub 新建一个仓库用于存储图片。

打开自己 GitHub 主页，点击New新建仓库。

Repository name填写仓库名字，Description填写仓库描述，勾选Add a README file，点击Create repository创建仓库。

2. 获取 repo tokens

这个 token 主要用于让 PicGo 有权限往我们的仓库 push 代码(图片)。

点击自己的头像，选择Settings。

选择Developer settings。

点击 Personal access tokens。然后点击Generate new token，因为是敏感操作，此时需要确认密码。

Note填写 token 用途，用于备忘。下面只需要勾选repo，只给更新仓库的权限。最后点击最下面的Generate token创建成功。

复制字符串下一步使用。注意，为了安全起见此字符串只会出现一次，点击其他页面后就无法再查看了，需要重新创建，所以最好先保存到本地编辑器中。

3. PicGo 配置

打开 PicGo ,选择图床设置，选择GitHub图床，填写参数：

设定仓库名，填写格式为用户名/仓库名
设定分支名，填写默认分支master或者main
设定Token，填写上一步获取的 token 值
指定存储路径，选填，可以自定义名称，比如用年月来分类，不填图片会上传在仓库根目录。
设定自定义域名，用于修改返回的 url 前缀，不填则返回原始 url。后面配置CDN加速需要更改此项。

选择设为默认图床，点击确定保存配置。

配置完成后，点击上传区，随便选择电脑上一张图片拖动到上传区，上传成功后会弹窗提示，将该 url 复制到浏览器打开就可以看到图片。可以在PicGo设置，打开上传后自动复制URL，这样上传成功后图片 url 会自动复制在剪贴板，可以直接粘贴到记事本。

4. CDN 加速(jsDelivr)

从上一步可以看到 GitHub 存储的图片地址是 https://raw.githubusercontent.com 开头的网址，这个域名在某些地方可能打不开或者很慢导致图片加载失败，所以我们需要对图片配置 CDN 加速。

CDN的全称是(Content Delivery Network)，即内容分发网络。其目的是通过在现有的Internet中增加一层新的CACHE(缓存)层，将网站的内容发布到最接近用户的网络”边缘“的节点，使用户可以就近取得所需的内容，提高用户访问网站的响应速度。具体原理见CDN加速原理。通俗来讲，就是 CDN 服务商在全球各个地方建立服务器把要加速的站点进行缓存备份，当你访问站点时实际上是从离你最近的服务器访问缓存，速度自然就快了。

既然要搭建这么多服务器，服务肯定是要收费的吧。在这个互联网时代，还真有免费 CDN —— jsDelivr CDN，不仅开源免费而且在中国大陆建有许多服务站点，官网还声称是中国大陆唯一拥有许可证的公有 CDN，所以速度、稳定性都可以放心了。

打开jsDelivr CDN 官网，可以看到 jsDelivr 支持 npm、GitHub、WordPress三个站点的加速，用于我们的GitHub图床是再适合不过了。

在浏览器输入https://cdn.jsdelivr.net/gh/用户名/仓库名/，(注意最后的/不要丢)，可以打开我们在 GitHub 上创建的仓库的文件列表，说明我们在 Github 上创建的仓库已经默认被 jsDelivr 缓存了。

所以只要把资源链接中的前面部分更改一下就可以使用 CDN 加速了。

例如，

原始图片地址的格式为https://raw.githubusercontent.com/用户名/仓库名/分支名/目录/图片名.png，https://raw.githubusercontent.com/yushuaige/myblog/master/img/image-20201219114500183.png，

更改后的图片地址的格式https://cdn.jsdelivr.net/gh/用户名/仓库名@分支名/目录/图片名.png，

https://cdn.jsdelivr.net/gh/yushuaige/myblog@master/img/image-20201219114500183.png。

可以分别打开一下两个图片网址感受一下速度区别。

PicGo 中需要改一下自定义域名，之后上传图片自动生成的链接就是 jsDelivr 的链接了。具体就是在设定自定义域名填写https://cdn.jsdelivr.net/gh/用户名/仓库名@master。

5. Typora 配置

打开文件，偏好设置，图像，选择插入图片时上传图片，勾选图中三个选项，上传服务设定选择PicGo (app)，PicGo 路径通过后面的文件夹选择自己电脑上 PicGo 的安装路径。

此时，使用 Typora 编辑文件，拖入或者粘贴图片时，会自动调用 PicGo 将图片上传到我们的 GitHub 图床，并把返回的图片链接粘贴到文章中，快去试试吧。

Gitee 图床

1. 新建仓库

第一步要先在 Gitee 新建一个仓库用于存储图片。

打开自己 Gitee 主页，点击右上角的+号新建仓库。

依次填写仓库名称，路径，仓库介绍，注意要勾选公开和使用Readme文件初始化这个仓库，最后点击创建。

2. 获取私人令牌

同样的，私人令牌和 GitHub 上的 token 一样，主要用于让 PicGo 有权限往我们的仓库 push 代码(图片)。

点击自己的头像，选择设置。

点击私人令牌，选择生成新令牌。

同样的，我们只勾选更新代码的权限。填写私人令牌描述，点击提交。因为是敏感操作，此时需要确认密码。

3. PicGo 配置

PicGo 本体没有支持 Gitee ，所以需要下载一个插件，有人己经写好了。

打开 PicGo ，点击 插件设置，搜索框输入gitee，目前有两个插件应该都能用，任选一个安装，这里我选择的后面那个。

安装好插件后，这时再选择图床设置，选择gitee，填写参数：

repo，填写格式为用户名/仓库名
branch，填写默认分支master
token，填写上一步获取的私人令牌的值
path，选填，可以自定义名称，不填图片会上传在仓库根目录。
customPath，这个会在上一个参数的基础上再创建一层子文件夹用于按年、年月或年季来分类保存。
customUrl，用于修改返回的 url 前缀，不填则返回原始 url。后面解决文件大于1M，登录后可见的问题需要更改此项。

在 PicGo 里，GitHub 的设置都是中文的， Gitee 插件的设置反而都是英文的，有点意思hh。

选择设为默认图床，点击确定保存配置。

4. Typora 配置

此时，使用 Typora 编辑文件，拖入或者粘贴图片时，会自动调用 PicGo 将图片上传到我们的 Gitee 图床，并把返回的图片链接粘贴到文章中，快去试试吧。

5. 解决"文件大于1M，登录后可见"问题

从上一步可以看到 Gitee 存储的图片地址是 https://gitee.com/yushuaigee/myblog/raw 开头的网址，这个域名是国内站点，速度很快，无需配置CDN加速，图床配置好之后，图片上传成功，在浏览器也能打开，看似没毛病，其实暗藏玄机。

如果你上传的图片大于 1M ，不管是在下一步的 Typora 中还是在浏览器网页中，是无法加载出图片的，比如这张图片https://gitee.com/yushuaigee/myblog/raw/master/img/myblog.gif，输入到浏览器会显示文件大于1M，登录后可见。如果能打开是因为你前面已经登录了 Gitee 了，浏览器新建一个无痕窗口就打不开了。

可是别人在浏览我们博客时不可能要先登录个 Gitee 吧，所以要想办法解决一下。前面我们将博客仓库打开 Gitee Pages 功能，其他人可以访问我们博客仓库里的博客了，图床仓库也一样，打开它的 Gitee Pages 功能，无需登陆就可以访问里面的图片了。

进入图床仓库主页，点击服务，Gitee Pages。

点击启动部署。

这样我们就可以通过Gitee Pages 地址来访问图床仓库里的图片了，地址前缀需要改一下。

例如，

原始图片地址的格式为https://gitee.com/用户名/仓库名/raw/分支名/目录/图片名.png，https://gitee.com/yushuaigee/myblog/raw/master/img/myblog.gif，

更改后的图片地址的格式https://用户名.gitee.io/仓库名/目录/图片名.png，

https://yushuaigee.gitee.io/myblog/img/myblog.gif。

对应的，PicGo 中就需要改一下自定义域名，之后上传图片自动生成的链接就是 Gitee Pages 上的地址了。具体就是在customUrl填写https://用户名.gitee.io/仓库名。

这种方法也存在一个问题，就是因为 Gitee Pages 不支持自动更新 (pro版支持，需要收费)，每次上传完图片后，需要打开浏览器手动点一下更新。你可以写完文章，把图片一把上传，再点一次更新，但是终究还是有点麻烦。

为了解决这个问题，我写了一个自动化脚本，双击启动就可以自动完成 Gitee Pages 部署，其实原理就是利用 pyppeteer 模拟用户登录，到部署页面模拟点击更新按钮，虽然还是需要启动一下脚本，但是也稍微省了点事儿，下一篇文章将自动部署 Hexo 和自动部署 Gitee Pages 结合起来。

效果

start.bat 源码

:: start.bat 源码
:: python路径 + 空格 + 脚本路径
C:\Python\Scripts\python.exe D:/scripts/post_my_blog.py
pause

post_my_blog.py 源码

# post_my_blog.py 源码
# 注意: 更改25、36、52行的用户名密码为自己的Gitee的用户名密码，第45行的仓库名为图床仓库的名字
# 每处延时都有用，是我花了好长时间调试过的import asyncio
import osfrom pyppeteer import launchasync def _update_gitee_pages(usr_name, repo_name):browser = await launch(devtools=False, dumpio=True, autoClose=True,args=['--start-maximized',  # 设置浏览器全屏'--no-sandbox',  # 取消沙盒模式，沙盒模式下权限太小'--disable-infobars',  # 关闭受控制提示# 设置ua'--user-agent=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3542.0 Safari/537.36'],userDataDir=os.path.abspath('./cookies'))page = await browser.newPage()# 登录await page.goto('https://gitee.com/login')await page.waitFor(2000)if '登录' in await page.title():await page.type('#user_login', '用户名')await page.type('#user_password', '密码')await page.keyboard.press('Enter')print('使用账号密码登录成功...')await page.waitFor(2000)else:print('使用cookies缓存登录成功...')# 更新await page.goto('https://gitee.com/%s/%s/pages' % (usr_name, repo_name))await page.waitFor(2000)page.on('dialog', lambda dialog: asyncio.ensure_future(_handle_dialog(page, dialog)))await page.click('#pages-branch > div.button.orange.redeploy-button.ui.update_deploy')await page.waitFor(20000)print('更新 Gitee Pages %s 成功...' % repo_name)async def _handle_dialog(page, dialog):await page.waitFor(2000)print('点击确定更新')await dialog.accept()def update_gitee_pages(usr_name, repo_name):asyncio.get_event_loop().run_until_complete(_update_gitee_pages(usr_name, repo_name))if __name__ == '__main__':update_gitee_pages('用户名', '仓库名')

后续

两个图床都不完美，所以究竟选哪个呢？让我这个强迫症很纠结。我尝试了各种组合方案，最终总结了两个方案：

Typora + PicGo + GitHub图床 + jsDelivr CDN加速
Typora + PicGo + Gitee图床 + Gitee Pages + 自动部署脚本

第一种方案似乎比较完美，但是美中不足的是虽然CDN加速解决了查看图片的速度，但是上传还是有点慢的，会出现在 Typora 中粘贴了一张图片后需要5秒以上才能上传成功并加载出来，还有就是本地没有分类备份(其实在C:\Users\用户名\AppData\Roaming\Typora\typora-user-images目录下有缓存)。

第二种方案速度没的说，通过 Gitee Pages 也解决了大图片的问题，通过脚本也解决了自动部署的问题，但是在 Typora 中粘贴了一张图片后，由于没有更新部署，实际上还不能访问，所以不能实时预览，需要用脚本自动部署后重新打开 Typora 才能加载出图片。我想了一种办法，就是在 Typora 设置插入图片时保存在本地，这样就实时加载，还能在本地存一份备份，然后写脚本将文件夹里图片用 PicGo 批量上传然后再调脚本自动部署，然后再自动将 md 文件中的本地链接都改成图床链接。看似麻烦还是可行的，下一篇文章中再实现吧。

我暂时选择了第一种方案。.

本篇文章介绍怎么搭建自己的 GitHub 和 Gitee 免费图床并搭配 Typora 和 PicGo 工具使用，两种图床都有自己的好处和缺点，我也尝试了提供了解决办法。

自己搭建的博客漂亮切方便，但终究不如在 CSDN 等成熟的平台上发布博客曝光量大。所以我们写完博客想在 CSDN 和自己的博客站点同时发布，我们怎么可能一篇一篇地手动复制呢，当然是自动化脚本实现啦。接下来两篇文章介绍一下怎么一键在三个站点发布博客，以及怎么快速把 CSDN 的旧博客迁移到自己的站点。