ということで個人サイトこと anatofuz.net をGitHubPagesベースかつhttpsに変更しました。
以前までの個人サイト
もともとこの個人サイトは、沖縄でGCPUGのイベントがあった際にLT駆動開発としてGoogle Domainでドメインを買って作成したもの。なので当時のLTの資料は静的なHTMLにしてサイトにあげていたりした。
以前のサイトは資料にもある通り、Google Cloud Storageに置いたHTMLにDNSを対応させて表示させていた。Google Cloud Storageはトップドメインの表示に対応していなかったので、www.anatofuz.netのみで配信していた。
このときはhugoを使ってサイトを構築していたのだけれど、このサイトを作成したときのソースコードが消失しており、現状このサイトを更新しようとするとHTMLを生で編集する必要があった。さらにGoogle Cloud StorageのCLIはPythonで書かれており、環境構築や使い勝手の面でよろしくないというとこがあった。
さらにGoogle Cloud Storageの場合httpsに対応していないので、Cloud Flareを中継してhttpsにするというクソ面倒な構成だった。
qiita.com (当時の構築をまとめたQiita)
GCPの無料枠を使い切ってしまったのか、最近毎月30円くらい請求されていて微妙にめんどうだったこともあるので、今回を機にGCPを落とす構成で作り直すことにした。
今回の変更
というわけで前回の反省を踏まえて
という3要素を全て満たすGitHubPagesでエイヤッと作ることにした。
hugoを使った構築
静的html作成ツールは色々あるが、個人的にgolangで書かれたhugoを気に入っているので今回もそれを採用した。 CSSとjavascriptはあまり書きたくないので、雑にテーマをhugo公式から検索し aafuというテーマを選択した。
このテーマをそのまま使うでも良かったのだけれど
- ブログは個人サイトではなくはてなブログへのリンクにする
- リンク集などのアイコンと箇条書きを増やす
- フォントを変更する
- 改行コードを統一する
などの欲求があったので、これをforkしてパッチをあてたものを使った。
リポジトリ構成とデプロイ
hugoを使ったGitHub pagesへのデプロイは、なんやかんや公式のチュートリアルが一番しっかりしているので、それを見ながらやった。
やり方をかいつまんでみると
- github pagesとして使うリポジトリと、hugoプロジェクトのリポジトリをそれぞれ作る
- hugoプロジェクトリポジトリの
publicディレクトリに、 github pagesのリポジトリをsub moduleとして追加する - デプロイスクリプトをコピってあとはそれを実行
みたいな感じだった。極めて楽ですね。
GitHubの2段階認証を有効化している関係で、httpではpushできないという罠があったので、適宜hugoプロジェクトの.git/module以下でsub moduleを指定している箇所をsshに変更するなどもした。
まぁデプロイスクリプトがあるけれど、いちいち手でやるのしんどいのでGitHub Actionに仕込みたいですねという気もする。
Google Cloud Storageの削除
プロジェクごと削除すると、プロジェクトで利用していたSotrageとかが一括で消えて便利。 間違えて消してしまった時様に、リカバリが出来る期間が一応あるらしい。
今回はリカバリする必要がないので、そのメールは無視して潔くプロジェクトごと消した。
ドメイン周り
ドメイン周りの変更はこのサイトがドンピシャだった。
まずDNSのネームサーバーをGoogle Domainのものに変更した。
そのあとトップドメインをgithub pagesにしたいのでカスタムレコードの @に以下のIPを追加した。
- 185.199.111.153
- 185.199.110.153
- 185.199.109.153
- 185.199.108.153
次に以前のwww.anatofuz.netにアクセスにきたものをanatofuz.netにリダイレクトさせたい。
これは合成レコードの設定をよしなにすれば出来るらしいので、設定してみた。
ここまでできたら次はCLoud Flare側のDNS関係の設定を削除し、GitHubのリポジトリ設定から、転送先のURLをanatofuz.netに設定とhttpsへの対応ボタンを押して構築完了となった。
所感
やる気になれば手早く終わりましたね....。
Cloud Storageのものは、CLIで取得するのがめんどうだったので、 wget -rで雑に必要そうなものだけ抜き取るという運用でした。
まぁ個人サイトあるとたまに便利なので、こんな感じでデプロイとか管理がしやすい状況に保ちたいですね。
