「Hugoでgithub-pages使ってカスタムドメインなブログを構築する」を0から

作業メモ 1人Advent2018

1人AdventのDay-4です。
元々は「PhpStormでGit/GitHubを使うと便利」みたいなの書くつもりだったのですが、別の作業をしていたらちょっとしたメモができたので、代わりにそちらを使います。

adventar.org

以前書いたコレ

daisuki.nichiyoubi.land

ちょっと用事があって、「1つブログ的なのを増やそう」としています。

「メモ程度の雑に書いたのをとっとと放り込みて〜」というニーズでして、そうすると「ターミナルでも何でもいいから書いてpushしたら終わり！」っていう気軽さ。それだったら、重い腰を立ち上げる！までもなく書けるし。

ということで、同じことやるぞ！！
と思ったわけです。

が、↑の記事だと「自動ビルド・デプロイ」のとこしか抑えてないな〜と思ったので、「レポジトリを作るところから」でいうと、前面カバー出てきていない。
ので、やるか！という記事です。

やりたいこと

  1. githubユーザーアカウント hogeyamahogehoge にて
  2. 任意のレポジトリ github.com/hogeyamahogehoge/fuga
  3. github paegsで、カスタムドメイン(サブドメイン) pagepage.hogeyamahogehoge.com に
  4. hugoで作成したページを公開する

ドメインとかGitHub Pagesの設定

1. レポジトリを作る

  1. github.com行って
  2. f:id:o0h:20181204152114p:plain
    new repositoryを押します

2. github-pagesセットアップ

  1. 最初に gh-pages ブランチ作っておくのがいいかも
    1. 何かしら(READMEとか.gitignore)とかがmasterブランチに存在していれば、ブラウザから作れるので
    2. f:id:o0h:20181204152448p:plain
      gh-pagesという名前を入れて Branchesを選択
      *1
    3. すると Create Branch 的なリンクが出てくるので押す
  2. レポジトリのSettingsから「Github Pages」を
    1. Soureに gh-pages Branch を選択、save
    2. Custom Domain にFQDN pagepage.hogeyamahogehoge.com を指定、save

3. カスタムドメインセットアップ

Setting up a custom subdomain - User Documentation

  1. レポジトリ上にCNAMEファイルを設置する
  2. CNAMEというファイル名で、 pagepage.hogeyamahogehoge.com と だけ 書いてコミットする
    1. 参考 GitHub Pagesにカスタムドメインを設定する - Qiita
  3. DNS管理の更新
    • hogeyamahogehoge.com に
    • CNAME pagepage を
    • hogeyamahogehoge.github.io に向ける
  4. 適当なタイミングが来たらdigって確認する `dig pagepage.hogeyamahogehoge.com +noall +answer

Hugoの設定

gohugo.io

ここからは、レポジトリの中身の話。 installは1回やったら済むと思うので省略

Install Hugo | Hugo

1. HugoのPJ作成

このあたりはget startedをなぞるだけだなぁ〜。

  1. さっき作ったレポをcloneして中にcdしておく
  2. hugoコマンドでPJ作成
    1. hugo new site quickstart
    2. カレントディレクトリに作りたいけど「このディレクトリ、もうなんかあるよ〜」で怒られるので、階層を掘っておく
  3. 中身を上の階層に置き直す
    1. mv quickstart/* ./
  4. テーマを設置
    • テーマはギャラリーから選ぶ感じ
      • 例えばblogならココ
      • 各テーマの詳細ページで「Download」からGitHubページに飛べる
    • document通り、submoduleで入れる
    • git submodule add ${git-repo-url}.git themes/${theme-name}
    • config.toml にテーマ指定をおいておく
      • heme = ["${theme-name}"]
  5. 起動確認
    1. hugo server -D でローカルサーバーの起動
    2. デフォだと localhost:1313 なので、開いて表示されればOK
  6. サイト設置
    1. config.toml をいじる
      1. タイトル(サイト名)あたりは最低限入れておいたほうがいいのかな？
      2. baseURLは / とかで大丈夫そう(かな？)
      3. 各種パラメータ等はテーマ依存もあるので、必要に応じて調べていじる

CI設定

CircleCI。こちらも、アカウントの設定等は省略 circleci.com

1. プロジェクト設定

  1. 前に書いた記事の内容で、ルートディレクトリにcircle.yml の設置*2
  2. そのままmasterにpush
  3. CircleCIにわたすように、github tokenを取得しておく
    1. https://github.com/settings/tokens
    2. scopeはrepoでいいかな？もう少し絞っても良いかも。f:id:o0h:20181204162654p:plain
  4. サイドメニューのAdd Projectからレポジトリを選ぶf:id:o0h:20181204161538p:plain
  5. 一旦、そのままstart buildしちゃう
    • 失敗するのでスルー
  6. そのままPJの詳細画面に進むので、そこから設定を開く
    • 右上の⚙アイコン
  7. 環境変数に、先程取得した GITHUB_TOKEN を設定するf:id:o0h:20181204162931p:plain
  8. 合わせて、同じくPJ Settingsのサイドメニューからuser ssh keyを追加しておく
    1. f:id:o0h:20181204165049p:plain
    2. コレをやっておかないと、deployのところ(git push)で The key you are authenticating with has been marked as read only. と怒られる*3
  9. PJ詳細に並んでいるジョブのところから、 rerun workflow を実行

サイト確認

これでサイトがデプロイされるはず・・！なので、実際に pagepage.hogeyamahogehoge.com を開いて動いてるかな〜って見てみましょう。

追記

先のエントリーのcircle.ymlのままだと、「デプロイ時にCNAMEファイルが消されてしまう」という症状があったのに気づいた。
その場合、デプロイ時に「gh-pages用に設定しておいたCustom Domainが消える！」という・・・設定したドメインでのアクセスが不能になります。

  • 必要な要件として「PJ ROOTにCNAMEファイルが設置されている」があり、
    • そうしないと、 hogeyamahogehoge.github.io からのリダイレクトを行えないため
  • ↑のデプロイ前の処理は「一旦、hugoで生成したコンテンツ等をすべて消して、空っぽのファイルに再ビルド」「ビルドされた内容をgh-pagesにpushする」のため。

これを防ぐために、「ビルド後〜デプロイ前にCNAMEファイルを履いてあげれば良い」。

build:stapsの「デプロイ」の直前に、以下のようなコマンドを追加しておく

      - run: echo pagepage.hogeyamahogehoge.com > public/CNAME

これで、ちゃんとCNAMEファイルを生き延びさせてあげることができる。

*1:この画像はブランチ作成後なのでわかりにくいですが・・！

*2:古いかも・・・

*3:http://jackale.hateblo.jp/entry/2018/01/14/000709 の「CircleCIとGithubにSSH用の鍵追加」の記述に助けられました多謝