netlify
Pocket

Hugoで作った静的サイトをNetlifyでホスティングして、ビルドを自動化するまでをやってみます。Hugoの始め方は飛ばします。hugoコマンドが打てる前提です。

始め方はこちらを

Hugo|Quick Start

もくじ
  1. Hugoをはじめる
  2. テーマをいれる
  3. 記事を作る
  4. 記事を書く
  5. config.tomlの修正
  6. GitHubでリポジトリを作る
  7. Netlifyでホスティングする
  8. サイトURLの変更
  9. 記事の追加など

Hugoをはじめる

まずは以下のコマンドを打ちます。

hugo new site hugo-netlify

移動

cd hugo-netlify/

最初はフォルダの中身は空っぽです。

テーマをいれる

テーマはカンパイ本町でも使っている「Robust」を使います。

ちょっと前まで公式のチュートリアルで使われてたと思うんですが、今は使われてないみたいです。いいテーマなのに。

themeフォルダへ移動

cd theme

git cloneで持ってきます。

git clone https://github.com/dim0627/hugo_theme_robust.git

もしくはGitHubのリポジトリからダウンロードして、themeディレクトリ以下に置くでもいいです。

一つ上の階層に戻っておきます。

cd ../

記事を作る

以下のコマンドで最初の記事を作ります。

hugo new posts/my-first-post.md

次に、以下のコマンドでローカルサーバーを起動します。

hugo server --buildDrafts --theme=hugo_theme_robust

「–theme=」の後ろは、他のテーマを使っていれば、そのテーマのディレクトリ名をいれます。

そして、以下のURLにアクセスすると、テーマと作った記事が一覧に表示されているはずです。

http://localhost:1313/

記事を書く

何か適当に追加してみます。今回は「Hello World!」と書きました。

---
title: "My First Post"
date: 2017-08-05T00:26:32+09:00
draft: false
---

Hello World!

draftは下書きかどうかです。ローカルサーバー起動時は表示されますが、trueのままだと本番環境で表示されないので今回は今のうちにfalseにしておきます。

また、サムネイルを変更してみます。素材サイトや自分の写真などを用意してstaticディレクトリ以下にimagesディレクトリを作りその中に、画像をいれておきます。

先ほどの記事をさらに変更して、thumbnailを追加します。

---
title: "My First Post"
date: 2017-08-05T00:26:32+09:00
draft: false
thumbnail: "/images/sample.jpg"
---

Hello World!

config.tomlの修正

config.tomlを修正してしておきます。

baseURL = "https://mismith-hugo-netlify-sample.netlify.com/"
languageCode = "ja"
title = "Hugo Netlify Sample"

どれもなんのことかだいたいわかると思います。

baseURLは独自ドメインではなく、とりあえずNetlifyにホスティングするなら、xxxxx.netlify.comにしておいてください。また、URL最後の「/」は必ずいれてください。次の記事でタグやカテゴリも使う予定で、それがないと一覧ページへリンクしないです。

GitHubでリポジトリを作る

GitHubのmasterにマージされたら、自動でビルドされて本番に反映という手順を踏んでみます。

まずは、コマンドでGitの準備をします。

git init

.gitignoreを作成

touch .gitignore

.gitignoreには以下を書き加えます。Netlify上でビルドしてpublicディレクトリを作ってくれるので、public以下は外しておきます。そもそもHugoでビルドコマンド打たないので大丈夫だとは思いますが。

/public

テーマディレクトリ以下の.gitを削除しておきます。

rm -rf themes/hugo_theme_robust/.git

そして、GitHubでリポジトリを作ってください。名前は任意で。この辺は省略します。

作成したら、すでにファイルはあるので、以下のようなコマンドを打ちます。

git remote add origin git@github.com:mismith0227/hugo-netlify-sample.git

あとは、gitコマンドなり、SourceTreeを使ってGitHubへプッシュします。

コマンドの場合は以下のように

git add .
git commit -m'first commit'
git push origin master

これでGitHubのリポジトリでファイル一式が公開されました!

Netlifyでホスティングする

このままではGitHubにファイルを置いただけなので、サイトとして公開できていません。

そこでNetlifyを使います。

Netlify

サイトの右上にある「Sign Up」からアカウントを作るか、すでにある場合は「Log in」ボタンでログインします。

管理画面に入ったら右上あたりにある「New Site from Git」ボタンをクリック

netlifyの管理画面

GitHubやBitbucketなどを選べます。今回はGitHubをクリック

netlifycreatesite1

次にGitHubのどのリポジトリと連携するかを選びます。リポジトリ一覧が出てくるので、先ほど作ったリポジトリを選びます。

netlifycreatesite2

最後にデプロイのセッテイングをします。デプロイ先のブランチ、ビルドコマンド、公開ディレクトリを指定します。

今回は以下のように設定

Branch to deploy: master
Build command: hugo --theme=hugo_theme_robust --buildDrafts
Publish directory: public/

そして「Deploy Site」をクリック

しばらく待ちます…

問題なくビルドが終われば、完了です!

うまくいかない場合

うまくいかない場合はローカルで動かしているHugoのバージョンとNetlifyでのHugoのバージョンが違うかもしれません。実際にぼくもビルドに失敗しました。

こちらを参考にすれば大丈夫だと思います。テーマが想定しているHugoのバージョンと、Netlify上のHugoのバージョンが合わずにエラーが出ることがあります。

Netlify 上で使う Hugo のバージョンを指定する

pause

管理画面内の「Build environment variables」の設定で、Keyを「HUGO_VERSION」、Valueをローカルで使ってるHugoのバージョンにすればOK

サイトURLの変更

最後にサイトのURLを変更します。先ほどconfig.tomlのbaseURLで設定したURLをいれます。

changesitename

「Cange Site Name」をクリック。モーダル内に任意のサイト名をいれます。それがNetlifyのサブドメインとして公開されます。誰かと被ってると使えないと思うので、その場合はconfig.tomlも一緒に変更してください。

保存したら、設定したURLにアクセスします。

サンプルで作ったものはこちら

https://mismith-hugo-netlify-sample.netlify.com/

記事の追加など

これで、masterにマージされれば、Netlifyが自動でビルドして、本番に反映してくれるようになりました。

この後の運用方法としては、masterからブランチを切って、記事を追加したり、CSSを修正したりして、問題なければmasterへpush、margeという感じでやればいいかと思います。

Netlifyでホスティングすればサーバーのことを考えなくていいですし、他にも便利な機能があるのでぜひお試しください!

また、こちらの記事で今回作ったものに管理画面やエディタを追加してます。

Netlify CMSでHugoに管理画面やエディタを追加して静的CMSをつくる

Pocket