このブログは、Hugoを使ってページを生成し、Netlifyでホスティングしています。
環境構築も難しくないですが、備忘録として残しておこうと思います。
前提条件
- Gitを導入済みで、GitHubアカウントがあること
事前準備として、GitHubにブログ用のリポジトリを作成しておいてください。
Private設定で大丈夫です。
Hugoの導入 🔗
インストールとテーマの設定 🔗
ドキュメントを読みつつ、環境に合わせてインストール。
私はWindowsなので、バイナリをダウンロードしてきてパスの通っている場所に適当に配置しました。
以下のコマンドを実行し、サイトを作成する。
ついでに、gitの設定も。
$ hugo new site new_site && cd new_site
$ git init
公式サイトにテーマ一覧があるので、好みのものを選んでください。
おそらく導入方法が書いてあるので、それに従います。
(参考: 私がこのブログで使っているminiというテーマの導入方法)
config.tomlを適切に設定し(この辺はテーマにもよるので割愛します)、1つ2つ記事を書いてみるとわかりやすいと思います。
ローカル環境で確認する 🔗
hugo server -Dで、ローカルにサーバを作ってくれるので、localhost:1313でアクセスできます。-Dは、下書きの投稿も表示してくれるオプションです。
ファイルを監視しているので、エディタで編集したところが、自動で反映されます。こりゃ便利！
その他オプションは公式サイトを参照してください
リモートリポジトリ用の設定 🔗
publicディレクトリをリモートリポジトリにpushする必要はないので、
.gitignoreに以下を追記したあと、リモートリポジトリにpushしておきます。
/public
Netlifyの設定 🔗
GitHubのアカウントでログインできます。 アカウントを連携して、ホスティングしたいリポジトリを選択しましょう。
netlify.tomlを追加する 🔗
デフォルトで使用されるHugoのバージョンが古いため、netlify.tomlをリポジトリのルートディレクトリに配置しました。
[build]
publish = 'public'
command = 'hugo'
[context.production.environment]
HUGO_VERSION = '0.104.3'
HUGO_ENV = 'production'
HUGO_ENABLEGITINFO = 'true'
これで、リモートリポジトリへのpushをトリガーに、Hugoでページが生成され、/publicがホスティングされるようになります。
独自ドメインを設定する 🔗
Netlifyの管理画面から、Domain managementを開いて、独自ドメインを設定できます。
ドメインのプロバイダ側へ、ネームサーバを忘れずに設定しましょう。
私はムームードメインで取得したので、こんな感じ。
