GatsbyJSでWebサイトを作るときのメモ

自分のwebサイト

GatsbyJSを使ってWebサイトを作ったときの備忘録。

使ったもの

• GatsbyJS

  静的サイトが作れる。React製。

• Netlify

  サイトを置く場所。無料で結構使える。GitHubにプッシュすると自動でデプロイが走る。

やったこと

1. 兎にも角にも公式チュートリアル

   個人的に、GraphQLが難しかった。

2. 完全に理解した 一通り見たので作りはじめる。

   • なんかいっぱいテンプレートがある
   • 全部一から作りたかったので、gatsby-starter-defaultを選択
   • 適宜、CSSを調べながらゴリゴリ作った

3. こことか見ながら、公開する。

   • ファイルがリポジトリ直下じゃない時は、別途フォルダの指定が必要
     Build & deploy の base directory を変える
   • 慣れれば、5分でサイトを公開できそうなくらい簡単

ここからが本当の備忘録

追加で調べたこと。

• マウスホバーで変形する要素のCSS

  マウスホバーで要素が変形すると、当たり判定も変わってガクガクする
  -> 要素を当たり判定と実際に変形する部分に分ける

• 画像を簡単に読み込む

  チュートリアルだと、いちいちGraphQL使うので面倒くさい
  -> 最初にGraphQLですべて読みこんでから、指定したものを取り出すやつ作れば良き
  ※ 解説記事が消失していたので、代わりに私のコードのリンクを張っておきます。

• Top へ戻るボタン

  top にいるときと、それ以外でボタンの見た目を変えたい
  -> React を部分的に使って作った
  (一部React で書いたり、ちょっと動的なこともできるみたい)

• json ファイルからデータを読み出す

  制作物一覧とか、直接JSXにリストを書きたくない。
  使い慣れた json から読み込みたい。
  -> gatsby-transformer-jsonプラグインで解決

感想

GatsbyJS、SEO的なのアレしてくれるし、画像も良さげに軽量化してくれるし、Netlify無料でも結構使えるし、すごく便利です(小並感)