教你如何使用github+jsDelivr搭建免費圖床

2021-03-02 Java編程精選
作者丨煙雨星空
來源丨煙雨星空
前言

今天,我就教大家用 「全球最大同性交友網站」 github 並搭配 jsDelivr 開源 CDN 來搭建一個免費圖床。全程不需要任何費用哦,白嫖黨歡呼吧~

正文

本文內容包括:

使用 jsDelivr 免費 CDN 加速圖片訪問速度創建 github 倉庫

這裡就跳過怎麼註冊 github 帳號的步驟了,做技術的都曉得。

1、登錄你的 github 帳號,創建一個新的倉庫。

2、然後填寫倉庫的資料,主要是倉庫名,其他一般默認。

3、點擊 create repository 後,跳到這個頁面,就說明創建成功了。

然後可以上傳一張圖片試一下。不過,有可能你會遇到在 github 上看到的圖片是裂開的情況。

只需要在電腦的 hosts 文件中添加以下代碼即可。windows 下的 hosts文件 目錄在 C:\Windows\System32\drivers\etc 。(注意要以管理員權限打開) mac 下為 /etc/hosts。

# GitHub Start
52.74.223.119 github.com
192.30.253.119 gist.github.com
54.169.195.247 api.github.com
185.199.111.153 assets-cdn.github.com
151.101.76.133 raw.githubusercontent.com
151.101.108.133 user-images.githubusercontent.com
151.101.76.133 gist.githubusercontent.com
151.101.76.133 cloud.githubusercontent.com
151.101.76.133 camo.githubusercontent.com
151.101.76.133 avatars0.githubusercontent.com
151.101.76.133 avatars1.githubusercontent.com
151.101.76.133 avatars2.githubusercontent.com
151.101.76.133 avatars3.githubusercontent.com
151.101.76.133 avatars4.githubusercontent.com
151.101.76.133 avatars5.githubusercontent.com
151.101.76.133 avatars6.githubusercontent.com
151.101.76.133 avatars7.githubusercontent.com
151.101.76.133 avatars8.githubusercontent.com

然後回到你的圖片倉庫,刷新一下頁面即可正常顯示圖片。

使用 jsDelivr 免費加速

其實,此時已經可以正常訪問你倉庫中的圖片了。我這裡以我創建好的倉庫 myImages 為例。

要想訪問倉庫中的這個 test.png 圖片,需要把連結地址中的 blob 改為 raw。即 https://github.com/starry-skys/myImages/raw/main/test.png 。或者在地址後拼接一段 ?raw=true,即 https://github.com/starry-skys/myImages/blob/main/test.png?raw=true 。

但是,我們發現,通過 github 直接訪問圖片,速度不是特別理想,畢竟伺服器在國外。

因此,我們可以使用 jsDelivr 進行 CDN 加速。這是完全開源免費的。

使用方法,非常簡單,即把圖片地址連結域名改為 CDN 的域名。格式如下:

https://cdn.jsdelivr.net/gh/<你的github用戶名>/<你的圖床倉庫名>@<倉庫版本號>/圖片的路徑

還是以上邊的 test.png 圖片為例,倉庫版本號直接用分支名,由於現在 github 主分支名字都叫 main 了,因此版本號寫 main 。圖片路徑,是在倉庫中的相對路徑,因為我這裡就在根目錄,因此就是 test.png 。

最終地址為 https://cdn.jsdelivr.net/gh/starry-skys/myImages@main/test.png。

其他說明,可參考 jsDelivr 官網介紹,jsDelivr 官網

配置 typora 自動上傳到 github 圖床

接下來,如果需要在 typora 中設置自動上傳到 gtihub 圖床,還需要做一些配置。

一、首先,在 github 上創建一個 token。

1、點擊右上角帳號上的 settings

2、然後左側點擊 developer settings ,再點擊 personal access tokens ,然後點擊 generate new token。

3、Note 用來說明你創建 token 的用途,然後 scopes 只需要選 repo 的所有選項即可。

4、最後拉到底部,點擊 generate token ,即可成功。

5、找個地方記下這一串 token,等會需要用到。(如果沒有記住,等再查看時就只能重新生成了)

二、打開 PicGo 配置 github 圖床

在 PicGo 中,找到圖床設置 -> GitHub圖床。

存儲路徑如果需要指定子目錄可以填寫例如 img/ 。我這裡沒有填,就會上傳到我圖片倉庫的根目錄。自定義域名就填寫 jsDelivr 的域名,即圖片訪問地址,不包括圖片路徑的前半部分,我這裡就是 https://cdn.jsdelivr.net/gh/starry-skys/myImages@main。最後設為默認圖床,下次在 typora 上傳圖片就會自動上傳到 github 圖床了。

至此,所有步驟就已經完成了,趕緊去嘗試一下吧。

