今日は 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/)。
以下の 2 つの方法はどちらでも構いません。違いはありません。
# 依存関係をインストール
# このプロセスはネットワーク速度の問題で遅くなる可能性があります
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. その他の問題#
- 開発者が画像ホスティングのバージョンを更新した場合は、最初のステップから再操作し、ダウンロード、構築、アップロードを行ってください。
他に問題があれば、コメント欄にメッセージを残してください~~