cdnとrawgitの仕組みと活用法を詳しく解説！最新事情も紹介

はじめに

この記事は「cdn rawgit」というキーワードに関連する情報を、ブログやWordPressでの利用例を中心にやさしく解説します。

本記事の目的

ブログ記事や技術系メモで、GitHub上のファイルをそのまま配信したいときに役立つ考え方や実例を示します。特にコードのハイライトやスクリプト、CSSなどを外部から読み込む場面を想定しています。

対象読者

・ブログやWordPressでコードやスタイルを簡単に公開したい方
・GitHubに置いたファイルを外部で参照したい方
・CDNの使い方に興味がある方

本記事で学べること

・RawGit CDNを使った配信の基本イメージと具体例（コードつき）
・RawGitの仕組みと特徴を分かりやすく説明
・利用時の注意点と現在の状況についてのポイント
・RawGitが使えない場合に選べる代替CDNの例

章ごとに実例や注意点を丁寧に解説しますので、実際のブログ執筆やサイト運営にすぐ役立ててください。

ブログでの具体的な利用例：コードハイライトに使われる RawGit CDN

Bloggerでの導入例

Bloggerのテンプレートに外部スクリプトを読み込ませるだけで、記事内のコードを見やすくできます。例えばGoogle Code Prettifyを使う場合、テンプレートのや本文下に次のタグを追加します。

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst"></script>

追加後、記事内の

やに適切なクラスを付ければ、自動で色分けされます。プラグイン不要で手軽に使える点が利点です。

WordPressでの導入例
functions.phpにスクリプトを登録して読み込む方法です。テーマのfunctions.phpに次のように書くと、安全に読み込めます。
function my_enqueue_prettify(){
  wp_enqueue_script('prettify', 'https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'my_enqueue_prettify');

この方法ならテーマの更新やプラグインとの競合を避けやすく、ページ読み込みのタイミングも制御できます。
実践のポイント

スキンやオプションはURLのクエリで切り替えます。
ネットワーク依存になるため、読み込み失敗時の代替手段（自前のCSS）を用意すると安心です。

RawGit CDN の仕組みと特徴
仕組み
RawGit は GitHub の「生ファイル（raw）」を受け取り、CDN のエッジにキャッシュして配信する仕組みです。利用者が https://cdn.rawgit.com/ユーザー名/リポジトリ/ブランチ/パス という形の URL を指定すると、内部で対応する https://raw.githubusercontent.com/... のファイルを取得し、高速に配信しました。
URL の例

GitHub の元 URL: https://raw.githubusercontent.com/user/repo/master/style.css
RawGit の URL:   https://cdn.rawgit.com/user/repo/master/style.css

キャッシュと配信の特徴
RawGit は静的ファイル向けに強いキャッシュを付けていました。一般に CSS や JS、画像などは長めの TTL（有効期限）でエッジに残り、複数の訪問者へ高速に配信します。ブランチ名やタグで参照するとその時点のファイルを安定して配信でき、コミットごとに URL を変えればキャッシュを切り替えられます。
利点

GitHub のファイルをそのまま外部サイトで使えるため、手元でホスティングする手間が減ります。
CDN による配信で読み込みが速くなります。
バージョンを URL で明示すれば、意図した状態を確実に配信できます。

RawGit を使う際の注意点と現在の状況
現状とリスク
RawGitは既に非推奨で、将来的に配信が停止する可能性があります。ブログやWordPressで直接参照していると、急にスクリプトやスタイルが読み込まれなくなる危険があります。読み込み失敗は表示崩れや機能停止につながります。
起こり得る影響

ソースコードのハイライトが効かなくなる
ページの一部機能が動かなくなる
ブラウザのコンソールに404やCORSエラーが出る

対策（代替CDNと移行の手順）

jsDelivr: GitHubのファイルをそのまま配信できます（例: https://cdn.jsdelivr.net/gh/ユーザー/リポジトリ@バージョン/パス）。
UNPKG: npmパッケージ向け（例: https://unpkg.com/パッケージ@バージョン/ファイル）。
自前ホスティング: サーバーやWordPressへアップロードして配信します。

移行手順のポイント: 1) 新しいCDNで動作確認する、2) バージョンを固定して指定する、3) ブラウザのキャッシュをクリアして確認する。
移行時の注意点
CORSやContent-Type、HTTPSでの配信が重要です。URLを一括置換する前にステージ環境でテストしてください。
RawGit の代わりに使われているCDNの例
概要
RawGitのサービス終了後、GitHub上のファイルを外部配信するCDNが多く使われています。これらはJavaScriptやCSS、画像などの配信に向いており、ブログやWordPressでも活用しやすいです。
主な代替CDN

jsDelivr：GitHubのリポジトリやnpmから直接配信できます。高速でキャッシュが効きやすいのが特徴です。
UNPKG：npmパッケージをそのまま配信します。パッケージ名＋パスで簡単に利用できます。
cdnjs：人気ライブラリをホストしており、安定して使えます。
GitHub Pages + Cloudflare：自分でホスティングする場合に有効で、独自ドメインやキャッシュ制御が可能です。

ブログやWordPressでの利用例

jsDelivrのURLをscriptやlinkタグに貼るだけで外部読み込みできます。
UNPKGは特定のパッケージやバージョンを指定して読み込めます。

移行時のポイント

パスやバージョンを正しく指定する。
キャッシュやCORS設定を確認する。
長期の運用を考え、安定したCDNを選ぶと安全です。