むにえる牧場

毎日むにえるをつくっています

Gatsby + NetlifyでWebページを作って、公開するところまでやってみた

概要

とある友人から頼まれてポートフォリオサイトを作るという案件を趣味でやることにしました。
せっかくだからReact製の静的サイトジェネレーターGatsby.jsを使って、ホスティングサービスにはNetlifyを使ってモダンな感じで作ろうと、技術選定を行いました。
(僕はReactの経験、はたまたフロントエンドの経験全然ないです)
今回は、

  1. Gatsbyを利用してジェネレート
  2. Netlify上でサイトを公開する

まで備忘録として書き残します。

Gatsbyとは

GatsbyJS

  • Node.js環境で動作するWebサイトジェネレーター
  • 静的サイトを製作することに特化している
  • React Webpackとモダンな技術てんこ盛り
  • PWA(Progressive Web App)として生成することもできる
  • どんなに適当に作っても爆速で動作する設計になっている(らしい)

とメリットだけ見ると良い感じのフレームワークです。

デメリットとして、日本語の情報が非常に少ないことが挙げられます。
試しに2018/12/1時点でQiitaにてGatsbyを検索すると28件しか記事がヒットしません。
ドキュメントに関しても英語のものしか存在しないため、検索するのには一苦労します。

Gatsbyセットアップ

npmを利用してインストールします

$ npm install --global gatsby-cli

インストールすればgatsbyコマンドが利用できるようになっているので、まずはバージョン確認。

$ gatsby --version
2.4.6

僕が入れた時点では、2.4.6がインストールされました。
バージョンが確認できればセットアップはOK。

雛形ページ作成

$ gatsby new [PROJECT NAME]

でデフォルトの雛形ページが生成されます。
このコマンドの引数に追加でURLを指定することによって、ブログ用途にカスタマイズされているスターターを利用することもできます。
スターターの一覧はこちら

www.gatsbyjs.org

今回は特にスターターを指定せずに、デフォルトのものを利用します。
デフォルトの雛形ページのディレクトリ構成はこんな感じに。

f:id:jalemy:20181201173909p:plain:w300
Gatsby - default starterのディレクトリ構造

ローカル環境でテスト

$ gatsby develop

とコマンドを入力することで、ローカルに開発サーバーを立てることができます。
初期の状態では、localhost:8000にアクセスすればGatsbyのページを確認できます。

f:id:jalemy:20181201173914p:plain
Gatsby - defaultページ

なんかもうここまででWebサイトが作れている感じがして、満足感がでてきます。(はやい)

Netlifyでホスティングして、インターネット上で見れるようにする

最近流行りらしい(?)無料でWebサイトをホスティングできるサービスNetlify
先ほどGatsbyにて作成したページをNetlifyに上げるのはとても簡単で、

  1. Gatsbyで生成したプロジェクトをGitで管理するようにcommitする
  2. GitHubに上げる
  3. NetlifyGitHubを連携認証させる
  4. Netlifyで案内される通りにボタンをぽちぽちと押して、GitHub上に上げたrepositoryを選択する
  5. deployさせるのを待てば、終わり

基本的に案内通りで躓かなかったので、文字で手順だけ書くようにしました。
deploy時にエラーがあれば、こんな感じに表示されます。

f:id:jalemy:20181201173904p:plain
Netlify - Overviewイメージ

もちろんエラーがなければ、そのままdeployされてWebページが公開されるのでとても簡単です。
NetlifyGitHubのrepositoryを勝手に追随してくれるため、buildやdeployの手間が一切かかりません。便利すぎます。
あとはNetlifyが生成してくれたURLにアクセスすれば、自身の作ったWebページにアクセスできます。

まとめ

React製Webサイトジェネレーターや、Netlifyのようなホスティングサービスを利用することははじめてでしたが、1時間とかからずにWebページ公開するところまで行きつけました。
Gatsbyの設計思想や、Webpack周りの話などわからないことがたくさんあるので、時間を見つけつつポートフォリオサイト作成を進めていきたい所存です。

Gatsbyのスターターを覗いていたところ、ポートフォリオサイト作成用に公開されているスターターがあったので、その辺り利用すればサクッと作れるかなーと妄想しています。