namaraii.com

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

目次

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

Hugoで新規サイトを作成

使用したHugoは0.31.1

# 新規サイト作成〜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・プライベートリポジトリが使えるのが素敵だ。