TL;DR;
- HugoとNetlifyで静的サイトを構築する
- Hugoのthemeにはgit submodule を利用する
焼き回しされているネタですので、自分用メモです。
ポイントは、git submoduleでテーマを追加している場合に、netlify.tomlにビルド時のコマンドを修正するところです。
Hugoの対応
インストールと初期化
brew install hugo
hugo new site hoge
submodule でテーマ適用
まずはhugoで作ったサイトをgithubにプッシュ
git init
git remote add origin https://github.com/user/remote.git
git add .
git commit -m ’init commit’
git push -u origin master
git submodule でテーマを追加します。
今回はDimentionというテーマを採用しました。
GitHub - dspechnikov/dimension-hugo: Dimension template adapted for Hugo static site generator. Mirror of https://gitlab.com/dspechnikov/dimension-hugo
このテーマのリポジトリに推奨されている方法としてsubmoduleでの管理が記載されています。
git submodule add https://gitlab.com/dspechnikov/dimension-hugo themes/dimension
git submodule init
git submodule update
git submodule update —remote themes/dimension
config.tomlの編集とビルド
hugoコマンドでできたconfig.tomlファイルを修正し、テーマを追加します。
baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "dimension"
ビルドしてローカルでの動作確認。
hugo -D
hugo server
以下のようなログが表示されて
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
ブラウザにアクセスして確認します。
適用されていることが確認できました。
静的サイトをカスタマイズする
適用したテーマのサイトに使い方が書いてある。コンテンツを作成します。いったんはサンプルで構築しました。
documentation.md · master · Dmitry Pechnikov / Dimension for Hugo · GitLab
netlify.toml を登録する
Hugoのオフィシャルサイトにnetlify.tomlのことが書かれているのでコピペして、自分のリポジトリに追加しましょう。
Host on Netlify | Hugo
ポイントとしてテーマをgit submoduleで追加している場合、--theme=dimensionが重要です。
これを追加しておきましょう。
[build]
publish = "public"
command = "hugo --theme=dimension --buildDrafts --gc --minify"
Netlifyの管理画面にて、ビルド時のコマンドを指定できるのですが、
netlify.tomlの方が優先されるらしく、管理画面での指定は不要でした。
Netlifyの対応
HugoのサイトにNetlifyでのデプロイの手順が丁寧に書いてあります。
Host on Netlify | Hugo
アカウント作って、Create a new siteを選択して
NetlifyにGithubへのアクセス権を設定して、
リポジトリを選択して、
インストールを押下するとデプロイされます。
カスタムドメインやHTTPSの設定をして完了です。