Gaji-LaboのコーポレートサイトはNetlifyでホスティングされています

こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。

今回は、「Gaji-LaboのコーポレートサイトはNetlify CMSを使っています」でもご紹介した、Gaji-Laboのコーポレートサイトのホスティングサービスとしても使用している Netlify について改めてまとめてみました。

今回は概要と、リポジトリを連携して使い始めるところまでをご紹介したいと思います。

Netlify とは？

Netlify とは、静的ウェブサイトを提供するためのサービスの一つで、ビルド、デプロイ、ホスティングといった機能が一つにまとまったプラットフォームです。

なんといっても Netlify の最大の特徴は、 GitHub / GitLab / Bitbucket のリポジトリと連携し、リポジトリに push や merge があった時に、前もって設定したビルドコマンドで即座にビルドされ、 Netlify 上にデプロイされ公開されるという点です。

これにより、ウェブサイトを公開するにあたっての必要な工程を大幅に削減することができます。

その性質上、React の静的サイトジェネレーターである GatsbyJS などを使用したサイトのホスティングに適していますし、それらと Contentful、 microCMS などの Headless CMS を組み合わせたいわゆる Jamstack 構成のサイトのホスティングにも最適なサービスになっています。

Netlify にもプロダクトの一つとして Netlify CMS という Headless CMS が存在しており、弊社のコーポレートサイトも GatsbyJS + Netlify CMS + Netlify という構成になっています。（Netlify CMSに関する知見は「Netlify CMSを実践で使ってみた」シリーズもご参照ください）

他にも以下のような機能があります。

• グローバルなCDNによるコンテンツ配信
• フリープラン含む全てのプランでSSL/HTTPSに対応
• Deploy Previews によるコミットごとのプレビュー環境の作成
• Netlify Forms によるサーバーサイド側の設定無しでのフォームの投稿機能の実装

より詳しい機能については公式ドキュメントを参照ください。

Gaji-Labo のコーポレートサイトでも、Deploy Previews や Netlify Forms など Netlify の多くの機能を活用しています。

手軽にセットアップでき、コミットごとにプレビュー環境を作成できることから、最近では案件においても活用することが増えてきています。

Netlify を使い始める方法

サイトトップからアカウントを作成し、ログイン後、New site from git を選択します。

連携したい任意の Git ホスティングサービスを選択します。

連携したいリポジトリを選択します。

リポジトリ選択後、公開用のブランチやビルドコマンドを設定します。

Deploy site を選択後、自動でリポジトリがビルド、デプロイされ任意のURLで公開されます。

これで指定したブランチに変更が加えられた場合、自動でビルド、デプロイが行われることになります。

まとめ

今回は、Gaji-Laboのコーポレートサイトでも使用している Netlify について、概要とセットアップの方法を改めてまとめました。

今後、 Netlify に関する様々な知見を紹介する記事も書いていけたらと思っていますのでよろしくお願いいたします！