GitHub + jsDelivr + PicGo + Imagine 打造穩定快速、高效免費圖牀

GitHub + jsDelivr + PicGo + Imagine 打造穩定快速、高效免費圖牀

前言

爲何要使用圖牀呢？

由於在不一樣平臺發佈同一篇文章的時候，最一個痛苦的點就是，圖片存儲問題，各個平臺的文件存儲方式各不相同，沒法直接 Ctrl + C 的方式一鍵搞定，爲了解決這個問題，使用 MarkDown + 圖牀 的方式進行文章的寫做，將圖片放到一個統一的地方，在文章中引入圖片外鏈。
所謂圖牀，就是將圖片儲存到第三方靜態資源庫中，其返回給你一個 URL 進行獲取圖片。MarkDown 支持使用 URL 的方式顯示圖片，我想這也是程序員爲何對其偏心的緣由之一。
做爲程序員，你會發現，如今不少論壇和社區都開始支持使用 MarkDown，若是你沒使用圖牀的狀況下，你分享同一篇文章，你要在不一樣的平臺，各自從新編輯排版一遍和上傳圖片一次。
有了圖牀，狀況就不同了，Ctrl+C 的方式就搞定了，根本不用再 Check 文章內容一遍。

圖牀的選擇？

1. 微博圖牀：之前用的人比較多，從 2019 年 4 月開始開啓了防盜鏈，涼涼
2. SM.MS：運營四年多了，也變得愈來愈慢了，到了晚上直接打不開圖片，速度堪憂
3. 其餘小衆圖牀：隨時有掛掉的風險
4. Imgur 等國外圖牀：國內訪問速度太慢，隨時有被牆的風險
5. 大廠儲存服務：例如七牛雲、又拍雲、騰訊雲COS、阿里雲OSS等，操做繁瑣，又是實名認證又是域名備案的，麻煩，並且還要花錢（有錢又不怕麻煩的當我沒說）
6. GitHub 圖牀：免費，可是國內訪問速度慢（不過不要緊，利用 jsDelivr 提供的免費的 CDN 加速 速度足夠了）

使用流程

1. 新建 GitHub 倉庫
2. 生成一個 Token
3. 配置 PicGo 並使用 jsdelivr 做爲 CDN 加速
4. 使用 Imagine 進行圖片壓縮
5. 上傳圖片到 PicGo 並使用圖牀

新建 GitHub 倉庫

• 登陸/註冊 GitHub
• 新建一個倉庫，填寫好倉庫名
• 倉庫描述
• 將權限設置成 public
• 根據需求選擇是否爲倉庫初始化一個 README.md 描述文件

生成一個 Token

1. 點擊用戶頭像 -> 選擇 Settings

1. 點擊 Developer settings

1. 點擊 Personal access tokens

1. 點擊 Generate new token

1. 填寫 Token 描述，勾選 repo，而後點擊 Generate token 生成一個 Token

1. 獲取 Token 密鑰

注意這個 Token 只會顯示一次，本身先保存下來，或者等後面配置好 PicGo 後再關閉此網頁

配置 PicGo 並使用 jsdelivr 做爲 CDN 加速

前往下載 PicGo（點擊下載），安裝好後開始配置圖牀

• 設定倉庫名：按照 用戶名/圖牀倉庫名 的格式填寫

• 設定分支名：master

• 設定 Token：粘貼以前生成的 Token

• 指定存儲路徑：填寫想要儲存的路徑，如 img/，這樣就會在倉庫下建立一個名爲 img 的文件夾，圖片將會儲存在此文件夾中

• 設定自定義域名：它的的做用是，在圖片上傳後，PicGo 會按照自定義域名+上傳的圖片名的方式生成訪問連接，放到粘貼板上，由於咱們要使用 jsDelivr 加速訪問，因此能夠設置爲https://cdn.jsdelivr.net/gh/用戶名/圖牀倉庫名

Q：什麼是 jsdelivr ?

A：jsDelivr 爲開發者提供免費公共 CDN 加速服務

使用 Imagine 進行圖片壓縮

一般狀況下，圖片大小都是超過 200KB 的，因此網頁加載的時候會特別慢，通常咱們會對圖片進行壓縮，這裏我推薦 Imagine（點擊下載） 支持全平臺。

Imagine 採用的是有損壓縮，介意的能夠忽略這一步

順便推薦一個無損壓縮的網站：https://tinypng.com/

上傳圖片到 PicGo 並使用圖牀

配置好 PicGo 後，咱們就能夠進行高效創做了，將壓縮後的圖片拖拽到上傳區，將會自動上傳並複製訪問連接，將連接粘貼到博文中就好了，訪問速度槓槓的

此外 PicGo 還有相冊功能，能夠對已上傳的圖片進行刪除，修改連接等快捷操做，PicGo 還能夠生成不一樣格式的連接、支持批量上傳、快捷鍵上傳、自定義連接格式、上傳前重命名等，更多功能本身去探索吧！

歡迎訪問個人我的博客：https://sitoi.cn