GatsbyJSでWebサイトを作るときのメモ
GatsbyJSを使ってWebサイトを作ったときの備忘録。
使ったもの
やったこと
-
兎にも角にも公式チュートリアル
個人的に、GraphQLが難しかった。
-
完全に理解した一通り見たので作りはじめる。- なんかいっぱいテンプレートがある
- 全部一から作りたかったので、gatsby-starter-defaultを選択
- 適宜、CSSを調べながらゴリゴリ作った
-
こことか見ながら、公開する。
- ファイルがリポジトリ直下じゃない時は、別途フォルダの指定が必要
Build & deploy の base directory を変える - 慣れれば、5分でサイトを公開できそうなくらい簡単
- ファイルがリポジトリ直下じゃない時は、別途フォルダの指定が必要
ここからが本当の備忘録
追加で調べたこと。
-
マウスホバーで変形する要素のCSS
マウスホバーで要素が変形すると、当たり判定も変わってガクガクする
-> 要素を当たり判定と実際に変形する部分に分ける -
画像を簡単に読み込む
チュートリアルだと、いちいちGraphQL使うので面倒くさい
-> 最初にGraphQLですべて読みこんでから、指定したものを取り出すやつ作れば良き
※ 解説記事が消失していたので、代わりに私のコードのリンクを張っておきます。 -
Top へ戻るボタン
top にいるときと、それ以外でボタンの見た目を変えたい
-> React を部分的に使って作った
(一部React で書いたり、ちょっと動的なこともできるみたい) -
json ファイルからデータを読み出す
制作物一覧とか、直接JSXにリストを書きたくない。
使い慣れた json から読み込みたい。
-> gatsby-transformer-jsonプラグインで解決
感想
GatsbyJS、SEO的なのアレしてくれるし、画像も良さげに軽量化してくれるし、Netlify無料でも結構使えるし、すごく便利です(小並感)