Hugoで作ったサイトをNetlifyでホスティングするまでの手順

Hugoで作成した、このサイトをNetlifyでホスティングするまでのメモ。

Hugoで新規サイトを作成

使用したHugoは0.31.1

1
2
3
4
5

# 新規サイト作成〜Beautiful Hugoテーマのclone
$ hugo new site devnull 
$ cd themes
$ git clone https://github.com/halogenica/beautifulhugo.git beautifulhugo
$ cp -r beautifulhugo/exampleSite/* ..

その後、config.tomlの編集、コンテンツの作成、テーマの調整などを行う。

GitHubでリポジトリ作成

$ git init
$ git remote add origin https://github.com/hogehoge/hogehoge.git
$ git add .
$ git commit -m 'first commit'
$ git push origin master

Netlifyでホスティング

Netlifyにログインし、以下の設定を行う。

1. [New site from Git]ボタンをクリック
2. [Limit GitHub access to public repositories.]をチェックし[GitHub]ボタンをクリック
3. ブランチにmaster、コマンドにhugo、Publishディレクトリにpublic/を設定
4. [Advanced Setting]をクリックし、キーにHUGO_VERSIONを値に0.31.1を指定
5. [Deploy Site]をクリック

カスタムドメインの設定

1. 画面上部の[Settrings]メニューをクリック
2. 画面左側の[Domain Management]をクリック
3. [Add custom domain]をクリックしてドメイン名を入力後、[Save]ボタンをクリック
4. [Point your domain at the Netlify servers]をクリックし、CNAMEレコードをみてDNSへ追加する。

HTTPS化

1. HTTPSセクションの[Let’s Encrypt certificate]をクリック
2. Force HTTPSセクションの[Force HTTPS]をクリック

ローカルで記事を書きGitHubへpushすれば、自動的にデプロイされるのでお手軽で良い。

Netlifyは無料のPersonalプランでもカスタムドメイン・HTTPS・プライベートリポジトリが使えるのが素敵だ。