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


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

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

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

Netlify とは?

Netlifyの公式サイトのキャプチャ画像

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

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

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

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

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

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

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

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

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

Netlify を使い始める方法

アカウント作成後、ログインした時の画面

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

New site from git を選択すると Git ホスティングサービスの連携画面に移ります

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

連携完了後、リポジトリ選択画面に移ります

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

公開用のブランチやビルドコマンドを設定する画面のキャプチャ

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

Deploy site を選択した後の画面のキャプチャ

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

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

まとめ

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

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

Gaji-Labo は Jamstack 開発の知見があります

高パフォーマンス、表示が早く、SEO についての不安も少ない Jamstack。
フロントエンド開発の専門家として、技術選定からサーバーサイド開発側との調整まで対応します。

「Jamstack にしたいが、社内調整ができるか不安」
「Jamstack 開発がわかるエンジニアがいない」

Jamstack に関わるお困りごとに対して、メリット/デメリットの判断からお手伝いできます。
まずは一度お気軽に Gaji-Labo にご相談ください。

オンラインでのヒアリングとフルリモートでのプロセス支援にも対応しています。

フロントエンドの相談をする!

投稿者 Ishigaki Shotaro

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。