Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
13
Help us understand the problem. What is going on with this article?
@satzz

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

More than 3 years have passed since last update.

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が適用された。めでたし。

参考

13
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
satzz
Web Engineer 2009-2011 Hatena(part-time) 2011-2015 DeNA

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
13
Help us understand the problem. What is going on with this article?