一个好的博客必须要图文并茂，但图片是一个大问题，用GitHub pages搭建的博客最为蛋疼的就是图床问题，被图床问题困扰了很久，需要花点时间好好的解决一下子了。

图片始终是痛点

曾经用过七牛，免额满了后就没有再用了。

后来用微博，但后来微博不允许外链了，不但不能再用了，之前存在微博的图片也都无法访问了。

免费的图床也一直都有，但都不长久，这东西很难盈利，运营不过多久就会关了，还要再找新的。一个字就是蛋疼。

厘清需求

要想解决问题，需要先把问题澄清，问题源于图片需求。

• 非原创性图片，用于splash，或者说明和阐述一些细节的
• 原创图片，手动画的一些图片
• 截屏，手机截屏，或者电脑屏幕截图，用于展示过程说明或者运行结果
• 原创图形，如流程图，结构图，架构图，设计图或者UML图

在博客中使用的图形与图像，就是以上四种。

如何解决问题

针对 不同的需求用不同的解法。

非原创性图片用链接

对于非原创性图片，尽可能的在网络上搜索，使用网络图片，这是最为省事的。

搜索的时候要注意：

1. 尽是用Bing来搜索
2. 图片不能被墙，要都能访问的
3. 注意版权，别侵权

原创性图片和截屏找图床

没办法，这个只能找图床来解决了。后面再单独拿出来说。

原创图形用画图库

对于一些原创性的图形，要寻找画图库来解决，就是那种内嵌在网页里面的，用脚本或者源码去画图的图形库。后面单独说。

痛点治疗方案

通过上面来分析，如何找到图床和画图库，就成解决痛点的关键。

图床用postimages

看似绕来绕去，仍还是需要寻找图床。但其实还是不一样，通过上面分析，发现仅有少量的原创图片和截屏需要图床，所以整体量并不大。用GitHub就可以了，空间是够的不是问题，问题就在于稳定性，毕竟访问GitHub经常抽风（不是GitHub server本身抽风，而是网络抽风），另外就是CDN加速。即使GitHub能正常访问，但是还是太慢了，对于常规的push/pull还好，但图片肯定会明显感觉到很慢，必须寻找CDN加速方法。

• 新建一个repo，专门用于博客图床
• 寻找CDN加速方法

网络上还真有大把的人用GitHub用作图床，方法有两种：

1. 直接在GitHub issues中上传图片，这篇文章有详细讨论
2. 创建一个repo，可以看这篇文章，讲的很详细

方法1非常的简单和方便，对于图片需求量不大的话，非常合适，而且它不占用repo的空间配额。目前先用方法1。如果 后面图片量确实大的话，再考虑切到方案2.

注意：GitHub貌似做了屏蔽，不让上传图片，可能是因为上传的图片太多了，hold不住了，所以做了限制。

专用图床

目前发现postimages比较好用，先用这个吧。

• 7 Free Image Hosting Sites to Save Your Blog Storage
• 10 Reliable Websites to Host Your Blog Images for Free

寻找JavaScript图形库

这个现成方案很多，就需要找一个合适的。

我们的需求是：

1. 最好是内嵌在网页中的
2. 免费，毕竟需求量不是很大，偶尔才需要画图，没必要花钱
3. 支持常见的图形和图表，如流程图，结构图，架构图和UML图
4. 使用方式当然越简单越好

可行的的方案：

• 20+ JavaScript libraries to draw your own diagrams
• Chart.js 这个是图表，也就是统计数据的图表（柱图饼图散列图等）。
• My Top 13 JavaScript Diagram Libraries
• Top 5 : Best free diagrams javascript libraries

目前来看mermaid和FlowChart.js比较符合需求，它们都可以内嵌到网页里面，且功能较强大。而mermaid的语法更简洁一些，我们可以先从mermaid开始尝试。目前最重要的事情是，如何把图形内嵌到博客中，把链路先跑通。

mermaid

语法简单，与Markdown类似，同时库比较简单，方便集成。比较符合我们的需求。就先从它开始。

集成方法，非常简单，先引入库，然后定义一个class=“mermaid”的

1
2
3
4
5
6
7
8
9
10

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>

<div class="mermaid">
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
</div>