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

2017-12-16 hugo netlify
Share on:

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

Hugoで新規サイトを作成

使用したHugoは0.31.1

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

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

GitHubでリポジトリ作成

1$ git init
2$ git remote add origin https://github.com/hogehoge/hogehoge.git
3$ git add .
4$ git commit -m 'first commit'
5$ 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・プライベートリポジトリが使えるのが素敵だ。