如何使用jsDelivr+Github 實現免費CDN加速?

2021-02-20 XiezhrSpace
序言

個人採用hexo搭建了博客,博客也剛上線不久,博客地址:https://www.xiezhrspace.cn 。

歡迎小夥伴來訪問,瘋狂暗示來關注來訪問。

(‐^▽^‐)

雖然放到了雲伺服器上,但是由於博客上傳的圖片等資源越來越多,請求的資源也越來越多,博客訪問速度越來越慢,簡直不忍直視。

愁了好久,一直在想辦法優化,自己在網上也找資料,在和博客交流群的小夥伴交流後便有了解決方案【使用cdn加速】。

但是呢問題又來了,很多雲服務提供商的cdn加速都是要根據流量花錢的。雖然網站訪問量不多,但是呢能白嫖當然是最好的了。

在小夥伴推薦後有了兩種白嫖方案 

1.jsDelivr+Github  

2.又拍雲(需要申請帳號加入又拍雲聯盟,個人的申請還未下來)。

都說又拍雲加速會更好一些,但是自己的申請還沒辦好,而博客訪問優化又迫在眉睫,所以先採用了第一個方案:jsDelivr+Github 的方案。

下面就以jsDelivr+Github 實現免費cdn加速為例,記錄自己優化過程。

1 cdn簡介

cdn 全稱Content Delivery Network即內容分發網絡。

CDN是一組分布在多個不同地方的WEB伺服器,可以更加有效的向用戶提供資源,會根據距離的遠近來選擇 。使用戶能就近的獲取請求數據,解決網絡擁堵,提高訪問速度,解決由於網絡帶寬小,用戶訪問量大,網點分布不均等原因導致的訪問速度慢的問題。

2 cdn請求分發原理cdn分發原理圖

(1)用戶向瀏覽器提供需要訪問的域名;

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

(3)此次解析得到CDN緩存伺服器的IP位址,瀏覽器在得到實際的ip地址之後,向緩存伺服器發出訪問請求;

(4)緩存伺服器根據瀏覽器提供的要訪問的域名,通過Cache內部專用DNS解析得到此域名的實際IP位址,再由緩存伺服器向此實際IP位址提交訪問請求;

(5)緩存伺服器從實際IP位址得到內容以後,一方面在本地進行保存,以備以後使用,二方面把獲取的數據放回給客戶端,完成數據服務過程;

(6)客戶端得到由緩存伺服器返回的數據以後顯示出來並完成整個瀏覽的數據請求過程。

3 jsDelivr簡介

是一個免費、快速和可信賴的CDN加速服務,聲稱它每個月可以支撐680億次的請求。服務在Github上是開源的,jsDelivr地址 。目前,它提供了針對npm、Github和WordPress的加速服務,只需要一行代碼就可以獲得加速效果。只要我們的項目中用到了第三方的靜態資源,譬如JavaScript腳本,css樣式表,圖片,圖標,Flash等靜態資源文件都應該考慮接入到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,非常適合博客網站使用

5 jsDelivr + Github 的具體實現5.1 新建Github倉庫5.2 使用git clone 命令將倉庫克隆到本地

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

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 .                     //添加所有文件到暫存區
git status                    //查看狀態
git commit -m '第一次提交'      //把文件提交到倉庫 -m 後面的是備註信息
git push                      //推送至遠程倉庫

個人採用的是hexo博客框架,該框架的靜態資源(css、js、圖片等)都是放在source目錄下面,所以呢我是將source目錄真箇上傳上去,這樣的好處是路徑跟原來的保持一致,後面在調用的時候比較方便。

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

5.4 點擊release 發布版本

自定義發布版

5.5 通過jsDelivr引用資源

通過如下地址應用資源

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

舉個慄子,獲取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版本的資源

注意: 版本號不是必需的,是為了區分新舊資源,如果不使用版本號,將會直接引用最新資源,除此之外還可以使用某個範圍內的版本,查看所有資源等,具體使用方法如下:

// 加載任何Github發布、提交或分支
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中用到靜態資源的地方換成cdn加速
# 使用到的前端庫,可按需替換成對應的CDN地址,如果下面未指定具體的版本號,使用最新的版本即可.
# 註:jsdelivr可以自動幫你生成.min版的js和css,所以你在設置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

都換好之後,執行如下命令

hexo cl & hexo g & hexo s

瀏覽器地址欄輸入 http://localhost:4000 訪問博客,你會發下博客訪問速度快了很多。到此大功告成!!!

