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

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

1. 从零开始免费搭建自己的博客(一)——本地搭建 Hexo 框架
2. 从零开始免费搭建自己的博客(二)——基于 GitHub pages 建站
3. 从零开始免费搭建自己的博客(三)——基于 Gitee pages 建站
4. 从零开始免费搭建自己的博客(四)——编写Markdown文章利器 Typora
5. 从零开始免费搭建自己的博客(五)——Typora + PicGo + GitHub/Gitee图床
6. 从零开始免费搭建自己的博客(六)——三个站点一键发布博客
7. 从零开始免费搭建自己的博客(七)——迁移 CSDN 博客到个人博客站点
8. 从零开始免费搭建自己的博客(八)——博客网站个性化设置及优化

前言

前面我们搭建好了博客，选择了 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。

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

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

4. Typora 配置

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

此时，使用 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 源码

1
2
3
4

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

post_my_blog.py 源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

# post_my_blog.py 源码
# 注意: 更改25、36、52行的用户名密码为自己的Gitee的用户名密码，第45行的仓库名为图床仓库的名字
# 每处延时都有用，是我花了好长时间调试过的

import asyncio
import os

from pyppeteer import launch


async 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('用户名', '仓库名')

后续

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

1. Typora + PicGo + GitHub图床 + jsDelivr CDN加速
2. 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 的旧博客迁移到自己的站点。