すっかりご無沙汰になってしまったHugoのサイト作り、テーマを新しいものにして作り直そうと思います。
今回はこちらのテーマにしました。
去年の記事を見ながらhttp://localhost:1313/で表示できるところまで進めました。
前回作ったサイトへのアクセスもhttp://localhost:1313/ですが、サイトディレクトリの中まで移動して hugo server でhugoサーバを起動させることで切り替えています。
前回の反省点
途中で作ることをやめてしまった要因は、完璧を目指してしまったからだと思います。
Hugoを理解してから記事移行しよう、など順番を決めて自らハードルを上げてしまっていました。
今回はできるところからやっていきます！
静的サイトジェネレーターのホスティングサービスを利用する
ブログのカスタマイズも行わずに、ダウンロードしたテーマをそのまま公開します。
HugoのホスティングサービスならNetlifyが良いそうなので使ってみます。
自作のサイトを公開するならサーバーを契約してドメインを作って、とお金がかかると思っていましたが無料で作れてしまうんですね！
ゆくゆくは自分のドメインでサイトを公開したいですが、ひとまず。
参考にしたい記事
いろいろと網羅されていて今後お世話になりそうです。
Hugo で静的なサイト・ブログを構築しよう - Qiita
Netlifyの使い方が書かれています。
Netlifyで静的サイトのホスティングをする - Qiita
こちらに倣ってNetlifyのアカウント登録をしました。
「Deploy site」をクリック！
Netlifyでデプロイできず
それらしきリンクを押したらこう出てきました。
「 "page not found" support guide 」のページを見てみても当然のことながら英語。
さっそく挫けそうですが、同じ境遇の方はきっといると思うので日本語で調べます。
Hugoのテーマ保存方法を振り返る
GitHubのHugoテーマのリポジトリからコピーしてくるところで、
git submodule を使いましょう。
とよく見かけるので、どういうことか調べました。
今回のテーマの「Getting up and running」の方法で“recommended”と書かれていたのがgit submodule だったのでこちらを行っていました。
git clone とどう違うのでしょうか。
こちらは今後の課題として置いておいて...。
どうにもこうにも、Netlifyの英文をいくら（翻訳して）読んでも分からなかったので、サイトを一回削除して作り直しました。
Netlifyの画面
またもや失敗。Deploy logを読んでみる
ダメもとで logを読んでみました。
ERROR 2021/03/25 15:45:25 HUGO-CLARITY theme does not support Hugo version 0.54.0. Minimum version required is 0.63.0
訳すと
ERROR 2021/03/25 15:45:25 HUGO-CLARITYテーマはHugoバージョン0.54.0をサポートしていません。最低限必要なバージョンは0.63.0です
Hugoのバージョンをアップデートしていなかったことが原因かもしれません。
Hugoを初めてインストールしたのは去年で、それきり触っていませんでした。
ローカル環境でHugoのサイトは見れましたが、デプロイ時には問題なのかもしれません。
Hugoをアップグレードする
brew upgrade hugo
でアップデートできました。
すると、
Upgrading hugo 0.65.3 -> 0.82.0
と出てきました。
ローカルのhugoのバージョンはもとから0.63.0以上だったみたいです。
（ローカルでサイトは見れていたので当たり前といえばそうですね）
ということは、NetlifyでのHugoのバージョンを上げる必要がありそうです。
NetlifyのHugoのバージョンを設定する
Hugo 0.20以降はバージョンを設定することになるみたいです。
方法は
- NetlifyのBuild & deploy > Environment で環境変数を設定する
- config.toml ファイルに設定する
2つあります。
今はNetlifyへ設定する方法で進めます。
Environmentへの行き方
Sitesからサイトを選択 > 上のメニューやサイトの概要部分のSite settings > 左のメニューにBuild & deploy があります。
バージョンはローカルと揃えました。
さぁうまくデプロイできるでしょうか！？
cssが読まれていない。
残念でした。
cssなどのパスや記事などへのリンクもhttps://example.com/になっていていました。
リンク先は
と出てきました。
翻訳にかけると
例示ドメイン このドメインは、文書の中で例示的に使用するためのものです。このドメインは、事前の調整や許可を得ることなく、文献に使用することができます。
？？？
「example」の説明な気がします。
もしやと思い、config.toml ファイルの設定を見直しました。
すると
baseurl = "https://example.com/"
とありました。ここを変えれば良さそうです。
こちらもNetlifyから設定してみます。
Environmentで設定してみる
しかし、Environmentにbaseurlを設定しても変わりませんでした。
ビルドコマンドを設定してみる
そこで、ビルドコマンドを hugo -b $DEPLOY_URL にすると良い、という情報を見つけたのでやってみました。
Netlifyのプレビュー用URLに合わせてHugoのbaseURLを変更する · Issue #11 · kai2nenobu/www · GitHub
Hugoは -b, --baseURL オプションで config.toml の baesURL を上書きできる。なのでNetlifyのビルドコマンドにそれを指定してあげればいい。
フォーラムの例では netlify.toml にコマンドを指定しているが、NetlifyのWebでもできる。具体的には Settings > Build & deplooy > Continuous Deployment > Build settings の Build command に hugo -b $DEPLOY_URL を指定すればよい。
$DEPLOY_URLにはプレビュー用のURL？が入っているのでしょうか。
すると、トップページは相変わらず崩れたままで、リンク先の記事のページは、URLの頭に英数字がたくさん並んでいました。これがプレビュー用URLっぽいです！
目指している解決法とは少し違うみたいです。
config.tomlを修正する
はじめからこの方法を取ればよかったのですが、Gitが謎の状態になっていたのであまり触りたくありませんでした。遅かれ早かれ触るのですが。
Gitの謎現象は、きっとsubmoduleを使っている影響だと思います。 （リポジトリ？が2つ並んでいる）
baseurl = "https://example.com/" の部分を修正して、あたり障りなくコミットしてプッシュしました。
ようやく表示できました！
初心者には全然簡単ではありませんでした！
今度はプレビュー画面にcssが効かなくなってしまいました。
submoduleで作られたリポジトリは、今後どういう扱いをしていけばいいのかもわかりません。
ただ更新の仕方は、GitHubにプッシュ→Netlifyでビルド＆デプロイ ということは分かりました。
少しずつ調べながらHugoサイトをカスタマイズしていこうと思います！
おしまい。
