Site icon Tips Note by TAM

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

matsuo

巷で噂の 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上で自動的にやってくれています。

"Finished"、ということで終わったっぽい。
管理画面を見ると http://examiner-polecat-10623.netlify.com/ というURLが割り当てられたようなので、そちらにアクセスします。(このサブドメイン名は後から自分で変更可能です)

おお、公開されている〜！

驚きの簡単さです。デプロイに関するサーバ設定が、ブラウザから数回ポチポチするだけで完了という……！

しかも、今後修正が発生した場合も、GitHub のさきほどのリポジトリに git push するだけでOK。なにか手を加えてコミット〜プッシュしますと、それをトリガーに Netlify が自動で再ビルドからデプロイまでを行ってくれます。驚きの便利さです。

まとめ

ということで Netlify を使えば、Git を使った静的サイトの継続的デプロイが、驚きのラクさでできてしまいました。

今回は無料プランを試してみましたが、有料プランではサイトにパスワード制限をかけたり、上位プランだと Git のブランチごとに別環境を用意してデプロイできたりするようです。サイト制作の現場でも活躍しそうなサービスではないでしょうか、ちょっと今後有料プランも試してみたいと思います。