Hugo で作った静的サイトを GitHub Pages から Netlify へ移行する
ポートフォリオを Hugo で作成して、GitHub Pages でホスティングしていましたが、こちらを Netlify へ移行しました
移行した背景
Hugo で作成した静的サイトを GitHub Pages でホスティングすることには、いくつかの問題がありました
解決したい問題点として
- コンテンツを書くリポジトリと、公開するリポジトリ（ブランチ）が別なので、デプロイが面倒
- 公開用のディレクトリをブランチとして管理しているので、管理が大変
- 特殊な名前のリポジトリにする必要がある
- （非公開リポジトリに変更出来ない）
などなどがありました
コンテンツを書くリポジトリと、公開するリポジトリ（ブランチ）が別なので、デプロイが面倒
Hugo ではhugo new site my_siteで作成したディレクトリをおおもとのリポジトリとします
ここでテーマやサイトの設定、コンテンツを書いたりします
このディレクトリでhugoコマンドを実行すると、静的サイトがpublic/配下に生成されます
GitHub Pages で静的サイトをホスティングする時、基本的にはそのリポジトリのプロジェクトルートにindex.htmlを作成します
しかし、 Hugo で生成した静的サイトはプロジェクトルートではなくpublic/配下にいるため、そのままでは使えないです
では、どうやってホスティングするかと言うと、public/配下を別のリポジトリにするか、public/配下を無理やり別のブランチのプロジェクトルートとします
$ # do something
$ git add .; git commit -m 'do something'; git push; # Base Repository に変更をPush
$ hugo # 静的サイトを生成。public/配下に上書きされる
$ cd public/ # 静的サイトが生成されたディレクトリに移動
$ git add .; git commit -m 'do something'; git push; # Public Repository に変更をPush
この２度手間を毎回行うことは面倒です
Netlify であれば、連携したリモートリポジトリに Push すれば自動でビルド＆デプロイされるので、この手間はなくなります
公開用のディレクトリをブランチとして管理しているので、管理が大変
Hugo でサイトを生成して GitHub Pages へのホスティングする方法として、リポジトリを分ける方法と、ブランチを分ける方法がありますが、自分の場合はブランチを分ける方法を採用していました
理由はリポジトリを一つにまとめておきたいためです
これらの方法はリポジトリをまとめるか否かの違いしかなく、お好きな方を選びくださいといった感じです（参考）
ただ、どちらの方法も、おおもとのブランチ（リポジトリ）と公開用のブランチ（リポジトリ）が乖離してしまうデメリットがあります
これによって、ヒューマンエラーなどで変更が公開されていない事態が起こる可能性があります
同上で Netlify であれば自動でビルド＆デプロイされるので、ソースコードを管理するブランチ（リポジトリ）だけで済みます
特殊な名前のリポジトリにする必要がある
GitHub Pages を使ってホスティングをする場合、[username]/[username].github.ioというリポジトリに push することで、https://[username].github.io/にホスティングされます
リポジトリ名を portfolio としたかったのですが、仕方なく[username].github.ioという名前を使っていました
一応、他のリポジトリ名でも、https://[username].github.io/[repository-name]/と設定することが出来ますが、個人的にはサブディレクトリよりルートアクセスでポートフォリオを公開したいので、リポジトリ名による制約がありました
なお、自前のドメインを購入してからは、GitHub Pages のサブディレクトリをドメインと紐付けられるので、この問題は解消しています
非公開リポジトリに変更出来ない
特に非公開にする必要性はなかったのですが、非公開に出来るならありがたいですよね
移行手順
「ホスティングサービスの変更」が一番の目的ですが、サブタスクとして「ブランチの統一」「リポジトリ名の変更」を行います
移行の手順は以下の通りです
- GitHub Pages の停止
- 新規リポジトリの作成・コードの移行
- Netlify でホスティング
「ブランチの統一」「リポジトリ名の変更」は面倒だった事と、この際ブランチをキレイにしたかったので、新しくリポジトリを作成しました
GitHub Pages の停止
リポジトリ（今回は[username].github.io）の Settings の GitHub Pages
から公開設定をしているブランチを None にします
もし、ドメインを設定している場合は Remove もします
新規リポジトリの作成・コードの移行
まず、新しくportfolioというリポジトリを作成して、first commit だけは行います
first commit は、新しいリポジトリに移行するためにビッグバンコミットを行う場合、もし何かあった時に Git のコマンドで簡単に戻せるのでオススメします
次に[username].github.io/のディレクトリのコードを新しく作ったportfolio/に移行します
.git/がバッティングするので、-nコマンドで上書きさせないようにします
$ cp -r -n [username].github.io/ portfolio/
Netlify でホスティング
こちらを参考にしました
ホスティングは GitHub と連携した時点で自動的に実行コマンドが記入されてたので、ボタンポチポチだけで出来ました
サブドメインや SSL の設定はこちらを参考にしました
所感
メリット
- デプロイがとても楽になった
- ビルドが自動！
- リポジトリやブランチが１つになった
- リポジトリの制約がなくなった
- リポジトリ名の制約
- プライベートリポジトリでもホスティング可能
- リモートリポジトリの制約（GitHubである必要がない）
デメリット
- 体感的にちょっと GitHub Pages よりも表示が遅い気がする
以上です
メリデメは、運用の楽さを取るか、表示速度でユーザー体験を高めるか、の選択です
自分の場合は楽に運用したいポートフォリオなので Netfily は良い選択かと思います
参考
Discussion