はてなブログの CSS と JavaScript を GitHub Pages でホスティングするようにした
このブログ「Corredor」で使用している CSS と JavaScript を、GitHub Pages でホスティングしているファイルから読み込むようにしたので、やり方を書いておく。
前提
これまでは、はてなブログで使用する CSS と JavaScript は、全て「デザイン」設定画面から画面内にインラインで埋め込んでいた。
コードは GitHub リポジトリで管理していたのだが、それはあくまでコード修正の履歴を残すためだけに使っていた。
今回はこのリポジトリにあるファイルを、はてなブログから参照するための設定を行う。
GitHub 上のリポジトリを GitHub Pages として公開する
少し前から、GitHub Pages を公開するブランチ名の制約がなくなった (これまでは gh-pages という名前のブランチが自動的に GitHub Pages として公開される仕様だった)。
指定のブランチを GitHub Pages として公開するためには、以下のように設定する。
- リポジトリのページのヘッダ右端にある「Settings」リンクをクリックする。
- 「GitHub Pages」のセクションの「Source」というところのプルダウンから、GitHub Pages として公開したいブランチを選択する。
- 今回の僕のリポジトリ GitHub - Neos21/HatenaBlogs: はてなブログのテーマやカスタム HTML などを保存しておくリポジトリ。 の場合だと、
masterブランチしか作っていないので、これを選択した。
- 今回の僕のリポジトリ GitHub - Neos21/HatenaBlogs: はてなブログのテーマやカスタム HTML などを保存しておくリポジトリ。 の場合だと、
- 「Save」ボタンをクリックし、1・2分待つ。
- 指定のブランチの GitHub Pages にアクセスしてみてファイルが見えるようになっていれば成功。
- 自分の場合だと Hatena Blogs - Neo's GitHub Pages にアクセスできるようになる。
これで GitHub Pages に公開されている CSS ファイルや JavaScript ファイルに直接アクセスできるようになった。
はてなブログで読み込む
予め、「デザイン」設定画面でインラインに埋め込んでいた CSS や JS のコードは除去しておく。
はてなブログから指定の CSS や JS ファイルを読み込むには、以下のように設定する。
- 「設定」画面の「詳細設定」タブを開く。
- 「headに要素を追加」欄に以下のように記載し、「変更する」ボタンで保存する。
<link rel="stylesheet" href="//neos21.github.io/HatenaBlogs/css/Corredor.css">
<script src="//neos21.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 で強制リロードしてみると良い。