Hugoで作成したウェブサイトをGitLab Pagesで公開する
このブログ自体はGitHub Pagesで公開していますが、別ジャンルの物をGitLab Pagesで公開したかったので別途作成・・・そして色々な場所で躓いて半日くらい潰したのでメモ
GitLab用の設定ファイル作成
リポジトリ直下に.gitlab-ci.ymlを作成して内容は以下の通りにします
image: registry.gitlab.com/pages/hugo/hugo_extended:latest
variables:
GIT_SUBMODULE_STRATEGY: recursive
pages:
stage: deploy
environment: production
script:
- hugo --gc --minify
artifacts:
paths:
- public
検索すると各所で出てくるテンプレートから少し変えています
早速1行目から、通常registry.gitlab.com/pages/hugo:latestとなるところをregistry.gitlab.com/pages/hugo/hugo_extended:latestへ変更しています
Hugoで使用するテーマにSCSSファイルが含まれているとビルドに失敗するケースがあり、その対策として変更しています
またビルド時のコマンドをhugo --gc --minifyとしていますが、-gcはクリーンアップ用、--minifyは容量削減用に使用しています（どれくらい削減できるからは知らないけど・・・）
ファイル名は.gitlab-ci.ymlですのでお間違い無いように・・・筆者は最初のドットを忘れてしまいあれ動かないぞ・・・と悪戦苦闘しました
ファイル名が正しければ、VSCodeやgitlab.com上からファイルを参照したときにアイコンがキツネのマークになるはずなので、デプロイ走らないぞーって時は念の為もう一度確認しましょう
Hugoの設定ファイル調整
TOMLとかいう新参者は知らないのでここではYAML前提で進めます
config.ymlのbaseURLとpublishDirを調整します
baseURL: /
publishDir: public
今回はトップページをhttps://hogehoge.gitlab.io/の直下としたいので直下に指定しています
https://hogehoge.gitlab.io/blog/以下を指定したい場合はbaseURL: /blogのようになります
publishDirはGitLabの設定ファイルのpathsに対応させますのでpublishDir: publicとなります
試してはいませんが独自でpublic以外を指定した場合、デプロイに失敗する可能性が高いのでカスタマイズしないことをオススメします
Pipeline確認
設定ファイルが間違っていなければ、デプロイの処理自体は問題なく動くはずです
GitLab上の各リポジトリのBuild > Pipelines から自動ビルドが動作していることを確認します
失敗していた場合は設定ファイルを弄りましょう・・・
GitLab Pagesがそもそも有効になっているか
その後、他の端末でアクセスしようとしたらページが表示されなかった為リポジトリの設定を確認
GitLabにブラウザからアクセスして、プロジェクトの設定 Settings > General > Visibility, project features, permissionsのExpandボタンを押すとなんか設定が沢山出てくるので、Pagesの項でOnly Project Membersみたいな制限する設定になっていたらEveryoneへ修正します
リポジトリ作成時にプライベートリポジトリとして作成していると、ここが勝手に制限するような項目に設定されてしまっている可能性があるので要確認（というか筆者はそうなっていた）
ちなみに今改めて設定値を確認したら、設定値がEveryone With Accessとなっていました、表記揺れがあるようなので一字一句に拘ると躓きそうですね・・・
Webサイトのドメインがおかしい場合
いざWebサイトにアクセスしてみると勝手にリダイレクトが発動して、ドメインが通常hogehoge.gitlab.ioとなるはずが、hogehoge-gitlab-io-hogehoge-56b349062a348969d0e23582346258e02e36.gitlab.ioのような、謎のハッシュ値つきの長ったらしいものになってしまうことがある
この場合はプロジェクトのページのDeploy > PagesのUse unique domainを確認すると勝手にチェックが入っているので、チェックを外して保存すると直る
ここの設定変更の確認は、少し時間を置いてからプライベートウィンドウ・または別の端末で行うことを推奨します
現状プライベートウィンドウではリダイレクトが無くなったことを確認できていますが、GitLabでログインしたままのウインドウではリダイレクトが発動してしまい、Webサイトが正常に表示されない状態です・・・
ブラウザのキャッシュ消したら表示された！めでたしめでたし
参考
- TOCSS: failed to transform “style.scss” - support - HUGO
- Tutorial: Build, test, and deploy your Hugo site with GitLab | GitLab
- GitLab Pages default domain names and URLs | GitLab
- Unexpected GitLab page URL - Stack Overflow
GitHub Pagesとは色々使い勝手が異なるので疲れました・・・おしまい
