某次修改 blog 模板的時候,看到了 jsDelivr 下發的一段 CSS ,當時以為是個本地的文件,但遍尋不見。遂請教大佬,得知了 jsDelivr 這個東西。搜索了一波,發現使用 GitHub + jsDelivr 來做個資源分發極好。

理想圖床?

看了一圈,發現這個方案用來做一波圖床也是極穩的,一方面所有圖片都來自自己的 GitHub 庫,一方面引用也不用擔心失效。 其實也為了加快 blog 的訪問速度,避免所有資源都從同一個地方獲取

repo 的建立

考慮到 blog 中使用的文件無非是圖片和 CSS/JS ,於是順手新建了一個項目,三種文件分開。圖片另外分作封面和文章中的圖,而文章中的圖片取其 MD5 作為其名稱。 這樣就避免了名稱重複

1
2
3
4
5
├─css
├─images
│ ├─ArticlePic
│ └─Cover
└─js

文章中的應用

在使用這個方案之前,我在文章中插入圖片的做法是將圖片先轉換成 base64 的編碼,然後在 Markdown 中作為一個註釋插入,然後在文中引用。好處是文章就是完全整體,不管怎麼移動位置,圖片始終完好。缺點就是一長串的編碼擾亂了字數統計系統,給各種維護帶來不便。再者,寫文章的體驗也受到了影響。

jsDelivr 的操作

資源引用

根據 jsDelivr 的規則,對於 repo 的 release ,可以這樣訪問其中資源,但是對資源有大小限制

1
https://cdn.jsdelivr.net/gh/{GitHub用戶名}/{repo名}@{release版本號}/{repo中的文件路徑}/{文件名}

特別地,可以不指定 {release版本號} 來保持最新。官方不建議用於實際上線的項目中。 實測忽略版本號可能會在短期之內引用上一個版本的同名資源(也就是沒有更新的樣子) 不過指定一個版本號的範圍也是沒有問題的,譬如 1.5.x 都可以寫作 1.5 。此外,也可以通過 commit 序號來獲取資源,只需要將 {release版本號} 改成 {commit序號} 即可。

還有一個我挺喜歡的功能,在 CSS/JS 文件拓展名的後面加上 .min 就能自動生成一個該源文件的壓縮版本。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*ORIGINAL*/
/*https://cdn.jsdelivr.net/gh/LemonPrefect/sDelivr@1.5.1/css/layout.page.friends.css*/
.friendLink-Area{
margin-top: 6px;
margin-bottom: 18px;
text-align: center;
}
.friendLink-Area a{
color: #363636;
}
.friendLink-square{
margin-top: 4px !important;
width: 280px;
height: 110px;
display: inline-block;
padding: 0.5em 0.75em;
}
.friendLink-square:hover{
background-color: #f5f5f5;
background: #f5f5f5;

}
1
2
3
4
5
6
7
8
9
10
/*PROCESSED*/
/*https://cdn.jsdelivr.net/gh/LemonPrefect/sDelivr@1.5.1/css/layout.page.friends.min.css*/
/**
* Minified by jsDelivr using clean-css v4.2.1.
* Original file: /gh/LemonPrefect/sDelivr@1.5.1/css/layout.page.friends.css
*
* Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
*/
.friendLink-Area{margin-top:6px;margin-bottom:18px;text-align:center}.friendLink-Area a{color:#363636}.friendLink-square{margin-top:4px!important;width:280px;height:110px;display:inline-block;padding:.5em .75em}.friendLink-square:hover{background-color:#f5f5f5;background:#f5f5f5}
/*# sourceMappingURL=/sm/3fbc473b94f2ce6d04583f788bcf2562f42fb136b727e2ff5354d6a30849cf80.map */
統計信息

jsDelivr 很貼心地給了一個資源引用的統計頁面,具體到了每一個資源的次數。通過以下地址可以具體查看。

1
https://www.jsdelivr.com/package/gh/{GitHub用戶名}/{repo名}

這裡附上我的 repo 資源訪問總數