読者です 読者をやめる 読者になる 読者になる

Corredor

ウェブ、プログラミングの勉強メモ。

はてなブログの CSS と JavaScript を GitHub Pages でホスティングするようにした

このブログ「Corredor」で使用している CSS と JavaScript を、GitHub Pages でホスティングしているファイルから読み込むようにしたので、やり方を書いておく。

前提

これまでは、はてなブログで使用する CSS と JavaScript は、全て「デザイン」設定画面から画面内にインラインで埋め込んでいた。

コードは GitHub リポジトリで管理していたのだが、それはあくまでコード修正の履歴を残すためだけに使っていた。

今回はこのリポジトリにあるファイルを、はてなブログから参照するための設定を行う。

GitHub 上のリポジトリを GitHub Pages として公開する

少し前から、GitHub Pages を公開するブランチ名の制約がなくなった (これまでは gh-pages という名前のブランチが自動的に GitHub Pages として公開される仕様だった)。

指定のブランチを GitHub Pages として公開するためには、以下のように設定する。

これで GitHub Pages に公開されている CSS ファイルや JavaScript ファイルに直接アクセスできるようになった。

はてなブログで読み込む

予め、「デザイン」設定画面でインラインに埋め込んでいた CSS や JS のコードは除去しておく。

はてなブログから指定の CSS や JS ファイルを読み込むには、以下のように設定する。

  • 「設定」画面の「詳細設定」タブを開く。
  • 「headに要素を追加」欄に以下のように記載し、「変更する」ボタンで保存する。
<link rel="stylesheet" href="//neos21github.github.io/HatenaBlogs/css/Corredor.css">
<script src="//neos21github.github.io/HatenaBlogs/js/Corredor.js"></script>

単純な link 要素と script 要素である。一つポイントなのは、プロトコル表記 (スキーム) の「https:」を書かずに、「//」から始めるようにすること。こうすることで、SSL と非 SSL が混在した時にエラーが出ないというメリットがある。はてなブログは非 SSL (http:// でアクセスする) コンテンツだが、GitHub Pages は SSL (https:// でアクセスする) コンテンツなので、余計なエラーを避けるためにスキームを省略して記載しておく。

レスポンシブデザインにしている場合は…

レスポンシブデザインにしていて、CSS コメントに /* Responsive: yes */ を入れている場合は1つ注意。

外部 CSS ファイルにこのコメントを外出ししてしまうと、レスポンシブデザインが有効にならない。このコメントだけは「デザイン」設定画面の「デザイン CSS」欄に入れておく必要がある。

以上で設定完了。

GitHub Pages への反映は、設定変更や git push してから1・2分程度で行われる。初回は10分ぐらいかかるかもしれないので、反映されていないようであれば少し待ってみる。

それでも反映されていないようであれば、ブラウザ側にキャッシュが残っている可能性もあるので、Ctrl + F5 で強制リロードしてみると良い。