Hugo + GitHub Pages + カスタムドメイン + SSLでブログを公開するまでのメモ

前提

Gitを操作したことないのにGitHub Pagesでブログを公開したい(めちゃくちゃですね)。

要件

  1. GitHub Pages + Hugo
  2. リポジトリ username.github.io
  3. Hugo Theme
  4. 独自ドメイン
  5. SSL

レシピ

作業

1.GitHub Pages + Hugo

GitHub Pages Basicsを何度も読みました。

  • username.github.io
  • username/repository name

前者と後者、どちらにするか迷いました。

username.github.io

master or gh-pages branchを選択する。どちらかのbranchにHugoが生成した/publicを公開する。masterなら/publicをGitHubで管理。gh-pagesならmasterでソースファイルを管理できる(と解釈しましたが、間違っているかも?!)

username/repository name

/docs folderへ/publicを公開する。その際、Hugoのconfig.tomlに以下を記述すれば、/docsに公開用ファイルを生成する。

publishDir = “docs”

ソースファイルと/docs folderをGitHubで管理できる(と解釈しましたが、間違っているかも?!)

解釈が間違っているかもと思いつつ、username.github.iomaster branchにして、jibutare.orgを運用し、それに慣れてから、username/repository nameでは、thinksell.jpを運用することに決めました。thinksell.jpはほとんど更新しないOne Pageのようなイメージです。

2.リポジトリ username.github.io

Configuring a publishing source for GitHub Pagesの”Enabling GitHub Pages to publish your site from master or gh-pages“の手順どおりに進めました。

3.Hugo Theme

Hugo | Quick Startを読み、 ローカルで動作を確認。

テーマは、Hugo Themes | Minimoを選びました。カバーイメージが使えるので気に入っています。ドキュメントの記載どおりにconfig.tomlを設定、/theme > /minimoの中身を一つ一つ確かめます。ソースコードの跡を追いかけて、構成を理解していきました。

  • イメージの構成にしたいなら何を追加すればよいのか?
  • イメージの構成に必要なメニューの設定は?
  • カスタマイズしたいなら何を変更すればよいのか?

テーマのドキュメントとConfigure Hugoを何度も往来、イメージの構成に近づけました。

4.独自ドメイン

tumblrにCNAMEしていたいたjibutare.orgをGitHub PagesにCNAMEするために下記を参照。

Quick start: Setting up a custom domain

ステップどおりに手続きすればすんなりカスタムドメインでアクセスできました。

5.SSL

GitHub Pages + CloudFlare で独自ドメインをSSL化する

このページのおかけです。簡潔にわかりやすく記載してくださっていて、ほんとに助かりました。感謝です。

SSLに移行後、http → https へのリダイレクトに気を揉みました。IIJmio(iPhone SE と iPad Pro 10.5で使用)からは数時間ほどでhttpsにアクセスできましたが、自宅の回線はほぼ24時間かかりました。


ともあれ、無事、当初の前提をクリアできたので、これからGitを勉強します。


2018/12/04 追記

一年近く放置したままになっていたので、そろそろ再開しようと調べていたら、GitHub Pages がHTTPSをサポートしていました(参照:Custom domains on GitHub Pages gain support for HTTPS)。というわけで、上記の方法を採用していましたが、CloudFlareのCDNとDNSを停止しました。

参照