Netlify 初心者必見！ Bitbucket 上のコードをビルドして静的サイトを公開してみる ｜ SiTest (サイテスト) ブログ

2017年現在、簡単に静的サイトを公開できるようになりました。
便利かつ簡単なホスティングツールが増えてきたのもその理由の1つではないでしょうか。

Heroku, Firebase, GitHubPages
どれも便利ですが、どのホスティングツールにも負けず劣らず有用な「Netlify」をご存知でしょうか？
Netlify は SSL の設定も簡単に行える高機能ホスティングツールです。
今回はその Netlify を使用して静的サイトを公開しています。

Netlify の概要から使い方までをサクッとみていきましょう。

ビルド、デプロイ、ホスティングまで一気通貫して行える高機能ホスティングツールです。

連携できるサービスが豊富であり、
Git ソリューションでは、GitHub はもちろん、 GitLab、 Bitbucket にも対応しています。
静的サイトジェネレータでは、Hugo に Jekyll が対応しており、自動ビルドも設定できます。
その他にも、CI のツールが連携ができたりします。

また、高機能な部分をあげると、
・　簡易に Let’s Encrypt で取得した証明書をドメイン名に結びつけることができる
・　簡易にグローバルな CDN を導入できる
・　簡易に独自ドメインを設定できる
といったところがあげられます。

しかもこれらは全て無料プランで使用できます。

それでは、実際に体験していきましょう。

今回はタイトルでも書いた通り、 Bitbuket と連携していきますので、 Bitbucket のアカウントを事前に取得しておいてください。

また、今回は Gulp でコンパイルすることを想定しており、 gulpfile はプロジェクト直下にあるものとします。

公開する用のソースコードも用意しておいてください。

それでは、始めます。
まず Netlify の公式サイトにアクセスしましょう。

https://www.netlify.com/

「Sign Up」をクリックして、アカウントを作っていきましょう。

「Bitbucket」ボタンをクリックします。

認証画面がでますので、アクセスを許可します。

これで、アカウントは完成です。

下記のような画面に遷移すると思うので、「New site from Git」をクリックします。

Git ソリューションを選択する画面がでてきますので、「Bitbucket」を選択してください。

次にデプロイするリポジトリを選択する画面がでますので、お好きなリポジトリを選択してください。

最後にビルドの設定画面がでますので、各フォームを入力して、「Deploy site」をクリックしてください。

Branch to deploy: デプロイしたいブランチを選択してください

Build command: 各自のビルドコマンドを選択してください、今回は Gulp を採用しているため、「gulp build」としています

Publish directory: デプロイして公開するディレクトリを選択してください。今回は Gulp で吐き出される先を public/ にしているので、それとしています。

「Deploy site」をクリックすると、ビルド、デプロイ、ホスティングを行ってくれます。

git をクローンして、 package.json から npm をインストールして、 gulpfile から gulp build を行ってくれます。

成功すると「Browse site」というボタンがでますので、クリックしてください。

無事に静的サイトが公開されていますね。
完成です。

いかがでしたでしょうか？

今回は Netlify の登録からコンパイルが必要なソースコードの公開までを紹介しました。

その他にもカスタムドメインの設定や SSL の設定など、簡単に行えますので、試してみてください。