Gatsby JSとNetlifyを使い超高速でモダンなウェブサイトを構築してみた
高速なページローディングがアピールポイントであるGatsby JSを使ってみた。Gatsbyは、React製のオープンソースフレームワークであり、開発者が非常に高速なWebサイトやアプリを構築するのに役立つ。
WordPressやGhostのデータをAPIで取得したり、CMS機能を使いブログシステムを構築することもできる。
性能を、
- Gatsby JS
- JAMstack frameworks（Jekyll、Next.js、Nuxt.js）
- CMS（WordPress、Drupal）
で比較すると、以下のようになる。
| GATSBY | JAMSTACK | CMS | |
| 性能 | ◎ | ◎ | ○ |
| 開発者の経験 | ◎ | ◎ | ○ |
| ガバナンス | ◎ | ○ | ◎ |
| アクセシビリティ | ○ | ○ | ◎ |
| ドキュメンテーション | ◎ | ◎ | ◎ |
| 生態系 | ◎ | ○ | ○ |
簡単に言えば、高性能で優秀な開発者がエコシステム内に多くいるよという感じ。
実際に、Gatsby JSで構築された有名なウェブサイトは数多くある。
ショーケース
Gatsbyは静的サイトジェネレーターなので、データベースまわりのセキュリティを気にする必要はなく、堅牢で読み込み速度が速い。このことから、有名なウェブサイトでも採用されている。
React
React自体のウェブサイトはGatsby JS製。
Flamingo
女性のボディケアと脱毛製品のオンラインショップ
IDEO
グローバルなデザイン会社
Airbnb
デザインとエンジニアリングのサイト
Figma
デザインアプリケーション。プロトタイプやモックアップ作成に使う
Braun
電動シェーバー会社、カナダ
Gatsby JSのチュートリアル動画
日本語字幕を表示させながら、一連の動画を見れば何となく理解できると思う。
Gatsby JSのインストール
npm経由でインストールする。
$ npm install --global gatsby-cli
バージョンの確認
$ gatsby --version
Gatsby CLI version: 2.7.47
作成
今回は、テンプレートを使用してウェブサイトを公開してみる。
以下で確認↓
$ gatsby new gatsby-starter-blog https://github.com/gatsbyjs/gatsby-starter-blog
↓のように、ゴニョゴニョしてくれる。
ローカルサーバー起動
$ cd gatsby-starter-blog
$ gatsby develop
これで、Localhost:8000へアクセスするとGatsby製のウェブサイトが表示されているはず。
Netlifyで公開
Gatsby JS製のウェブサイトは、サーバーレスでデプロイできるサービス「Netlify」で簡単に公開できる。
Netlifyの関連記事はこちら↓
テンプレートをNetlifyで公開するのは、2種類のパターンが有る。
- テンプレートから直接公開する
- ローカルで指定コマンドから立ち上げリポジトリにPushする
では、それぞれ見ていこう。
直接公開
1.の場合、テンプレートの右下にある『Netlify』をクリックすると自動的にNetlifyのデプロイ画面へ遷移される。初心者の方は、こちらの方が楽だろう。
デフォルトでは、Githubと連携させ、Githubにリポジトリが作成されることになる。
リポジトリの名前を決める。『Save & Deploy』をクリックし、5分程待てばリポジトリの作成とサイトが公開されるまでが完了している。
ビックリするくらい簡単だった。
リポジトリから公開
2.の場合、ローカルのディレクトリへ移動し『Install this starter locally:』と記載された部分のコマンドをペーストする。その後、作成したリポジトリへリモートからPushする。
$ git config --global user.name "hoge" $ git config --global user.email [email protected] $ git init $ git add . $ git commit -m "first commit" $ git remote add origin https://github.com//hogehoge.git $ git push -u origin master
『New site from Git』をクリックし、リポジトリを公開ししてあるサービス、
- GitHub
- GitLab
- Bitbucket
のいずれかを選択。
Gatsbyで構築したリポジトリを選択し、『Save & Deploy』する。
こちらの場合も、5分程待てば自動で公開される。
今回デプロイしたサイトはこちら↓
いずれ自分のウェブサイトにしようと思い、ドメインを設定するところまでは行ってみた。そのうち編集しようと思う。
ドメインを設定
独自ドメインを設定する場合、Netlifyのダッシュボードから『Domain Setting』をクリック。
ドメインを設定するのは2つの方法があり、
- Netlify DNSを使用
- DNSプロバイダーでA or CNAMEを登録
である。
基本的には①が楽で、CDN機能を持ち自動でSSL証明書を発行するまでをNetlifyが行ってくれる。この場合、ネームサーバーを変更しなければならない。
DNS側でSSL証明書を発行できるのであれば、2を選択すれば良いだろう。手軽にSSL証明書を発行できるのは、やはりCloudflareだ。
所感
コマンドをいくつか入力するだけで、モダンなウェブサイトを高速に公開できるのは最高だ。個人のポートフォリオサイトや企業のコーポレートサイトなどに最適だと思う。
Worpressなどとは異なり、静的サイトジェネレーターで構築されたウェブサイトはセキュリティ面を気にする必要がなく、また高速なページ遷移が非常に魅力的。
Netlify CMSを使用したGatsby JS製のブログも構築してみたので、この記事とは別に公開したい。文字中心のブログであれば、Netlify CMS + Gatsby JSが最適解なのではないかと思えた。