相關焦點

  • 網站已使用jsdelivr加速,應該可以秒開了
    上一期介紹了自己手動修改hosts的方法,提高網站訪問速度,也可以使用上上期介紹的adguard home設置hosts,不僅是姿勢論壇,還有其他使用cloudflare解析的網站都可以加速。不過不經常上論壇的,可能也不太樂意折騰。。。一直想用jsdelivr對網站靜態文件進行加速,提升一下瀏覽體驗。
  • 使用Picgo+GitHub+ jsDelivr搭建CDN加速免費圖床
    那麼,也就剩下GitHub安全、免費又可靠了(微軟爸爸護著呢!)。現在微軟接管了GitHub以後,貌似公有倉庫已經不限個數了,而且單個倉庫容量已經放寬至2GB。這絕對夠用了,不夠就再建一個共有倉唄。最重要的還是免費,配合CDN加速,訪問也不成問題。嗯,就微軟爸爸了!
  • 微信是禁止了github圖床嗎?
    Date : [[2021-12-20_Mon]]今天遇到一件奇怪的事情,我像往常一樣ob + github(
  • 教你如何使用github+jsDelivr搭建免費圖床
    作者丨煙雨星空來源丨煙雨星空前言今天,我就教大家用 「全球最大同性交友網站」 github 並搭配 jsDelivr 開源 CDN 來搭建一個免費圖床。全程不需要任何費用哦,白嫖黨歡呼吧~正文本文內容包括:使用 jsDelivr 免費 CDN 加速圖片訪問速度創建 github 倉庫這裡就跳過怎麼註冊 github 帳號的步驟了,做技術的都曉得。
  • jsdriver-github打造永久免費加速的圖床
    GitHub 圖床:免費,但是國內訪問速度慢(利用 jsDelivr 提供的免費的 CDN 加速,雞賊)?搭建教程新建 GitHub 倉庫創建一個倉庫,用來存放圖片。前往設置https://github.com/settings/tokens作用:授權倉庫的操作權限,通過API實現自動化。
  • FISCO BCOS環境搭建指南:國內鏡像與CDN加速
    為了解決這個問題,提昇平臺使用體驗,針對國內使用環境,FISCO BCOS提供鏡像和CDN加速功能。本文總結歸納了國內鏡像與CDN加速的常見使用場景以及對應操作,方便大家了解運用。build_chain腳本延展閱讀:《FISCO BCOS快速建鏈實現之路》 開發者使用運維部署工具(generator)時,工具默認從GitHub下載所需二進位程序,可以通過--cdn參數指定下載。
  • Github訪問加速
    Github訪問加速由於近些年GitHub分發網絡被dns汙染嚴重,導致國內用戶訪問速度巨慢,解決方法也有不少,詳情參考「參考文獻中的內容」加速方法使用鏡像網站鏡像網站地址:https://github.com.cnpmjs.org/  (常用)https://hub.fastgit.org
  • 如何使用雲伺服器自建免費CDN節點?
    1、https://github.com/helloxz/nginx-cdnLinux一鍵安裝Nginx並開啟CDN(反向代#理),執行下面的命令安裝即可。 自建CDN節點1使用站長工具測試看到wzfou.com不同地方的用戶訪問到了不同的CDN節點就表示我們的CDN加速部署成功了。
  • GitHub 騷操作加速下載
    想要加快 GitHub 下載速度就需要用到 GitHub 國內加速服務,對於有條件的可以使用代理加快訪問速度,而沒有條件的就可以用到網上熱心人士維護的加速服務了。 GitHub 文件加速利用 Cloudflare Workers 對 github release 、archive 以及項目文件進行加速,部署無需伺服器且自帶 cdnhttps://gh.api.99988866.xyzhttps://g.ioiox.com
  • GWA2吉娃兔引入JsDelivr公用CDN的開發與配置
    根據 V2EX上技術高手的介紹,我們在考察了JsDelivr公用CDN之後,發現是一個很好的開源CDN方案,可以實現免費免備案使用的靜態資源分發。 $viewdir;GWA2Java://- +cdn, 12:34 2020-12-04String cdnStaticPrefix = 「//cdn.jsdelivr.net/gh/UserName/ReposName」;viewdir = cdnStaticPrefix + 「/」 + viewdir;3.
  • 外貿網站如何使用免費的CDN加速
    客戶開發視頻網站打開速度對於一個外貿網站來說相當的重要,決定了你網站前期的流量流存,特別是做付費的時候,如果網站打開速度很慢,將會直接造成推廣費用的浪費,以前的文章中講過:外貿網站測試速度的方法,在這些工具的測試結果裡面會詳細的寫出哪些因素沒有優化好導致網站的打開速度比較慢,比如沒有開啟Gzip,瀏覽器緩存,圖片未壓縮,沒有CDN加速等
  • 2020年十大 CDN網頁加速 服務
    我個人的感覺是不盡然,之前Jack老師專門寫過一篇文章,講述了bluehost主機和namesilo域名在使用CF的CDN加速服務的時候,會存在無法正確安裝SSL安全證書的情況,(當然,我用實操教程講述了如何解決該問題,有興趣的同學可以去看這篇文章《如何解決bluehost主機使用cloudflare後的 SSL安全證書 的問題》)。
  • 如何利用 Github 搭建自己的免費圖床?
    一般創建成功之後,會出現如下界面,至此,我們的圖床算是創建好了,接下來就是如何上傳圖片了;上傳圖片通過上面的步驟,我們的圖床時搭建好了,但是通過傳統的方法向 Github 上傳圖片太麻煩了,這裡我們推薦使用一個開源圖床工具 PicGo[2] 來作為我們的圖片上傳工具;PicGo 的安裝就不說了,去他的 官網[3] 下載對應版本進行安裝即可,我們主要講講如何用它來上傳圖片。
  • jsdelivr+github搭建高速圖床,當做一個簡單的雲相冊也不錯
    之前用centos穩是挺穩定的,ubunun20.04也出來了,嘗試了一下,我這裡體驗網站打開速度會快一點,不知道你那裡如何。如果還是很慢也沒有什麼辦法了,伺服器垃圾線路垃圾註定快不到哪裡去。在遷移資料庫過程中如果你進行了籤到,收藏等等操作,可能數據丟失了,表示抱歉。瀏覽網站論壇過程中如果遇到什麼問題,請先清理一下網站緩存或者清理一下瀏覽器緩存。
  • #收集控#前端JS/CSS靜態資源公共庫免費CDN加速匯總
    我們經常會將一些靜態公共庫直接使用第三方CDN加速的。這裡就給大家匯總一下,目前國內外一些比較好使的CDN加速提供商!測試時間:2020年10月18日 – 2020年10月19日以下排名是區分先後的!主要參考:國內訪問情況,提供商背景以及口碑和我自己的使用感受!
  • GitHub:一份玩轉 GitHub 的秘訣,值得收藏!
    如何提高 github 的下載速度?1.加速你的 Githubhttps://github.zhlh6.cn輸入 Github 倉庫地址,使用生成的地址進行 git ssh 等操作5.GitHub raw 加速GitHub raw 域名並非 github.com 而是 raw.githubusercontent.com,上方的 GitHub 加速如果不能加速這個域名,那麼可以使用 Static CDN 提供的反代服務。
  • 一杯茶、一包煙、一個GitHub項目下一天?加速神器推薦
    GitHub 在中國大陸訪問速度慢的問題原因有很多,但最直接和最主要的原因是 GitHub 的分發加速網絡的域名遭到 DNS 汙染。由於 GitHub 的加速分發 CDN 域名 assets-cdn.github.com 遭到 DNS 汙染,導致無法連接使用 GitHub 的加速分發伺服器,才使得中國大陸訪問速度很慢。如何解決這個問題呢?是時候讓利器油猴登場了,它會幫我們找到不被汙染的git地址。
  • 網站CDN流量加速原理和簡單構建
    你可以將自己的靜態文件(圖片和html靜態頁面,js,css),分發到世界各地的cdn伺服器。比如,你們的機房在北京,全國各地的用戶都要訪問北京伺服器,如果你們在深圳部署看CDN伺服器, 那麼,北京的伺服器就可以將內容分發到深圳伺服器, 深圳及其周圍的用戶, 就可以就近訪問深圳伺服器。因為距離更近, 所以加速了整個訪問過程。
  • SEO建站:wordpress網站免費CDN加速服務CloudFlare
    市面上有大量的CDN加速服務供大家選擇。可用於未註冊域名的免費cdn較少。推薦免備案域名免費CND服務的關鍵是免費且高度安全。網站開通速度是影響網站關鍵詞排名的重要因素之一。網站打開得越快,網站體驗就會越好。CND加速服務可以提高網站開通速度。如果你的網站沒有備案,可用的CND加速服務會更少。給你一個無記錄的CND加速服務,不僅免費,還安全。