相關焦點

  • 使用Picgo+GitHub+ jsDelivr搭建CDN加速免費圖床
    今天來聊聊怎麼搭建可靠的圖床吧~為什麼會產生這個需求呢?因為小編經常寫博文什麼的,現在的做法是在簡書上上傳圖片,然後把生成的圖片連結放到Markdown文檔上面,寫好文檔以後就可以批量複製到各大博客平臺投稿了。
  • 如何利用 Github 搭建自己的免費圖床?
    上傳圖片通過上面的步驟,我們的圖床時搭建好了,但是通過傳統的方法向 Github 上傳圖片太麻煩了,這裡我們推薦使用一個開源圖床工具 PicGo[2] 來作為我們的圖片上傳工具;PicGo 的安裝就不說了,去他的 官網[3] 下載對應版本進行安裝即可,我們主要講講如何用它來上傳圖片。
  • jsdelivr+github搭建高速圖床,當做一個簡單的雲相冊也不錯
    之前用centos穩是挺穩定的,ubunun20.04也出來了,嘗試了一下,我這裡體驗網站打開速度會快一點,不知道你那裡如何。如果還是很慢也沒有什麼辦法了,伺服器垃圾線路垃圾註定快不到哪裡去。在遷移資料庫過程中如果你進行了籤到,收藏等等操作,可能數據丟失了,表示抱歉。瀏覽網站論壇過程中如果遇到什麼問題,請先清理一下網站緩存或者清理一下瀏覽器緩存。
  • Github+PicGO搭建免費圖床
    最近在轉移markdown文件的時候,被一大堆本地圖片弄昏了頭,索性搭建了一個免費的圖床。
  • jsdriver-github打造永久免費加速的圖床
    GitHub 圖床:免費,但是國內訪問速度慢(利用 jsDelivr 提供的免費的 CDN 加速,雞賊)?搭建教程新建 GitHub 倉庫創建一個倉庫,用來存放圖片。https://cdn.jsdelivr.net/gh/用戶名/倉庫名
  • 微信是禁止了github圖床嗎?
    Date : [[2021-12-20_Mon]]今天遇到一件奇怪的事情,我像往常一樣ob + github(
  • 工具 || PicGo+Github搭建圖床
    工具  PicGo + GitHub 搭建個人圖床說明:最近有幾個朋友詢問我如何搭建的個人圖床,因此在此處記錄分享一下自己搭建圖床的過程。網上搭建圖床的方法有很多,我是用的PicGo+Github,沒什麼特別理由(窮)。
  • 使用 github 快速搭建屬於自己的圖床
    https://juejin.cn/post/6906791889777721352起因說起來,圖床應用這東西,在github上有很多,但是大多都是基於一些雲廠商免費的靜態存儲服務來實現的,比如七牛雲的靜態存儲,考慮到這些雲廠商的賺錢欲望,所以我並不放心將他們作為圖床的服務提供商。
  • 如何使用jsDelivr+Github 實現免費CDN加速?
    便是免費且好用的CDN,非常適合博客網站使用5 jsDelivr + Github 的具體實現5.1 新建Github倉庫gh/你的用戶名/你的倉庫名@發布的版本號/文件路徑舉個慄子,獲取source/bgimg路徑下的back-rain.pnghttps://cdn.jsdelivr.net/gh/xiezhr/mycdn/source/bgimg/back-rain.png
  • Gitee + Typora,搭建自己的免費圖床!
    搭建過程4. 上傳圖片5. 搭配 Typora 使用6. 總結1. 前言對於寫博客的朋友們來講,圖床這個東西一定不會陌生,而且在一定程度上也給大家造成過一定困擾。上一篇文章中我們講了如何 利用 Github 搭建自己的免費圖床,但有人反映 Github 訪問有點慢,而且也不太穩定,所以就推薦用國內的 Gitee 來搭建,於是今天就帶來新鮮熱乎的基於 Gitee 所搭建的免費圖床教程,也水一篇文章,希望對大傢伙有所幫助。2.
  • 30分鐘教你使用nodeJs開發自己的圖床應用
    前言本文主要復盤筆者的nodeJS,通過一個線上的實戰案例來總結node生態常用的技術點和最佳實踐。
  • 手把手教你使用Hexo + Github Pages搭建個人獨立博客
    系統環境配置要使用Hexo,需要在你的系統中支持Nodejs以及Git,如果還沒有,那就開始安裝吧!安裝Node.js下載Node.js(https://nodejs.org/download/)參考地址:安裝Node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)安裝Git下載地址:http://git-scm.com
  • 用(Node+MongoDB)搭建簡單的圖床或者網盤
    該項目比較簡單,所以目錄簡單的一批,各位學到的可以快速搭建一個小網盤圖床啥的。/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net
  • 手把手教你搭建免費圖床,支持外鏈!!!
    "西"望你我,"安"然無恙零.
  • 手把手教你建 GitHub 技術博客
    喜歡寫 Blog 的人有一定的編程基礎愛折騰的人熟練使用版本控制 Git了解使用 GitHub熟悉基本的 MarkDown 語法下載 msysgit 並執行即可完成安裝。在 Windows 環境下安裝 Node.js 非常簡單,僅須下載安裝文件並執行即可完成安裝。
  • 免費圖床系統 | 蘭空圖床Lsky Pro
    推薦一個免費開源的圖床管理系統Lsky Pro由GitHub用戶wisp-x維護圖床支持存儲方式:本地、阿里雲OSS騰訊雲COS、七牛雲、又拍雲、FTPLsky Pro能介紹主頁:https://www.lsky.pro/以下主要轉述自GitHub:https://github.com/wisp-x/lsky-pro