初心者がReact製の静的サイトジェネレーター「Gatsby」でシンプルなWebサイトを作ってみた

UI構築のためのJavaScriptライブラリ「React」製の静的サイトジェネレーター「Gatsby」を使ってWebサイトを作りました。後半ではFirebaseでサイト公開まで行いますが、前半ではコンパイルまで。

今回作ったWebサイト https://imairisako.com/

本記事は『あさぎデザインひとりAdvent Calendar 2019』の7日目のエントリーです。

Gatsbyを使う準備をする

npxでインストールしました。Macのターミナルを起動して、下記を実行します。

Terminal
npm install --global gatsby-cli
Terminal
gatsby --version

バージョンが確認できれば、インストールはOK。

Terminal
gatsby new app https://github.com/gatsbyjs/gatsby-starter-default

Gatsbyにはコーポレートサイト、ブログ、ポートフォリオなどのスターターキットがあります。今回は一通りの機能が確認できるシンプルな「gatsby-starter-default」を「app」というフォルダ名で用意しました。

Gatsbyにはさまざまなスターターがあります。今回は右上のものを使用。
Terminal
npm run develop

localhost:8000」でサンプルサイトが立ち上がります。

サンプルサイトはこちら

テンプレートを作る

Gatsbyのファイル構成

Sassが使えないと始まらないので、「gatsby-plugin-sass」プラグインをインストールします。

Terminal
npm install --save node-sass gatsby-plugin-sass

今回は練習を兼ねて、/src/components/layout.js をカスタマイズしました。(複数ページを作るときに使う機能なので1ページだと有り難みはないんですが…)

こんなサイトを作りました

今回のゴールはWebアプリケーション開発プラットフォーム「Firebase」でサイト公開するところまでだったので、名刺がわりのシンプルなデザインにしました。

デフォルトのままだとレスポンシブの表示が上手くいかなかったので、viewportの設定をするために /src/html.js を作成します。

Terminal
cp .cache/default-html.js src/html.js

/src/html.js でmetaタグなどの設定ができます。

OGPの設定をするときは、/src/components/seo.js をサンプルコードに沿ってカスタマイズします。og:imageの設定が上手くできなかったので静的に書きましたが、ページごとに異なる画像を設定できるように引き続き勉強します。

参考サイト

後編はこちら

Gatsby製WebサイトをFirebase+ムームードメインで公開してみた