Gatsby JSとNetlifyを使い、超高速でモダンなウェブサイトを構築してみた

Gatsby JS

高速なページローディングがアピールポイントであるGatsby JSを使ってみた。Gatsbyは、React製のオープンソースフレームワークであり、開発者が非常に高速なWebサイトやアプリを構築するのに役立つ。

WordPressやGhostのデータをAPIで取得したり、CMS機能を使いブログシステムを構築することもできる。

性能を、

  • Gatsby JS
  • JAMstack frameworks(Jekyll、Next.js、Nuxt.js)
  • CMS(WordPress、Drupal)

で比較すると、以下のようになる。

GATSBYJAMSTACKCMS
性能 
開発者の経験
ガバナンス 
アクセシビリティ 
ドキュメンテーション 
生態系 

簡単に言えば、高性能で優秀な開発者がエコシステム内に多くいるよという感じ。

実際に、Gatsby JSで構築された有名なウェブサイトは数多くある。

ショーケース

Gatsbyは静的サイトジェネレーターなので、データベースまわりのセキュリティを気にする必要はなく、堅牢で読み込み速度が速い。このことから、有名なウェブサイトでも採用されている。

React

React自体のウェブサイトはGatsby JS製。

React
https://reactjs.org/

Flamingo

女性のボディケアと脱毛製品のオンラインショップ

Flamingo
https://www.shopflamingo.com/

IDEO

グローバルなデザイン会社

IDEO
https://www.ideo.com/

Airbnb

デザインとエンジニアリングのサイト

Airbnb
https://airbnb.io/

Figma

デザインアプリケーション。プロトタイプやモックアップ作成に使う

Figma
https://www.figma.com/

Braun

電動シェーバー会社、カナダ

Braun
https://ca.braun.com/en-ca

Gatsby JSのチュートリアル動画

日本語字幕を表示させながら、一連の動画を見れば何となく理解できると思う。

Gatsby JSのインストール

npm経由でインストールする。

$ npm install --global gatsby-cli

バージョンの確認

$ gatsby --version

Gatsby CLI version: 2.7.47

作成

今回は、テンプレートを使用してウェブサイトを公開してみる。

以下で確認↓

Gatsby JS
https://www.gatsbyjs.org/starters/?v=2
$ gatsby new gatsby-starter-blog https://github.com/gatsbyjs/gatsby-starter-blog

↓のように、ゴニョゴニョしてくれる。

gatsby JS

ローカルサーバー起動

$ cd gatsby-starter-blog
$ gatsby develop

これで、Localhost:8000へアクセスするとGatsby製のウェブサイトが表示されているはず。

Netlifyで公開

Gatsby JS製のウェブサイトは、サーバーレスでデプロイできるサービス「Netlify」で簡単に公開できる。

Gatsby JS
https://www.gatsbyjs.org/starters/EmaSuriano/gatsby-starter-mate/

Netlifyの関連記事はこちら↓

テンプレートをNetlifyで公開するのは、2種類のパターンが有る。

  1. テンプレートから直接公開する
  2. ローカルで指定コマンドから立ち上げリポジトリにPushする

では、それぞれ見ていこう。

直接公開

1.の場合、テンプレートの右下にある『Netlify』をクリックすると自動的にNetlifyのデプロイ画面へ遷移される。初心者の方は、こちらの方が楽だろう。

デフォルトでは、Githubと連携させ、Githubにリポジトリが作成されることになる。

Netlify

リポジトリの名前を決める。『Save & Deploy』をクリックし、5分程待てばリポジトリの作成とサイトが公開されるまでが完了している。

ビックリするくらい簡単だった。

Netlify

リポジトリから公開

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/<username>/hogehoge.git
$ git push -u origin master

『New site from Git』をクリックし、リポジトリを公開ししてあるサービス、

  • GitHub
  • GitLab
  • Bitbucket

のいずれかを選択。

Gatsbyで構築したリポジトリを選択し、『Save & Deploy』する。

こちらの場合も、5分程待てば自動で公開される。

Netlify

今回デプロイしたサイトはこちら↓

いずれ自分のウェブサイトにしようと思い、ドメインを設定するところまでは行ってみた。そのうち編集しようと思う。

Gatsby JS

ドメインを設定

独自ドメインを設定する場合、Netlifyのダッシュボードから『Domain Setting』をクリック。

ドメインを設定するのは2つの方法があり、

  1. Netlify DNSを使用
  2. DNSプロバイダーでA or CNAMEを登録

である。

基本的には①が楽で、CDN機能を持ち自動でSSL証明書を発行するまでをNetlifyが行ってくれる。この場合、ネームサーバーを変更しなければならない。

DNS側でSSL証明書を発行できるのであれば、2を選択すれば良いだろう。手軽にSSL証明書を発行できるのは、やはりCloudflareだ。

所感

コマンドをいくつか入力するだけで、モダンなウェブサイトを高速に公開できるのは最高だ。個人のポートフォリオサイトや企業のコーポレートサイトなどに最適だと思う。

Worpressなどとは異なり、静的サイトジェネレーターで構築されたウェブサイトはセキュリティ面を気にする必要がなく、また高速なページ遷移が非常に魅力的。

Netlify CMSを使用したGatsby JS製のブログも構築してみたので、この記事とは別に公開したい。文字中心のブログであれば、Netlify CMS + Gatsby JSが最適解なのではないかと思えた。

Total
2
Shares
You May Also Like
シンタックスハイライト
続きを読む

【3行のコードだけ】手軽にシンタックスハイライトを導入できる「highlight.js」の使い方

テック系でブログを運営している人は、記事内にコードを記述するとき、何か味気ない感じがした経験はあると思う(プログラムの事を書く人)。 そんなとき、シンタックスハイライトを導入すれば、見栄えが良くなることをご存知だろうか。…