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

メニューボタン閉じるボタン

Netlify 初心者必見! Bitbucket 上のコードをビルドして静的サイトを公開してみる

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

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

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

Netlify とは?

Netlify トップ

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

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

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

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

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

Netlify に登録しよう

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

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

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

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

https://www.netlify.com/

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

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

Netlify Gitソリューション選択

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

Bitbucket 認証

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

Webサイトを公開しよう

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

Netlify 公開準備

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

Gitソリューション 選択

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

Netlify リポジトリ選択

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

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

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

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

Netlify サイトをデプロイ

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

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

Netlify デプロイ中

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

Netlify デプロイ完了

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

まとめ

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

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

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

今すぐお気軽に
ご相談ください。

0120-315-465

(平日 10:00~19:00)

今すぐお気軽に
ご相談ください。

0120-315-465

(平日 10:00~19:00)

グラッドキューブは
「ISMS認証」を取得しています。

認証範囲:
インターネットマーケティング支援事業、インターネットASPサービスの提供、コンテンツメディア事業

「ISMS認証」とは、財団法人・日本情報処理開発協会が定めた企業の情報情報セキュリティマネジメントシステムの評価制度です。

いますぐ無料で
お試しください。

トライアル終了後も
無料でご利用いただけます。

お名前【必須】
メールアドレス【必須】
※携帯・フリーアドレスは不可
電話番号【必須】

利用規約』『プライバシーポリシー』に同意する