github pages 如何使用_如何在个人博客中使用github作为图床

在我们写静态博客时，常常会使用图床来存放image文件，比如im.ms，七牛等。本文推荐使用github来做为图床。因为github不限空间，而且其稳定性是众所周知的，你不用担心几年以后，是否要给这些图片搬家。

我们的方案将使用hexo，picgo, github和cloudflare来构成。

1. 构建基于Hexo的博客

这部分没有难度，可以参考Hexo的官方文档。客户端软件建议使用vscode来编辑markdown文件，安装markdown相关扩展，以及hexo-utils扩展。

在Hexo的config文件里_config.yml中，设置好github相关信息。下面的blog.jieyu.ai的示例：

## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: 'git'
  repo: git@github.com:zillionare/blog.jieyu.ai.git
  branch: master

2. 使用gitpages发布博客

登录到github，修改repo的settings，打开github pages设置如上图所示。

注意这里设置了自定义域名，这是我们后面可以通过CDN加速的关键。注意一旦我们使用了自定义域名，github就会在repo的根目录下增加一个名为CNAME的文件，这个文件只有一行内容，就是域名。我们在进行hexo build之前，必须将该文件同步到本地，否则hexo进行部署时，会从repo中删除掉这个文件，最终导致gitpages无法显示。

这样我们就配置好了一个基于github/gitpages的静态博客，引用了本地的图片。它的工作原理是这样的：

1. 在markdown中插入图片时，先将图片copy到指定的folder（可能是全局的，也可能是与博客文件同名的，可配置）。
2. 在markdown文件中插入图片的相对链接，如![测试图](/assets/dfsggdgdsxxdfdgd.png)
3. 在编译时，上述图片文件被copy到public下对应目录；markdown文件被编译成为html，上述链接也被替换成<img src=...>标签。
4. 在部署时，上述图片和引用它的html文件都被上传到github，进而被gitpages抓取生成博客。

如果这篇文章还要导入到其它网站，上述方法则会遇到一个问题：markdown文件里使用的图片链接由于是相对链接，因此都会失效；我们必须将图片一一上传到网站，再一一插入这些图片的链接。

很自然地，我们想到如果使用图床，则markdown文件里直接使用了绝对链接，因此当我们把文章发布到其它网站时，只需要导入markdown文件就可以了。

一个好的图床必须容量大、访问速度快、可管理、永久存放、方便下载迁移、没有所谓的反盗链问题。Github目前的限制每个repo 100G，应该是足够了。在可管理性、可靠性上也比国内的免费服务好太多。唯一的问题，就是国内访问的速度和稳定性不太令人满意，但我们可以使用CDN加速来解决这个问题。

3. 设置图床

如果使用图床服务，我们希望使用过程是这样的：

1. 使用工具将图片自动上传到github，并获取对应的gitpage的链接地址

2. 在markdown文件中插入上述链接地址，并能立即显示出来

但此时我们必须另外创建一个repo，并启用另外一个域名来实现图床服务。这时因为，hexo每次上传时都是将服务器上的文件清空后，再将本地文件全量上传的。所以如果我们仍然将图片上传到博客所在的repo，则这些图片将在hexo deploy之后，被从github repo上清除掉，这样一来，链接也就失效了。如果要保持链接有效，就必须在本地的某个目录下存放这个图片，然后经过编译和hexo上传后，仍然出现在与上传工具上传时一样的位置。这就要求各种工具之间很好地集成。

遗憾地是，最受欢迎的工具集中，似乎只有typora与picgo这一对组合能够实现这一功能；如果我们想使用vscode+picgo，则是不行的。所以我们换一个思路，启动另外一个repo，通过picgo将图处上传到这个repo，由于这个repo没有第二个写者，所以也不会出现文件被替换或者删除的问题。图片一旦上传，它将永远有效。

首先我们在github上创建一个新的repo，这里我们记作images。同样在settings中打开它的github pages选项，设置自定义域名，比如 images.jieyu.ai。

我们还要在repo的根目录下增加一个名为index.html的文件，内容只要是合法的html文件都可以。如果没有这个文件，gitpages是不会为我们生成站点的--也就无法引用图片。

4. 设置picgo

我们使用picgo来上传图片，需要进行以下设置。这里以picgo app为例，我在vscode中使用picgo的插件没能成功。

截图中使用的repo名为blog_raw，是因为我将blog的源文件上传到这个repot里作为一个备份，images也放在这个repo里。实际上它就是我们本节讲的新建的repo -- images。你在进行设置时，应该根据具体情况来更改。

存储路径是指repo里的路径，不存在也没有关系，因为picgo会帮我们创建。自定义域名就是我们在设置images repo时设置的自定义域名。

现在，随便截处屏，通过picgo上传。picgo上传完成后，会自动将链接地址存入剪贴板；所以我们可以通过Ctrl+v将链接插入到markdown文件里。由于gitpages生成会有一定的延时（测试中最长30秒左右），所以有时候可能需要等一会，这张截图才会真正显示在预览中。

5. 设置CDN加速

现在我们来设置CDN加速。我使用的是cloudflare，免费量又足。设置很简单，只要将自定义域名（比如images.jieyu.ai)绑定到github服务器的IP上就好：

延伸阅读