序言

個人采用hexo搭建了博客，博客也剛上線不久，博客地址：https://www.xiezhrspace.cn 。 歡迎小伙伴訪問，瘋狂暗示來關(guān)注來訪問（‐＾▽＾‐）。

雖然放到了云服務(wù)器上，但是由于博客上傳的圖片等資源越來越多，請求的資源也越來越多，博客訪問速度越來越慢，簡直不忍直視。

愁了好久，一直在想辦法優(yōu)化，自己在網(wǎng)上也找資料，在和博客交流群的小伙伴交流后便有了解決方案，【使用cdn加速】。

但是呢問題又來了，很多云服務(wù)提供商的cdn加速都是要根據(jù)流量花錢的。雖然網(wǎng)站訪問量不多，但是呢能白嫖當(dāng)然是最好的了。

在小伙伴推薦后有了兩種白嫖方案 1、jsDelivr+Github ?2、又拍云（需要申請賬號加入又拍云聯(lián)盟，個人的申請還未下來）。都說又拍云加速會更好一些，但是自己的申請還沒辦好，而博客訪問優(yōu)化又迫在眉睫，固先采用了第一個方案：jsDelivr+Github 的方案。

下面就以jsDelivr+Github 實現(xiàn)免費cdn加速為例，記錄自己優(yōu)化過程。

1 cdn簡介

cdn 全稱Content Delivery Network即內(nèi)容分發(fā)網(wǎng)絡(luò)。

CDN是一組分布在多個不同地方的WEB服務(wù)器，可以更加有效的向用戶提供資源，會根據(jù)距離的遠(yuǎn)近來選擇 。使用戶能就近的獲取請求數(shù)據(jù)，解決網(wǎng)絡(luò)擁堵，提高訪問速度，解決由于網(wǎng)絡(luò)帶寬小，用戶訪問量大，網(wǎng)點分布不均等原因?qū)е碌脑L問速度慢的問題。

2 cdn請求分發(fā)原理

（1）用戶向瀏覽器提供需要訪問的域名；

（2）瀏覽器調(diào)用域名解析庫對域名進行解析，由于CDN對域名解析過程進行了調(diào)整，所以解析函數(shù)庫一般得到的是該域名對應(yīng)的CNAME記錄，為了得到實際的IP地址，瀏覽器需要再次對獲得的CNAME域名進行解析以得到實際的IP地址；在此過程中，使用的全局負(fù)載均衡DNS解析。如根據(jù)地理位置信息解析對應(yīng)的IP地址，使得用戶能就近訪問；

（3）此次解析得到CDN緩存服務(wù)器的IP地址，瀏覽器在得到實際的ip地址之后，向緩存服務(wù)器發(fā)出訪問請求；

（4）緩存服務(wù)器根據(jù)瀏覽器提供的要訪問的域名，通過Cache內(nèi)部專用DNS解析得到此域名的實際IP地址，再由緩存服務(wù)器向此實際IP地址提交訪問請求；

（5）緩存服務(wù)器從實際IP地址得到內(nèi)容以后，一方面在本地進行保存，以備以后使用，二方面把獲取的數(shù)據(jù)放回給客戶端，完成數(shù)據(jù)服務(wù)過程；

（6）客戶端得到由緩存服務(wù)器返回的數(shù)據(jù)以后顯示出來并完成整個瀏覽的數(shù)據(jù)請求過程。

3 jsDelivr簡介

是一個免費、快速和可信賴的CDN加速服務(wù)，聲稱它每個月可以支撐680億次的請求。服務(wù)在Github上是開源的，jsDelivr地址 。目前，它提供了針對npm、Github和WordPress的加速服務(wù)，只需要一行代碼就可以獲得加速效果。只要我們的項目中用到了第三方的靜態(tài)資源，譬如JavaScript腳本，css樣式表，圖片，圖標(biāo)，F(xiàn)lash等靜態(tài)資源文件都應(yīng)該考慮接入到CDN中

4.jsDelivr 的簡單使用

我們以加載jQuery和Bootstrap 為例

//?load?jQuery?v3.2.1
https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js
//?load?bootstrap?v4.4.1
https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.js


jsDelivr + Github便是免費且好用的CDN，非常適合博客網(wǎng)站使用

