Hugo + GitHub Pages + CloudFlareにGoogleサイトから移転

雑記帳

今まで独自ドメインでGoogleサイトを利用してきたが、

  • 「新しいGoogleサイト」の機能が全然ダメ(特にガジェットが使えなくなる)で使い物にならない
  • Google自身が推進している常時SSL化も独自ドメインでは機能しない(正確にはMixed Contentsを修正できない)
  • 無駄に色々と読み込むせいで遅い

ということで他のサービスへの移転を決断。

AWSやGCP上に構築することも考えたものの、 大したPVでもないので無料で使える組み合わせとして、以下の構成にした。

  • Hugoを使って静的にサイトを生成
  • GitHub Pagesにアップロード
  • CloudFlareを使って常時HTTPS化に対応

Hugo + GitHub Pagesの部分は Hugo + Github Pagesでブログを公開してみた を参考にした。

Hugo

Ubuntuではapt-getでHugoをインストールできる(最新版とは限らないので注意)。

$ sudo apt-get install hugo

テーマは、少し古いバージョンのHugoでも動作するMainroadに決定。 後は以下の作業を実施。

  • 今までGoogleサイトのガジェットで行っていたGoogle MapsでのKMLファイルの表示を行うShortcodeを作成。
  • CSSファイルをいじって横幅を拡大。
  • コードのシンタックスハイライトを行うため、highlight.jsを読み込むようlayouts/partials/header.htmlを修正。

GitHub

GitHubにGitHub Pages用のリポジトリとHugo自体のリポジトリを作成。

ここでUser Pages(リポジトリ名: (ユーザ名).github.io)で作成し、 CNAMEファイルで独自ドメインを設定すると、 GitHubの他のリポジトリにも独自ドメインの設定が反映される。

そのため、今まで(ユーザ名).github.io/(プロジェクト名)/のURLが (独自ドメイン)/(プロジェクト名)/にリダイレクトされるようになる。

既存のプロジェクトページすべてのURLが変更になってしまうし、 今後ホスティング先をGitHub Pagesから別のサービスに移行するときにまた変更することになる。 そこでUser Pagesは作成せず、Project Pagesとして作成する。

c.f. Custom domain redirects for GitHub Pages sites

ページ移転作業

各ページを手作業でコピペ。 1日5ページ〜10ページくらい移行作業した。

画像については、Chromeの開発者ツールで、

document.querySelectorAll('a[href*=".jpg"]').forEach(function(e){e.download=e.href;e.click()});

とすることで、元のページのリンク先JPEGファイルを一気にダウンロード。

CloudFlare

新サイトの構築が完了したら、CloudFlareのDNSを設定変更。

Googleサイト利用時からCloudFlareをネームサーバとして利用していたので、以下の作業を実施。

  • CloudFlareでwww.330k.infoのCNAMEレコードをghs.google.comから330k.github.ioに変更。
  • SSLの設定をFlexibleに設定。
  • HTTPのアクセスをHTTPSにリダイレクトするAlways use HTTPSをONに設定。
  • HSTSはOFFで様子見。 → HSTS Onに変更(includeSubdomainはOFF)
  • Automatic HTTPS RewritesはOFF(自力ですべての内部リンクをHTTPSに置換)。

CNAMEファイルのアップロード

最後にGitHubリポジトリにwww.330k.infoと記入したCNAMEファイルをコミットして移転作業完了。

その他

  • HugoではURLがすべて小文字になるので、旧URLに大文字を含むページではFront Matterにaliases = [(元のURL)]を追加。
  • User PagesにするかProject Pagesにするかでかなり迷って、少しダウンタイムが発生してしまった。