0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Day7:Hugo製のサイトをCloudflare Pagesにデプロイする時の注意点

Posted at

本記事の概要

Hugoのビルドコマンドに-b $CF_PAGES_URLを付けると、本番環境のビルド内容(リンク先の自身のサイトのURL等)にコミットID付きのURLを含んでしまう場合があります。

というお話です。

前提

Hugo+Blowfishテーマ適用済みの環境です。
なお、Windowsでの操作を想定しています。
(本記事が属するアドベントカレンダーについてもご確認ください)
また、リンクになってしまうので、全体的にh抜きでURLを書いています。

-b $CF_PAGES_URLを付けると何が起きたか?

本番環境(ttps://アプリケーション名.pages.dev/)で、Blowfishテーマ付属のSNSシェア機能(XなどのSNSに共有するボタン)を利用してサイトを共有しようとすると、URLがコミットID付きのモノになってしまいました。
つまり、 ttps://アプリケーション名.pages.devではなく、ttps://コミットID.アプリケーション名.pages.devという形になってしまいました。

これでは、ユーザーがシェアされたURLをクリックしたとき、「最新版の(ユーザーがアクセスした時点での)Webサイトの内容」ではなく、「シェアボタンを押した時点でのWebサイトの内容」が表示されてしまうことになります。

どう対処したか?

ビルドコマンドから「-b $CF_PAGES_URL」を削除しました。
※Hugo側のbaseURLコンフィグは、元々、本番環境のURLを指定済みです。

上記のオプションを付けなくても、Cloudflare Pagesのブランチデプロイは、専用の(ttps://ブランチ名.アプリケーション名.pages.devのような形式の)アドレスで表示できるので問題無いです。

経緯

元々、Hugo+Blowfishテーマで作成したWebサイト(個人サイト)をCloudflare Pagesで公開しようとしていた際に、下記のガイドを読みながら対応していました。

ただ、熟読せず、流し読み状態だったので「下記のコマンドがサイトに載っていた」という理由で、機械的に-bのオプションを付けてしまいました。

Hugoビルドコマンド
hugo -b $CF_PAGES_URL

補足:オプションの意味合いについて

-bオプションは、サイトをビルドする際のbaseURL(サイトのトップページのURL)を設定するという意味です。
通常、baseURLはhugo側の設定(.toml)ファイルで設定しますが、ビルド時に-bオプションでbaseURLを指定することで、tomlの設定より優先される形でURLを設定できます。

また、$CF_PAGES_URLという環境変数が出てきますが、これは、Cloudflare Pagesのビルド環境に設定されている環境変数であり、実際のデプロイ先のURLが格納されています。
これを用いることで、ビルドコマンドにURLを引き渡すといったことが可能です。

この時に私が考えたこと

この時、

  • Cloudflare Pagesは、ブランチデプロイ機能を提供していること
  • ブランチデプロイはttps://ブランチ名.アプリケーション名.pages.devのように、本番環境と異なるbaseURLになること

から、私は「このオプションを付けないとブランチプデプロイ機能が正しく機能しないのではないか?」と考えました。

上述の通り、元々、Hugo環境側のtomlで本番環境のURLを指定していたので、例えば「ブランチデプロイのサイトで記事をクリックすると本番環境に飛ばされる」といったことが起きるのではないかと思いました。

そのため、-bオプションを付けてビルドする設定にしました。

本番環境へのデプロイ前に確認したこと

ブランチデプロイで「サイトがなんとなく表示されているな」くらいの確認はしました。

そもそも、「ブランチデプロイのサイトで記事をクリックすると本番環境に飛ばされる」という懸念があった状態ですので、
「ブランチデプロイのサイトでリンクを踏んでも(本番環境に飛ばされることなく)ブランチデプロイ側のURLになっていた」ため、-bオプションを付けるのが正解だと考えていました。

もしかしたら、ブランチデプロイでもう少し細かく検証していたら、気付けたのかもしれませんが、そこまで頭が回っていませんでした。

どうやって気が付いたのか?

GitHubで(自分で)プルリクエストを出して(それを自分で)マージし、本番環境にも無事更新された内容が表示されました。

その後、「折角なので、サイトを更新したことを自身のXでポストしよう」と考え、サイトに付けていたSNSシェア機能のボタンをクリックしました。

Xの投稿画面で添え書きの文章を書いている途中で、URLをよくよく見ると「本番環境のはずなのにコミットIDの付いたURL」になっていることに気付きました。

症状から「-bオプションは不要ではないか?」と考え、ビルドコマンドから-bオプションを急いで外して再デプロイすると、無事に治りました。

所感

個人サイトなので大した問題はありませんでしたが、もしこれが仕事だとしたら「完全にやらかした」ことになってしまいます。

趣味の個人サイトとはいえど、「何かを世の中に公開する以上は、流し読みではなく、精読しながら作業を進める」ことが大切だと再認識しました。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?