5 jsDelivr + Github 的具體實現(xiàn)

5.1 新建Github倉庫

5.2 使用git clone 命令將倉庫克隆到本地

在要放倉庫的本地目錄右鍵 Git Bash Here（如果沒有安裝git的需要提前安裝下，都是默認(rèn)安裝即可），并輸入以下命令

git clone https://github.com/xiezhr/mycdn.git$ git clone https://github.com/xiezhr/mycdn.git Cloning into 'mycdn'... remote: Enumerating objects: 3, done. remote: Counting objects: 100% (3/3), done. remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0 Receiving objects: 100% (3/3), done.

5.3 將需要cdn加速的資源上傳到github倉庫

需要用到的命令如下

git?add?.?????????????????????//添加所有文件到暫存區(qū)
git?status????????????????????//查看狀態(tài)
git?commit?-m?'第一次提交'??????//把文件提交到倉庫?-m?后面的是備注信息
git?push??????????????????????//推送至遠(yuǎn)程倉庫


個人采用的是hexo博客框架，該框架的靜態(tài)資源（css、js、圖片等）都是放在source目錄下面，所以呢我是將source目錄真?zhèn)€上傳上去，這樣的好處是路徑跟原來的保持一致，后面在調(diào)用的時候比較方便。

git 窗口輸入如上命令之后，文件都上傳到了github倉庫

5.4 點擊release 發(fā)布版本

自定義發(fā)布版

5.5 通過jsDelivr引用資源

通過如下地址應(yīng)用資源

https://cdn.jsdelivr.net/gh/你的用戶名/你的倉庫名@發(fā)布的版本號/文件路徑

舉個栗子,獲取source/bgimg路徑下的back-rain.png

https://cdn.jsdelivr.net/gh/xiezhr/mycdn/source/bgimg/back-rain.png ? ? ? ## 獲取最新資源 https://cdn.jsdelivr.net/gh/xiezhr/mycdn@1.0/source/bgimg/back-rain.png ? ## 獲取1.0版本的資源

注意： 版本號不是必需的，是為了區(qū)分新舊資源，如果不使用版本號，將會直接引用最新資源，除此之外還可以使用某個范圍內(nèi)的版本，查看所有資源等，具體使用方法如下：

// 加載任何Github發(fā)布、提交或分支 https://cdn.jsdelivr.net/gh/user/repo@version/file // 加載 jQuery v3.2.1 https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js // 使用版本范圍而不是特定版本 https://cdn.jsdelivr.net/gh/jquery/jquery@3.2/dist/jquery.min.js ? https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js // 完全省略該版本以獲取最新版本 https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js // 將“.min”添加到任何JS/CSS文件中以獲取縮小版本，如果不存在，將為會自動生成 https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/src/core.min.js // 在末尾添加 / 以獲取資源目錄列表 https://cdn.jsdelivr.net/gh/jquery/jquery/

6 將hexo中用到靜態(tài)資源的地方換成cdn加速

#?使用到的前端庫，可按需替換成對應(yīng)的CDN地址，如果下面未指定具體的版本號，使用最新的版本即可.
#?注：jsdelivr可以自動幫你生成.min版的js和css，所以你在設(shè)置js及css路徑中可以直接寫.min.xxx
libs:
??css:
????matery:?https://cdn.jsdelivr.net/gh/xiezhr/mycdn/source/css/matery.css
????mycss:?https://cdn.jsdelivr.net/gh/xiezhr/mycdn/source/css/my.css
????fontAwesome:?https://cdn.jsdelivr.net/gh/xiezhr/mycdn/source/libs/awesome/css/all.css?#?V5.11.1
????materialize:?https://cdn.jsdelivr.net/gh/xiezhr/mycdn/source/libs/materialize/materialize.min.css?#?1.0.0
????aos:?https://cdn.jsdelivr.net/gh/xiezhr/mycdn/source/libs/aos/aos.css


都換好之后，執(zhí)行如下命令

hexo?cl?&?hexo?g?&?hexo?s


瀏覽器地址欄輸入 http://localhost:4000 訪問博客，你會發(fā)下博客訪問速度快了很多。到此大功告成?。?！