[[348909]]

文章

この記事の内容:

• GitHubリポジトリを作成する
• 画像アクセスを高速化するには、jsDelivr の無料 CDN を使用します。
• トークンを作成
• PicGo で GitHub 画像ホスティングを設定する

技術分野の人なら誰でも知っていると思うので、GitHub リポジトリを作成するために GitHub アカウントを登録する手順は省略します。

1. GitHub アカウントにログインし、新しいリポジトリを作成します。

2. 次に、倉庫情報（主に倉庫名）を入力し、残りはデフォルトのままにします。

3. 「リポジトリの作成」をクリックすると、このページにリダイレクトされます。これは、リポジトリが正常に作成されたことを意味します。

その後、画像をアップロードして試すことができます。ただし、GitHub に表示される画像がクラックされているという状況に遭遇する可能性があります。

以下のコードをコンピュータのhostsファイルに追加するだけです。Windowsの場合、hostsファイルはC:\Windows\System32\drivers\etcにあります（注：管理者権限で開いてください）。macOSの場合、hostsファイルは/etc/hostsにあります。

 # GitHub スタート
52.74.223.119 github.com
 192.30.253.119 gist.github.com
 54.169.195.247 api.github.com
 185.199.111.153 アセット-cdn.github.com
 151.101.76.133 raw.githubusercontent.com
 151.101.108.133ユーザー-images.githubusercontent.com
 151.101.76.133 gist.githubusercontent.com
 151.101.76.133 cloud.githubusercontent.com
 151.101.76.133 camo.githubusercontent.com
 151.101.76.133 avatars0.githubusercontent.com
 151.101.76.133 avatars1.githubusercontent.com
 151.101.76.133 avatars2.githubusercontent.com
 151.101.76.133 avatars3.githubusercontent.com
 151.101.76.133 avatars4.githubusercontent.com
 151.101.76.133 avatars5.githubusercontent.com
 151.101.76.133 avatars6.githubusercontent.com
 151.101.76.133 avatars7.githubusercontent.com
 151.101.76.133 avatars8.githubusercontent.com

次に、画像ライブラリに戻り、ページを更新して画像を正しく表示します。

jsDelivr を使って無料で加速する

実際に、リポジトリ内の画像に通常通りアクセスできるようになりました。例として、私が作成したリポジトリ「myImages」を使用します。

リポジトリ内の画像 test.png にアクセスするには、リンクアドレスの「blob」を「raw」に変更する必要があります。つまり、https://github.com/starry-skys/myImages/raw/main/test.png となります。または、アドレスに「?raw=true」を追加して、https://github.com/starry-skys/myImages/blob/main/test.png?raw=true とすることもできます。

しかし、サーバーが海外にあるため、GitHub 経由で直接画像にアクセスするのはそれほど高速ではないことがわかりました。

そのため、CDNアクセラレーションにはjsDelivrを使用できます。これは完全にオープンソースで無料です。

使い方はとても簡単です。画像のURLドメインをCDNのドメインに変更するだけです。フォーマットは以下のとおりです。

https://cdn.jsdelivr.net/gh/<GitHub ユーザー名>/<画像ホスティング リポジトリ名>@<リポジトリのバージョン番号>/画像パス

上記の test.png 画像を例に挙げると、リポジトリのバージョン番号はそのままブランチ名になります。GitHub のメインブランチは現在「main」という名前なので、バージョン番号は「main」と表記されます。画像のパスはリポジトリ内の相対パスです。ここではルートディレクトリにあるため、test.png となります。

最終アドレスは https://cdn.jsdelivr.net/gh/starry-skys/myImages@main/test.png です。

詳細については、jsDelivr 公式サイトを参照してください。

Typora を設定して、画像を GitHub 画像ホスティングに自動的にアップロードします。

次に、Typora で GTiHub 画像ホスティング サービスへの自動アップロードを設定する必要がある場合は、いくつかの設定が必要です。

まず、GitHub でトークンを作成します。

1. アカウントの右上にある設定をクリックします。

2. 次に、左側の開発者設定をクリックし、個人アクセス トークンをクリックして、新しいトークンを生成します。

3. 「メモ」セクションは、トークン作成の目的を説明するために使用され、スコープについては、リポジトリのすべてのオプションを選択するだけです。

4. 最後に、一番下までスクロールして「トークンを生成」をクリックし、プロセスを完了します。

5. このトークンをどこかに書き留めておいてください。後で必要になります。（書き留めておかないと、再度アクセスする際に再生成が必要になります。）

2. PicGo を開き、GitHub 画像ホスティングを設定します。

PicGo で、「画像ホスティング設定」->「GitHub 画像ホスティング」に移動します。

• リポジトリ名は、GitHub アカウント/イメージ リポジトリ名です。
• ブランチ名にはデフォルトの「main」を使用します。
• トークン フィールドに、先ほど生成したトークンを入力します。
• 保存パスにサブディレクトリを指定する必要がある場合は、「img/」のように入力してください。ここでは何も入力していないので、画像リポジトリのルートディレクトリにアップロードされます。
• カスタムドメインには、jsDelivrのドメイン名（画像アクセスアドレス）を入力します。画像パスの最初の部分は除きます。私の場合は https://cdn.jsdelivr.net/gh/starry-skys/myImages@main です。
• 最後に、これをデフォルトの画像ホスティング サービスとして設定すると、次回 Typora に画像をアップロードするときに、GitHub 画像ホスティング サービスに自動的にアップロードされるようになります。

これですべての手順が完了しました。ぜひお試しください。

この記事はWeChat公式アカウント「烟雨星空」（Yan Yu Xing Kong）から転載したものです。以下のQRコードからフォローできます。転載の許可については、「烟雨星空」公式アカウントにお問い合わせください。