参考サイトをメモ

基本のき（ありがたや

とても良くまとまっている。素敵。
とりあえずmyfirstprojectとか適当な名前で手を動かしながら見てたら基本の流れがほぼ把握できる。
ありがたや。

Firebase Hosting を使った静的サイトのホスティング方法 | by Kazuki Yonemoto | Medium
https://medium.com/@yonemoto/firebase-hosting-%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E9%9D%99%E7%9A%84%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E3%83%9B%E3%82%B9%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E6%96%B9%E6%B3%95-3e0bac58d09c

starterについて

GatsbyJSのStarterを比較する | dvg-179
https://dvg.179.jp/201803-gatsby-starter/

html+cssイケる人はいっちゃんシンプルなやつをカスタムしていくのが吉
（サーバーサイドのひとが多いのか、よくmaterialUI前提とかのやつある
スタイルの上書きとかじゃっかん癖があるけどずっと使っていくならmaterialUI前提とかのやつ使うのも吉）

設定後の作業の流れ

gatsby build
からの
firebase deploy
で公開される

静的サイト内機能をReactで実装する。

スライダー

React.js ライブラリ「react-slick」を使用してスライダーを実装する | mebee

React.js ライブラリ「react-slick」を使用してスライダーを実装する

react-slick vs react-swiper vs swiper vs flickity vs slick-carousel | npm trends
https://www.npmtrends.com/react-slick-vs-react-swiper-vs-swiper-vs-flickity-vs-slick-carousel

slickかswiperか。swiperはReact版はメンテされてないから注意

javascript – React SwiperJs autoplay not making the swiper to auto swipe – Stack Overflow
https://stackoverflow.com/questions/63052586/react-swiperjs-autoplay-not-making-the-swiper-to-auto-swipe

React版じゃないswiperを入れたら、前のまんま、fadeだとリサイズ時の挙動がおかしくなったのでslickに変更。
多分うまくいってる。

【React】スライダープラグイン「slick」のReact版「react-slick」の使い方 | 会津ラボブログ | 会津ラボブログ
https://www.aizulab.com/blog/react-slick/

googleFont

公式のいうこと聞くのが一番よいだろということで

Recipes: Styling with CSS | Gatsby
https://www.gatsbyjs.com/docs/recipes/styling-css/#using-google-fonts

フォント一覧
typefaces/packages at master · KyleAMathews/typefaces
https://github.com/KyleAMathews/typefaces/tree/master/packages

ありがたい日本語の記事

Gatsby.jsのプロジェクトにGoogle Fontsを導入する方法 – Qiita
https://qiita.com/yutaroadachi/items/40d5fbbd27cd9fd6360e

GatsbyJsでFontを変更するTypeface編 | コリログ
https://www.corylog.com/gatsby/gatsby027/

今回は使わないけど手法の検討時に参考にしたもの

AMP にも対応！Google Fonts を preload で先読みし最適化
https://firstlayout.net/optimize-google-fonts-with-preload/

Optimizing Google Fonts on Gatsby Sites | Shakacode
https://www.shakacode.com/blog/optimizing-google-fonts-on-gatsby-sites/

googlemaps

あ、普通に入れたらあかんねや。へぇ。ってなった〜

ReactでGoogle mapをお届けする – Qiita
https://qiita.com/miyabiya/items/98c8a177e6077ee50971#%E3%81%BE%E3%81%A8%E3%82%81

reactjs – Add Google Map to GatsbyJS with Maps JavaScript API – Stack Overflow
https://stackoverflow.com/questions/50623207/add-google-map-to-gatsbyjs-with-maps-javascript-api

ハンバガー

みんなだいすきハンバーガーメヌー
シンプルにできるよって
WordPressからGatsby.jsにブログを変えました | Zero Forest
https://0forest.com/gatsby-new-blog/#8-%E3%83%8F%E3%83%B3%E3%83%90%E3%83%BC%E3%82%AC%E3%83%BC%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%AE%E4%BD%9C%E6%88%90

Gatsby Navigation using Styled Components and useState hook | Snopkowski.com
https://snopkowski.com/blog/gatsby-navigation-styled-components

このかたたくさん工夫されてていいなあ
まいのこマート：追従ハンバーガーメニューを実装 – Qrac BLOG
https://blog.qrac.jp/posts/makino-mart-add-fixerd-hamburger-menu/

その他メモ

Firebase Pricing
https://firebase.google.com/pricing?authuser=0

あ、そういや
なんでNetlifyじゃないのって話
日本に基地なくて遅いらしいから

その他時間作りながら追記していく・・よてい

[2020/9/3追記]

svgのコンポーネント

svgを落っことすと自動でコンポーネントを作ってくれる
ソースのお掃除もしてくれる。
ただ時々パスがおかしいもんも出来たので確認すべし

Playground – SVGR
https://react-svgr.com/playground/

そのた

強そうな方のQiita
Gatsbyプラグイン45選 – Qiita
https://qiita.com/Takumon/items/da8347f81a9f021b637f#%E3%81%AA%E3%81%AB%E3%81%93%E3%82%8C

とは系の投稿
静的サイトジェネレーター Gatsby – Qiita
https://qiita.com/umamichi/items/9bd08a21fddc71588efc#graphql-%E3%82%92%E7%94%A8%E3%81%84%E3%81%A6md-%E3%81%8B%E3%82%89%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B

いまさら聞けないPWAとAMP – Qiita
https://qiita.com/edwardkenfox/items/4c0b9550ffa48c1f0445

公式、後で使いそう？読みたい

Gatsby Link API | Gatsby
https://www.gatsbyjs.com/docs/gatsby-link/#add-custom-styles-for-the-currently-active-link

[2020/9/3追記kokomade]

GA

Firebase Analyticsとかあって発狂しそうになって、結局シンプルにタグを追加した。

これはUAから始まるGAタグ用

GatsbyのサイトにGoogleアナリティクスをいれる(Netlify) | littlebylittle
https://littlebylittle.work/2020/01/gatsby-analytics/

gtag用のはこちら

gatsby-plugin-google-gtag | Gatsby
https://www.gatsbyjs.com/plugins/gatsby-plugin-google-gtag/

sitemap

Gatsby.jsでサイトマップを作成する – Qiita
https://qiita.com/ShinKano/items/3cf3eef6320bc62181a3