NetlifyでHugoのビルドを自動化する

  • 7
    いいね
  • 0
    コメント

Hugoなどで静的サイトを作る場合、毎回ビルドする必要があり手間なので、GitHub Pagesの代わりにビルドとホスティングをいっぺんにやってくれるNetlifyを試してみる。Railsアプリに対するHerokuのようなサービスのイメージ。どうでもいいが何度もNetflixと書きそうになった。

こちらをなぞっていく。

ローカルでホスティングする

Hugoでサイトを作る

$ cd
$ hugo new site netlifytest
$ cd netlifytest/
$ hugo new about.md
$ hugo undraft content/about.md

サイトの中身はないが、気にしない。

テーマを入れる

$ git clone https://github.com/pedrodude/martial-paper themes/martial-paper

ローカルで動作確認

$ hugo server -t martial-paper

hugoが出力するURLへアクセス。(デフォルトでhttp://localhost:1313/)

Screen Shot 2016-09-15 at 7.16.31 AM.png

GitHubへpushする

Netlifyでホスティングするために必要なものをGitHubへpushする。
まず小細工する。

$ echo /public >> .gitignore
$ touch static/.gitignore
$ hugo undraft content/about.md
$ rm -rf themes/martial-paper/.git
config.toml
baseurl = "/"
languageCode = "en-us"
title = "My New Hugo Site"

ビルド前のファイルを、カジュアルにGitHubリポジトリ(private可)のmasterへつっこむ。

$ git init
$ git status
$ git add .
$ git commit -m'first commit'
$ git remote add origin git@github.com:satzz/netlifytest.git
$ git push origin master

Netlifyでホスティングする

GitHub側の準備ができたのでいよいよNetlifyにサイトを作る。

Screen Shot 2016-09-15 at 7.36.16 AM.png

リポジトリを選ぶ

Screen Shot 2016-09-17 at 5.01.14 PM.png

ビルドの設定をする

  • Branch: master
  • Dir: public/
  • Build Command: hugo --theme=martial-paper

Screen Shot 2016-09-17 at 7.34.27 PM.png

ビルドする

10秒程度。

Screen Shot 2016-09-17 at 7.35.01 PM.png

ビルド完了したら、ページ上部のタイトルがホスティングしたサイトへのリンクになっているので開いてみる。
Screen Shot 2016-09-17 at 8.43.46 PM.png

CSSへの参照がうまくいっていないようだ。

Screen Shot 2016-09-17 at 8.38.09 PM.png

HTMLを見るとhref="//css/main.css"となってしまっている(テーマ依存?)。
ここではとりあえずbaseurlをホスティング先のNetlifyのURLにしてしまうことにする。

config.toml
-baseurl = "/"
+baseurl = "http://explorer-snake-61260.netlify.com"

変更をGitHubへpushするとNetlifyのビルドが走り、ローカル同様にCSSが適用された。めでたし。

参考