starfish

backend, frontend, ios engineer

Gatsby + Netlifyで静的サイトを公開した - Gatsby編 -

2019-05-02Gatsby

このサイトは、以下の構成で実装されています。

  • Gatsby
  • Netlify

実際に着手してから公開するまで、トータルで8時間も掛かっていないです。

今回は、構想から公開までのフローを、数回に渡って紹介したいと思います。

前回の記事は こちら です

この記事ではGatsbyを使ってのサイトの実装に関して説明をします。

Gatsby is 何?

公式サイトは こちら

React製の静的サイトジェネレータです。

個人的には記事データなどをGraphQLを通じて一元的に管理することができる点が好きです。

静的に作成したマークダウンファイルはもちろんのこと、WordPressのWebAPIをデータソースとして、GraphQLを使って取得することが可能です。

また、Reactによって構成されているので、ある程度コードを理解することができれば、自身によってカスタマイズを行うことが可能です。

静的サイトなので、表示や読み込みもCMSと比べれば比較的高速になっており、https対応さえしていればセキュリティの心配もしなくて良さそうです。

要は、ある程度フロントエンドの知識は必要だが、 GraphQLを使ってデータ取得することが出来、カスタマイズの自由度が高くて、めっちゃ高速に動く静的サイトを作成できるもの だと思ってくれたら良いです。

初期設定

まずはgatsby-cliをインストールします。

npm install -g gatsby-cli

本来であればここで gatsby new gatsby-site を叩くのですが、残念ながら私はマークアップが非常に苦手です。

今回の目的はサイトを構築することではなく、アウトプットの場を作ることにあるので、サイトのマークアップそのものに時間を掛けてしまうのはナンセンスです。

そこで、GatsbyのStarterを利用しようと思います。

世界中の有志たちがGatsbyで良い感じのサンプルサイトを作ってくれており、それをGitHub上で公開してくれています。

私のようにマークアップが苦手な方は、これらの中から自分のイメージに近いものを選び、そこからカスタマイズしていくことをお勧めします。

利用する際にはライセンスの確認と、作成者への感謝の気持ちを忘れないようにしましょう。

どのサンプルサイトを元にするか決まったら、それらのGitHubのreadmeの説明に沿って構築をしましょう。

おそらく、以下のようなコマンドになるかと思います。

gatsby new NEW_SITE_DIRECTORY_FOR_YOUR_SITE https://github.com/CREATER_NAME/REPO_NAME.git

サンプルサイトによっては gatsby new のタイミングで npm install または yarn install を同時に実行してくれているかと思います。

gatsby new を叩く前に、サンプルサイトで必要なnpmやyarnのバージョンを確認しておきましょう。

表示

初期設定が終わったら、ローカル環境で表示させてみましょう。

gatsby new したディレクトリに入って、以下のコマンドを叩きます。

gatsby develop

これにより、Gatsbyがlocalhostに表示を展開してくれます。

表示されている時にファイルを変更、追加した場合も自動的に更新をかけてくれます。

ここで注意しないといけないのは、自動的に更新がかかるのは、更新したファイルそのものだけということです。

例えば、記事のタイトルを変更したとします。

その場合、その記事自体のページのタイトルの表記は変更されますが、他の記事ページから変更された記事ページへのリンクは変更されません。

この場合、再度 gatsby develop を叩くことで解決します。

カスタマイズ

初期設定が終わったら、次はカスタマイズをしていきましょう。

  • デザインやCSSを変更
  • サンプル記事の削除
  • og:image、favicon、サイト名やdescriptionを変更

これらはサンプルサイトの構成によって、具体的な修正内容が大きく変わるので、詳細な説明は割愛します。

私が参考にしたサンプルサイトでは、各種設定はconfig系のファイルで一元管理されており、サンプル記事はディレクトリそのものを削除するだけで対応可能でした。

記事を書く

記事を管理するフォルダに、マークダウンのファイルを配置するだけで記事ページが作成されます。

その際、ファイルの先頭に以下のようなタグを置くことによって、GraphQL経由でデータを取得することが可能になっています。

---
title: Gatsby + Netlifyで静的サイトを公開した - Gatsby編 -
category: "Gatsby"
cover: cover.png
author: starfish
---

ここで利用しているタグは、サンプルサイトによって異なるので、一つ目の記事を作成する前にそれぞれが何を意味しているのかをしっかりと理解することが重要です。

まとめ

今回の対応で、Gatsbyによるサイトの構築そのものが完了しました。

次回はNetlifyを使って公開する流れを説明します。