今天分享一下如何使用 Github 作為圖床,首先就要推薦這個工具 picx 。
Github 倉庫: https://github.com/XPoet/picx
本文的圖片全部使用該工具上傳,然後通過 Staticaly 進行 cdn 加速(這個在上傳的時候自動生成連結。)
可以設置自動壓縮、轉碼成 webp 格式。
基於 GitHub API 開發的具有 CDN 加速功能的圖床管理工具。無需下載與安裝,網頁端在線使用!免費!穩定!便捷!極速!
看了一下源碼,vue 寫的,全部都是純靜態化加上本地存儲,所以說沒有後端。
也就是說我們也可以部署在自己域名下,不使用開發者提供的域名,雖然這麼做沒什麼區別,但還是折騰一下吧。
我會在最後提供一個打包好的連結(直接打包源碼,不做任何修改),下載後自行上傳到域名空間下即可使用。
說明文件:https://picx-docs.xpoet.cn/tutorial/get-start.html
這是官方說明,試用了一下,效果很棒。圖床如何使用文件中標註的很清晰,我就不贅述了,本文只介紹如何編譯打包,面向群友。
過程很簡單,需要提前準備好 node 環境。
1. 下載源碼#
直接去 https://github.com/XPoet/picx ,然後 Download Zip。
2. 執行命令#
下載後解壓來到這個頁面,然後在空白處滑鼠右鍵,打開終端。
如果你已經有 node 環境了,直接執行下面命令就可以,如果沒有,先去安裝一下 node 環境,這裡就假設環境安裝好了 。(https://nodejs.org/zh-cn/)。
下面這兩種方式都可以,沒有區別。
# 安裝依賴
# 這個過程因為網速問題可能比較慢
npm install
#or
yarn
依賴安裝之後,就開始構建。
# 構建
npm run build
# or
yarn build
構建完成之後就會生成一個 dist
文件夾,這就是打包好後的文件,裡面有一個 index.html
和其他靜態資源。
3. 我應該上傳到哪裡?#
這個時候只需要將他們上傳到你想要訪問的域名目錄下即可。
比如我使用的是 hugo 博客程式,先在 content
下新建一個文件夾,命名為 img
,(你可以起任何名字,注意不要和其他文件名衝突即可。)
然後把 dist
文件夾下的所有文件全部複製到 /content/img/
文件夾下。
這樣在執行 hugo 命令後會打包到 public
文件夾下,然後直接訪問 https://zburu.com/img 就可以打寶圖床。
或者你自己上傳到任何你想放的空間下都可以,沒有限制~~
圖床如何使用對著文件琢磨即可,上面寫的很詳細。
https://picx-docs.xpoet.cn/tutorial/get-start.html
4. 其他問題#
- 如果後面開發者更新圖床版本,可以從第一步重新操作,下載、構建、上傳。
如果有其他問題,請在評論區留言~~