Skip to Content

Hugo ローカルサーバとNetlifyにホストされたサイトの表示が異なる

概要

hugo serverで確認した結果と、Netlifyにホストした際の結果が異なるので調査した

結論

ローカルのHugoのバージョンと、Netlify側のHugoのバージョンを合わせる

環境

ローカル

  • Hugo v0.62.0

Netlify

  • Hugo v0.55.5

WEBサイトの更新方法

当サイトはGithubにPushすると、Netlifyにデプロイされるようになっている
と言っても、Netlifyの機能だけで実現できるのでお手軽

問題の表示

hugo server -wDhttp://localhost:1313/で表示を確認してから、git pushしている

ローカルサーバの表示

普通に表示されている

実際のWEBサイトの表示

すごく崩れている

対応

先日、パソコンを新調して環境を作り直したので、Hugoのバージョンが最新になった
何も記憶にないがNetlify側のHugoのバージョンってなにか調べた

Netlifyの環境変数

構築時にちゃっかり指定していた
0.55.50.62.0に変更

改めてGit Pushした結果

WEBサイトの表示がローカルサーバと同じ表示されるようになった

感想

すっかり設定していること忘れていた
構築時の手順もブログにあげておけば気づけたかもしれないと思ったので、今回のバージョンアップは書き残した

参考

https://gohugo.io/hosting-and-deployment/hosting-on-netlify/