HugoをNetlify + GitHubで動かす

1. まるさんかくしかく　Tech学習と入門ログ
2. Hugo
3. HugoをNetlify + GitHubで動かす

• Twitter
• Facebook
• B! Bookmark
• LINE
• Pocket
• Feedly

Hugoでサイトを作ってGitHub + Netlifyでホスティングする手順の説明です。

Hugoでコンテンツを作成

hugo new site samplesite
cd .\samplesite\
git init
git submodule add https://github.com/alex-shpak/hugo-book ./themes/hugo-book

\themes\hugo-book\exampleSiteの中身をサイト直下にコピーし、config.yamlは削除する。
以下でローカルのサーバーを起動し、サイトを確認する。 (-p 1314はポートを指定するため。ぶつからなければ指定不要。
何もしなくても自動でもやってくれるみたい。)

hugo server -p 1314

動作確認後、修正などを行い問題がなければgitでコミット。
準備ができたらGitHubにプッシュする。

git remote add origin https://github.com/someuser/somerepo.git
git push -u origin master

Netlify側の設定

手順は公式のHost on Netlify | Hugo を参考にする。

1. New site from Gitをクリックする。
2. GitHubと連携し、使いたいリポジトリを選択する。
3. サイトの設定を以下で入力する。
   1. Owner => そのまま
   2. Branch to deploy　=> master
   3. Build command => hugo
   4. Publish directory -=> public
4. 追加の設定をShow advancedで行う。
5. New variableで以下を追加する。（細かい設定をしたい場合はnetlify.tomlを使うようにすすめられる。）
   1. Key = HUGO_VERSION , Value = 0.57.2
6. Deployする。

ドメインの設定

1. OverviewのDomain settingをクリック
2. Add custom domainをクリック
3. ドメインを入力しVerifyをクリック
4. Domain managementのCustom domainの登録したドメインに表示されているCheck DNS configurationをクリック
5. ANAMEかALIAS、Aレコードを設定するように言われるのでDNS側で設定を行う
6. SSL/TLS certificateのVerify DNS configurationをクリック

ドメインのリダイレクト設定

自動で作成されるhttp://********.netlify.com/から自ドメインへのリダイレクトは、 サイト直下に「_redirects」の名前でファイルを作成し、以下記述すると行ってくれる。

http://*********.netlify.com/ http://mydomain.example.jp/:splat 301!

• Twitter
• Facebook
• B! Bookmark
• LINE
• Pocket
• Feedly