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/)。

以下の 2 つの方法はどちらでも構いません。違いはありません。

# 依存関係をインストール
# このプロセスはネットワーク速度の問題で遅くなる可能性があります

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. 開発者が画像ホスティングのバージョンを更新した場合は、最初のステップから再操作し、ダウンロード、構築、アップロードを行ってください。

他に問題があれば、コメント欄にメッセージを残してください~~

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