CDN のフルネームは Content Delivery Network であり、コンテンツ配信ネットワークという意味です。CDN はネットワーク上に構築されたコンテンツ配信ネットワークであり、地域に配置されたエッジサーバーを利用して、中央プラットフォームの負荷分散、コンテンツ配信、スケジューリングなどの機能モジュールにより、ユーザーは近くで必要なコンテンツを取得し、ネットワークの混雑を軽減し、ユーザーアクセスの応答速度とヒット率を向上させることができます。CDN の主要な技術は、コンテンツの保存と配信技術です。
jsDelivr を使用した無料 CDN で静的リソースをホストする#
国内の無料 CDN はたくさんありますが、登録が必要です。
国外の無料 CDN もたくさんありますが、国内では速度が遅いです。
しかし、jsDelivr は特別な存在であり、国外の CDN ですが、国内にノードがあります。
jsDelivr の公式ウェブサイト： https://www.jsdelivr.com
Github に配置されたリソースは国内での読み込み速度が遅いため、ウェブサイトの読み込み速度を最適化するために CDN を使用する必要があります。jsDelivr + Github は無料で使いやすい CDN であり、ブログウェブサイトに非常に適しています。
使用手順#
-
Github リポジトリを作成する
-
Github リポジトリをローカルにクローンする
以下のコマンドを実行します：
git clone コピーしたリポジトリのアドレス
- リソースをアップロードする
必要なリソースをローカルの git リポジトリにコピーします（注：jsDelivr は 20M を超えるリソースの読み込みをサポートしていません）。ローカルの git リポジトリのディレクトリで、以下のコマンドを実行します：
git status #ステータスを確認する
git add . #すべてのファイルをステージに追加する
git commit -m '最初のコミット' #ファイルをリポジトリにコミットする
git push #リモートリポジトリにプッシュする
- リポジトリを公開する
リリースをクリックする
カスタムのリリースバージョンを作成する
5. jsDelivr を使用してリソースを参照する
使用方法：https://cdn.jsdelivr.net/gh/ユーザー名/リポジトリ名@リリースのバージョン/ファイルパス
例：
https://cdn.jsdelivr.net/gh/baicaime/meBlog/index.html
https://cdn.jsdelivr.net/gh/baicaime/meBlog/favicon-16x16.png
https://cdn.jsdelivr.net/gh/clin003/cdn/[email protected]/css.css
注意：バージョン番号は必須ではありませんが、新旧のリソースを区別するために使用されます。バージョン番号を使用しない場合、最新のリソースが直接参照されます。また、特定の範囲のバージョンを使用したり、すべてのリソースを表示したりすることもできます。具体的な使用方法は以下の通りです：
// 任意のGithubリリース、コミット、またはブランチをロードする
https://cdn.jsdelivr.net/gh/ユーザー/リポジトリ@バージョン/ファイル
// jQuery v3.2.1をロードする
https://cdn.jsdelivr.net/gh/jquery/[email protected]/dist/jquery.min.js
// 特定のバージョンではなく、バージョン範囲を使用する
https://cdn.jsdelivr.net/gh/jquery/[email protected]/dist/jquery.min.js
https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js
// バージョンを完全に省略して最新バージョンを取得する
https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js
// JS/CSSファイルに“.min”を追加して、縮小バージョンを取得する。存在しない場合は自動生成されます
https://cdn.jsdelivr.net/gh/jquery/[email protected]/src/core.min.js
// リソースディレクトリのリストを取得するために末尾に/を追加する
https://cdn.jsdelivr.net/gh/jquery/jquery/
// cndリソースをリフレッシュするには、ドメインのcdnをpurgeに変更します
https://purge.jsdelivr.net/gh/baicaime/meBlog/index.html
// 最新バージョンのリソースを使用する
https://purge.jsdelivr.net/gh/baicaime/meBlog@latest/index.html