本文介紹怎么使用CDN加載博客的靜態(tài)圖片
前言
當(dāng)我們將博客部署到GitHub上時(shí)，由于國(guó)內(nèi)原因，打開(kāi)的時(shí)候經(jīng)常會(huì)非常慢客情，尤其是圖片禽作，如果是一些比較大的圖片加載的時(shí)間就比較長(zhǎng)了，瀏覽體驗(yàn)上會(huì)差一點(diǎn)幸缕，下面介紹使用 jsdelivr 加載圖片。
介紹
jsdelivr 是一個(gè)免費(fèi)的開(kāi)源CDN，包含 JavaScript 庫(kù)鸦列、jQuery 插件、CSS 框架鹏倘、字體等等 Web 上常用的靜態(tài)資源薯嗤。官網(wǎng)給出了幾種使用場(chǎng)景，分別是npm纤泵，GitHub和WordPress骆姐。
從圖片上可以看出，它的使用格式如下：
https://cdn.jsdelivr.net/gh/GitHub用戶名/倉(cāng)庫(kù)名@分支名/文件路徑
按照上面的格式就可以得到一個(gè)鏈接捏题，這個(gè)鏈接就能訪問(wèn)到你的靜態(tài)資源玻褪。
使用
下面介紹下我是如何使用的，比如我的GitHub用戶名是haveyuan公荧，默認(rèn)分支是master带射，那么我要訪問(wèn)其中一張圖片的路徑就是 https://cdn.jsdelivr.net/gh/haveyuan/haveyuan.github.io/index_bg.webp ，因?yàn)檫@張圖片我是放在根目錄的循狰，所以不用再加文件夾路徑窟社，這個(gè)根據(jù)你項(xiàng)目的路徑來(lái)，這個(gè)鏈接就可以直接在博客中使用了绪钥，如果分支名是master的話就不用加 @分支名灿里，如果你要訪問(wèn)另一個(gè)分支的資源，比如 develop 分支的話程腹，你的鏈接就是 https://cdn.jsdelivr.net/gh/haveyuan/haveyuan.github.io@develop/index_bg.webp
我的博客會(huì)使用到很多靜態(tài)圖片钠四，如果都放在這個(gè)項(xiàng)目里那么打包的時(shí)候會(huì)變得很慢，所以我新建了一個(gè)倉(cāng)庫(kù)專(zhuān)門(mén)用于放博客所用的圖片，倉(cāng)庫(kù)命名為 blog_img 缀去，這樣我的博客項(xiàng)目就不會(huì)那么大了侣灶，可以點(diǎn)擊這里的圖片查看效果。
