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

ishigaki

こんにちは、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では、JavaScriptフレームワーク経験が豊富なパートナーさんを募集しています

Gaji-Laboでは、開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。

現在は特にJavaScriptフレームワーク実践と業務経験が豊富なWebフロントエンドエンジニアを必要としています。React + TypeScript、Vue.js、Next.js、Nuxt.js など、あなたの得意なフレームワークを教えて下さい!

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

お問い合わせしてみる!


ishigaki

投稿者 石垣 祥太郎

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