エンジニア日記

日々の開発あれこれ

Github Pages、Octopressで独自ドメイン設定

GitHub PagesとOctopressを利用し、独自ドメインを設定するときにはまったのでメモ。
独自ドメイン取得の流れと設定方法は下記

  1. お名前.comで独自ドメイン取得
  2. 取得したドメインにAレコードを2つ追加し、それぞれGithubのDNSサーバーのIPアドレス(2016/05/10 時点で 192.30.252.153、192.30.252.154)を設定
  3. source/CNAME ファイルに取得した独自ドメインを記述

と、ここまでは「GitHub Pages 独自ドメイン 設定」等でググれば、結構出てくるので問題はなかった。
だが、いざ取得した独自ドメインでアクセスすると、CSSやJSのパスが上手く独自ドメイン反映後に対応していなく、CSSの読み込みエラーでページが崩れた。

何が起きたのか?

Github PagesのトップページのURLは http://username.github.io/repository-name となる。
(リポジトリごとのWebページとして作成)
そのため、CSSなどの読み込みパスは /repository-name/hoge.css となる。

独自ドメイン設定後は http://original-domain となるためCSSの読み込みパスは /hoge.css としたいのだが、
HTMLの読み込みパスは変わらず (当たり前か笑)、/repository-name/hoge.css のままとなり、読み込みエラーとなった。

解決方法

_config.yml を修正

  • 修正前
1
2
# If publishing to a subdirectory as in http://site.com/project set 'root: /project'  
root: /repository-name
  • 修正後
1
2
# If publishing to a subdirectory as in http://site.com/project set 'root: /project'  
root: /