zishu's blog

zishu's blog

一个热爱生活的博主。https://zishu.me

安裝一個基於 Github 的靜態圖床程式

範例: https://img.zburu.com/

今天分享一下如何使用 Github 作為圖床,首先就要推薦這個工具 picx 。

Github 倉庫: https://github.com/XPoet/picx

本文的圖片全部使用該工具上傳,然後通過 Staticaly 進行 cdn 加速(這個在上傳的時候自動生成連結。)

可以設置自動壓縮、轉碼成 webp 格式。

基於 GitHub API 開發的具有 CDN 加速功能的圖床管理工具。無需下載與安裝,網頁端在線使用!免費!穩定!便捷!極速!

看了一下源碼,vue 寫的,全部都是純靜態化加上本地存儲,所以說沒有後端。

也就是說我們也可以部署在自己域名下,不使用開發者提供的域名,雖然這麼做沒什麼區別,但還是折騰一下吧。

我會在最後提供一個打包好的連結(直接打包源碼,不做任何修改),下載後自行上傳到域名空間下即可使用。

image

說明文件:https://picx-docs.xpoet.cn/tutorial/get-start.html

這是官方說明,試用了一下,效果很棒。圖床如何使用文件中標註的很清晰,我就不贅述了,本文只介紹如何編譯打包,面向群友。


過程很簡單,需要提前準備好 node 環境。

1. 下載源碼#

直接去 https://github.com/XPoet/picx ,然後 Download Zip。

image

2. 執行命令#

下載後解壓來到這個頁面,然後在空白處滑鼠右鍵,打開終端。

1666401948613

image

如果你已經有 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/ 文件夾下。

1666402810476

這樣在執行 hugo 命令後會打包到 public 文件夾下,然後直接訪問 https://zburu.com/img 就可以打寶圖床。

或者你自己上傳到任何你想放的空間下都可以,沒有限制~~

圖床如何使用對著文件琢磨即可,上面寫的很詳細。

https://picx-docs.xpoet.cn/tutorial/get-start.html

4. 其他問題#

  1. 如果後面開發者更新圖床版本,可以從第一步重新操作,下載、構建、上傳。

如果有其他問題,請在評論區留言~~

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。