Netlify で gulp のビルドを自動化して、静的サイトを公開するまで

ツール

巷で噂の Netlify を使って、静的サイトを公開する手順を紹介します。

Netlify とは

https://www.netlify.com/

簡単にいうと、GitHub や Bitbucket に git push するだけで、静的サイトを自動公開してくれるサービスです。

特徴的なのは、フロントエンドのビルド作業も Netlify側でやってくれるところ。ローカル上で行っていた Sass, Babel のビルドなんかを、サーバ側で自動化できます。Hugo や Hexo などの静的サイトジェネレータにも対応しているので、そういったツールを使う制作やブログなどにも適しているでしょう。

ほかにも

ファイルはCDNを介して配信される
独自ドメインの割り当てが可能
簡単にSSL化できる
HTTP/2 もサポート
↑これらは無料プランでもOK

すごい。
静的サイトを公開するなら、かなりお手軽かつ強力なサービスです。

さっそく試す

まず、コードの用意。
今回は gulp + pug + SCSS の組合せを試してみます。

超シンプルな、pug と scss のファイルを 1つずつ作成しました。

//- /src/index.pug

doctype html
html
  head
    title netlify-gulp-sample
    link(rel="stylesheet" href="styles.css")
  body
    h1 hello, netlify.

// /src/styles.scss

$main-color: #00c7b7;

body {
  color: $main-color;
}

また、/src 配下の pug と scss ファイルを変換して /public に出力するという、それだけの gulpfile も準備しておきます。

ビルドは Netlify側で行えますので、Gitリポジトリ内にビルド後の出力ファイル (今回は /public 配下) を含める必要はありません。.gitignore に以下の指定を入れました。

public/

その他必要な package.json ファイルなどを含め、一式は GitHub に push しておきます。今回のサンプルはこちらです。

https://github.com/tipsnote/netlify-gulp

Netlify の設定

では Netlify 側で、GitHub連携とデプロイに関する設定をしていきましょう。

Netlify にアカウントを作ってログインしたら、ADD A NEW PROJECT ボタンを押します。

Git リポジトリの選択画面になります。GitHub内のリポジトリをデプロイしたいので GitHub を選んで、

対象のリポジトリを選択します。

設定画面です。
「どのブランチの」「どのフォルダを」公開するか、選択します。今回は master ブランチの public/ フォルダ。
また、ビルドを実行するコマンドもここで指定します。今回は gulp build です。

設定完了したら、ビルド〜デプロイが動きだします。
コンソールに流れるログを見ていると分かるのですが、サーバ上で package.json ファイルを元に npm モジュールがインストールされていき、その後 gulp build でビルドを実行。結果出力された /public フォルダ内の公開作業までを、Netlify上で自動的にやってくれています。