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发布博客

ebc65b724b30079e950374df9a14fc3c.png

登录到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的插件没能成功。

91e766fe15abdd0a6d81defac8eb60ab.png

截图中使用的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上就好:

8a09f4f94c0205bc5b1a45daac483762.png

延伸阅读

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值