Hugo を Netlify で動かすよ。

地球とネットワークのイメージ画像

追記 2024-02-07

もう5年も前の記事なんですね。時が経つのは早いです。

Hugoのバージョンを上げたので、Netlifyで指定しているHugoのバージョンも変えとかなきゃと設定を見たんですが、項目が無くなっていました。
今ではバージョン指定しなくて良いのかもしれません。(試さず書いちゃうけど)

今は設定のBuild & deployにあるBuild Settingsが該当項目みたいですが、Build commandを「hugo」、Publish directoryを「public」にすれば良いみたい。
一応、ドキュメントがありましたので置いておきます。

Framework integrations | Netlify Docs

ということで、以下の記事は古いですよということを言いたかった。

Hugo を Netlify で動かす

ネットでは簡単に出来ると書いてありましたけど、けっこうハマったので、そのあたりも書こうと思います。

結論としては、動きました。
k-kaz が好きなことをするサイト

まずは Hugo をゲットする

ダウンロード

公式サイトから、OSにあった最新版を落としてきてください。
Sass を使いたい場合は extended版 が必要になりますが、ここでは普通のタイプで良いです。
※理由は後ほど・・・

Releases gohugoio/hugo

パスを通す

解凍したら、どこに居ても、Hugo を実行できるようにするため、パスを通します。
やり方は・・・簡単なのでネットでご覧ください。
Windows の場合は、環境変数のところを弄ります。

ローカルサイトを用意する

サイトの雛形を展開する

今後、作業をする場所に移動して、下記コマンドを実行します。

hugo new site hoge-site

hoge-site というディレクトリができて、その中に必要なファイルが展開されます。

テーマの準備

テーマサイトから好きなテーマを選択します。
Hugo Themes

テーマを選ぶと、その中にインストール(ダウンロード)の仕方が書かれていますので、それに従います。

ちなみに私の選んだ aether で説明しますと、

git clone https://github.com/josephhutch/aether.git themes/aether

これを実行することでダウンロードしてくれます。

テーマのダウンロードは、テーマフォルダに移動してからコマンドを実行するパターンが多いです。
ただ、このテーマはルートで実行するようにコマンド指定されていますのでご注意ください。
themes/aether とダウンロード先を指定しているので、テーマ内で実行すると themes/themes/aether となり、重複してハマります。そして気付きにくい。

テーマ内の .git を削除

テーマの中に .git というフォルダがあります。
あとで面倒なので、削除します。

補足[2019-03-10]

他のテーマを使ったときに気付いたんですが、サブモジュール化すれば削除しなくて良いみたいです。
というか、そのほうが良いみたいですね。テーマのアップデートできるし。

別テーマですけど、こんな感じです。

git submodule add https://github.com/zwbetz-gh/cupper-hugo-theme.git themes/cupper-hugo-theme
git submodule update --remote --merge

設定ファイルの修正

ルートにある config.toml が設定ファイルです。
エディタで開いて、最低限これらを書いてください。
baseURL はあとで、実際の公開アドレスに直せばよいです。

baseURL = "https://hoge/"
languageCode = "ja"
title = "k-kaz"
theme = "aether"

サイトを確認する

まずはローカルで確認する

ローカルサイトのルートで下記を実行します。

hugo server -D

ブラウザで localhost:1313 にアクセスすると、テーマと同じ画面(記事無し)が出てきます。
実行時にエラーになったり、ブラウザで表示しないときは何かが間違っています。

GitHub の準備

GitHub でリポジトリを作る

GitHub にログインして、右上にある “+” をクリックし、「New repository」を選びます。

GitHub Pages は、Public しか選べませんが、Netlify は Private も選べます。
私はせっかくなので、Private としました。

リモートリポジトリとローカルリポジトリを繋げる

リポジトリ作成後に出てくる画面で、2番目にあるものを実行しますが、ちょっと注意。
いきなり実行すると、リポジトリが無いですよと怒られます。
最初にこちらを実行してください。

git init

イニシャライズをします。
これをすると、.git というフォルダが作成されます。
※さっき、テーマで消したアレだ!

その後、画面に出ていたコマンド+アルファを実行します。

git remote add origin https://github.com/hoge.git
git add .
git commit -m "First Commit"
git push -u origin master

尚、ssh接続が可能になっている場合は、

git remote add origin git@github.com:hoge.git

となります。

これでリポジトリが繋がり、ローカルにあったファイルがすべて GitHub に反映されたと思います。(空フォルダは反映しないっぽい)

Netlify

いよいよきました。

Netlify にログインする

新しくアカウントを作ってもよし、GitHub やその他のサービス経由にしてもよし。

設定をするんですが・・・

GitHub と連携し、どのリポジトリを使うか設定します。
先程用意したリポジトリを選択しましょう。

あとは自動的にビルドして公開できます・・・のはずが、ここから苦難の道のり(笑)

あまりに苦戦したため、細かい手順は忘れました・・・。
でも、ローカルサーバーで動いていて、下記のハマりどころだけ注意すれば、大丈夫だと思います。

私はそのハマりどころに、長い時間を盗まれました。

ハマりどころ

いくつかの問題が絡んでいたので、解決するのに苦労しました。
分かっちゃえばどうってことないんでしょうけどね。

Deploy できないよー

GitHub にアップしたのはソースの状態ですので、Netlify の中でビルドをして、ブラウザが認識できる形式にします。
でも、ここでエラーが何度も出ました。

バージョン指定

Hugo のどのバージョンでビルドするのか指定します。
流れの中でこの設定画面が出なかったので、未指定のままビルドをして、ずっとハマっていました。

設定箇所は、上部メニューの「Settings」 → 左メニューの「Build & deploy」 → 「Build environment variables」です。

Key HUGO_VERSION
Value 0.54.0

と入れます。

尚、普段は extended版 を使っているので、0.54.0/extended と指定しましたが、フリーズしました(笑)

Hugo の extended版 には暫定対応

ということです。
もしも、extended版 を使いたい場合は、回避方法が用意されているので、ネットで検索してみてください。
私は、そこまでして Sass に拘る必要がないので、素直に css でいくことにしました。

テーマの問題

テーマが Sass を使っているケースがあります。
気分を変えようと思って選択したテーマがそうでした・・・。
エラーログのところにやたらとテーマの名前が出るので確認したらビンゴ。

尚、aether は css なので大丈夫です。

ダウンロード前に分かれば良いんですけど、詳細ページに書かれていなければ落として確認するしかないのかな。
テーマ内に assets というフォルダがあると、その中に Sass の .sass.scss があるかと思います。

その他

記事が表示されない

ローカルでは表示されているのにアップしたら記事だけ表示されないとアタフタ。
なんと下書きモードのままアップしていたのでした。
※ローカルでは、下書きも表示するよう hugo server-D のオプションを付けていた。

記事の上部にある draft: truedraft: false にして、もう一度アップしましょう。

こんな基本的なミスをするなんて。
そして、基本的過ぎると、そこに気付くのが遅れますね(苦笑)


Posted / Update 2024-02-07

homepage #hugo #netlify