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 アクセラレーション機能を備えた画像ホスティング管理ツール。ダウンロードやインストールは不要で、ウェブブラウザ上でオンラインで使用できます!無料!安定!便利!高速!

ソースコードを見てみましたが、すべて静的でローカルストレージを使用していますので、バックエンドはありません。

つまり、開発者が提供するドメインを使用せずに、自分のドメインにデプロイすることもできます。あまり違いはありませんが、少し試してみましょう。

最後に、パッケージ化されたリンクを提供します(ソースコードをそのままパッケージ化し、変更はありません)。ダウンロードして、ドメインスペースにアップロードして使用してください。

image

ドキュメント:https://picx-docs.xpoet.cn/tutorial/get-start.html

これが公式の説明です。試してみましたが、効果は素晴らしいです。画像ホスティングの使用方法は、ドキュメントに明確に記載されていますので、ここでは繰り返しません。この記事では、コンパイルとパッケージ化の方法について説明します。グループメンバー向けです。


手順は非常に簡単で、事前に Node.js 環境を準備する必要があります。

1. ソースコードのダウンロード#

https://github.com/XPoet/picx にアクセスし、[Download Zip] をクリックします。

image

2. コマンドの実行#

ダウンロードしたファイルを解凍し、このページに移動して、空白の場所で右クリックしてターミナルを開きます。

1666401948613

image

すでに Node.js 環境がある場合は、以下のコマンドを実行します。環境がない場合は、まず Node.js 環境をインストールしてください(https://nodejs.org/zh-cn/)。以下の 2 つの方法のいずれかを使用できます。

# 依存関係のインストール
# ネットワークの問題により、このプロセスは遅くなる場合があります

npm install
#または
yarn

依存関係のインストールが完了したら、ビルドを開始します。

# ビルド

npm run build
#または
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. その他の問題#

  1. 開発者が後で画像ホスティングのバージョンを更新した場合、最初から操作をやり直す必要があります。ダウンロード、ビルド、アップロードの手順を実行してください。

その他の質問がある場合は、コメント欄にメッセージを残してください~~

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。