HUGOサイトをCLOUDFLAREでビルドする
ホスト先候補
HUGOで作成した静的ページをどこでホストする候補として下記の方法を考えました。
- 普段使用しているISPのホームページサービス
- お名前.comのレンタルサーバー
- AWSのS3
- GCPのCloud Storage
- GitHub Pages
- Netlify
- CLOUDFLARE
ISPのホームページサービス
HTTPSに対応できていない。独自ドメインを使用するには商用の契約が必要。
すぐに候補から外れました。
お名前.comのレンタルサーバー
既にドメインを取得しているので候補として有力だった。
静的ページをホストするのが希望の私とは合わなかった。（サーバを借りて色々したいわけじゃない）
料金も少し高めだったので候補から外れました。
AWSのS3
AWSを使用してみたかったが、サイト作成時はGoogleでメールを使用していたこともあり候補から外れました。
GCPのCloud Storage
サイト作成時にGoogleでメールを使用していたこともあり、当初はCloud Storageでホストを考えていた。
実際に使用した。ローカルPCにてビルド、Cloud Storageにファイルを配置 を毎回するのは面倒だと思い始めた。
GitHub Pages
GitHubでソース管理して、public配下をGitHub Pagesでホストを考えた。 GitHub Pagesについて調べているときに、Netlify と CLOUDFLARE を知ったため候補から外れた。
Netlify
閾値を超えた時の料金が怖くて候補から外れた。（不要な心配だが）
CLOUDFLARE
GitHubから自動でビルド、HTTPSも無料なので利用を決めました。
CLOUDFLARE
アカウント作成と設定
アカウント作成の流れでPagesの設定が表示されました。
GitHubアカウントの登録とリポジトリとブランチの選択、ビルドの構成と問題なく進んでいきました。
ビルドエラー
CLOUDFLAREでビルドするとエラーになりました。
PostCSSのエラーとテンプレートのエラーが出ていました。
PostCSSのエラー
Building sites … ERROR 2022/05/05 09:23:57 error: failed to transform resource: POSTCSS: failed to transform “scss/main.css” (text/css): PostCSS not found; install with “npm install postcss-cli”. See https://gohugo.io/hugo-pipes/postcss/
PostCSSではStyleからcharsetを削除しています、なくなっても問題はないので一度削除します。
参考
「HUGOで作成したページでスタイルにcharsetが出力され、有効なAMPにならない」
テンプレートのエラー
ERROR 2022/05/05 09:23:58 render of “page” failed: “/opt/buildhome/repo/layouts/_default/single.html:5:44”: execute of template failed: template: _internal/opengraph.html:5:44: executing “_internal/opengraph.html” at <.>: range can’t iterate over /image
ローカルPCではエラーになっていないので、バージョンが違うかなと当たりをつける。
CLOUDFLAREでのHUGOのバージョン変更
環境変数を定義することでバージョンの変更ができます。
HUGOとGOのバージョンをローカルPCと同じにすることでエラーが解消されました。