Gatsby.jsでシンプルな静的サイトを作る際に必要な知識だけをまとめました。CMSとの連携等については今回は扱いません。 Gatsby.jsとは React製の静的サイトジェネレーターです。webサイトを作る時に使います。 Gatsby.jsのメリット 従来通りHTML/CSS(+Gulp, Webpack)でコーディングする方法と比較した場合の最大のメリットは表示速度がめっちゃ速いことです。びっくりするくらい速いです。 その他のメリットとしては JSXを使うので、HTMLの記法等にミスがあったときにすぐに気が付くことができる プラグインが豊富(Markdownファイルを読み込む、PWA対応、etc) ヘッドレスCMSとの相性が良い Gatsby Themeを使って、既存のデザインを流用することができる カスタマイズが前提ならthemeは使わない方が良さそう などがあります。 セットア
Gatsby.js と AWS Amplify を使って爆速でブログサイトをデプロイする | DevelopersIO
概要 CX事業本部の佐藤です。 Gatsby.js という React ベースの静的サイトジェネレータがあります。 それを AWS Amplify でデプロイして爆速でブログサイトをデプロイできましたので、手順を記事にしたいと思います。 Gatsby.js とは https://www.gatsbyjs.org/ React のフレームワークの一種で、静的サイトジェネレータです。静的サイトジェネレータとは、 ブログの記事やWebページなどをあらかじめビルド時に生成しておき、デプロイ後はそれを表示するだけにすることで、 Webサイトが高速に動作するようにした技術です。 Gatsby.js を使うことで、Wordpress などの CMS や Markdown ファイル、DB などからデータを取得して、 それを事前にビルドしてWebページに変換してデプロイすることが可能です。 Gatsby.j
blog.ojisan.io
InteliJ で作った new Kotlin Project が、Gradle のバージョン設定が古くてビルドできなかった
GatsbyJSをYouTubeで学べる「The Great Gatsby Bootcamp」をやってみたら最高だった - hiro08gh
こんにちはかみむらです。最近、GatsbyJSの注目度が高くなってると感じます。私はまだキャッチアップできていませんでしたが、色々学習リソースを調べてみたところ「The Great Gatsby Bootcamp」を見つけました。 Webサイト高速化のための 静的サイトジェネレーター活用入門 (Compass Booksシリーズ) 作者:エビスコム発売日: 2020/06/01メディア: Kindle版 The Great Gatsby Bootcampとは？ www.youtube.com これは、YouTubeで学べるGatsbyJSのチュートリアルです。約4時間30分のコンテンツになります。 非常に質の高いチュートリアル動画ですが、全編英語です。しかし、英語が聞き取れない方でも動画を見ながら写経すれば大丈夫です。実際に、私は英語が全くわかりません笑 コンテンツ内容 動画の概要をざっと
Help us understand the problem. What are the problem?
How To Load Fonts In A Way That Fights FOUT And Makes Lighthouse Happy | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! A web font workflow is simple, right? Choose a few nice-looking web-ready fonts, get the HTML or CSS code snippet, plop it in the project, and check if they display properly. People do this with Google Fonts a zillion times a day, dropping its <link> tag into the <head>. Let’s see what Light
なにこれ 自分のブログ(Gatsby製)のビルドが遅すぎてNetlifyでタイムアウトしてしまうので、ビルドチューニングをしました。 15分以上かかっていたビルドが7分以下になり50%短縮できたので、その時の知見をまとめます。 割と地味な作業が多いですが、Gatsbyのビルド時間短縮に関するTipsを効果がある順にご紹介します。 🚀1. 画像生成処理を並列化する 🚅2. 必要な画像だけクエリで取得する 🚂3. 生成画像の種類を減らす 🚗4. 画像の縦横サイズを最適化する 🚴🏻5. 画像のファイルサイズを圧縮する 🏃🏻6. 生成する画像をシンプル＆低クオリティにする 🏊🏻7. netlify-plugin-gatsby-cacheを使う 💎番外編1: Circle CIでビルドしてNetlifyにデプロイする なぜビルドが遅いのか → 画像生成に時間がかかっている ビル
WordPress 5.5 以降のロードマップも見え始め、年内には Full Site Editing (FSE) ＆ Block-based Themes が出てくるようで、非常に楽しみです。 また、Block-based Themesを見ているとどうしても SSG（静的サイトジェネレーター）っぽく見えるもので、WordPress が Jamstack を気にしないわけないよな… などと妄想してみたりしています。 一方、静的サイトジェネレーター周辺では、打倒WordPressなんて話をよく見かけます。気持ちはよくわかります。最近のWordPressは色々と大変ですし…。 また、コストをかけずにサイトを公開できる時代になって、WordPress のためのサーバーコストが気になり始めたという話もよく見かけるようになりました。 このあたりを考えれば、WordPress からの避難先として、静的
2020年4月、Reactでウェブサイトやアプリケーションを作るGatsbyから「Gatsby Recipes」の発表がありました。（執筆時点ではまだExperimentalな機能です） 📝New! "Announcing #GatsbyRecipes" 👩🏿🍳👨🏼🍳 Recipes teach users how to accomplish desired tasks in Gatsby while also automating the process. ➡️ https://t.co/X0ueTQHqv4 ✨ This release is the first step towards adding a lot more automation capabilities to Gatsby. pic.twitter.com/sBH4EVK4Cz — Gatsby (@
JamTemplates https://jamtemplates.com/ JamTemplatesの特徴 「JamTemplates」は、Gatsby＆JamStack向けのWebテンプレート集です。美しく設計された40のテンプレートが全て無料で利用できます。 どれも洗練されたテンプレートで、レベルが高い。 MITおよびCC BY 3.0のライセンスのもと、無料で利用が可能。 3.0 Licenの 導入手順も記載されており、ローカルで簡単に環境構築することもできます。 https://cara.lekoarts.de/ ぜひ、気になるデザインは、プレビュー版で確認してみてください。 JamTemplates https://jamtemplates.com/
Gatsbyではビルド時に静的ページを生成する為、検索結果ページのように入力された検索ワードによって動的に内容が変わるようなページは生成することができません。 なので検索機能はSaaSなどを利用して実装するのが一般的になっているみたいなんですが、こちらのブログで検索機能を自前実装する方法が紹介されていて、参考にさせていただいたところ思った以上に手軽にできたので、今回の記事ではその実装の記録を残しておきたいと思います。 実装方法 以下のような手順を踏んで実装していきます。 useStaticQueryを使って検索コンポーネント内で全記事データを取得する 検索コンポーネント内で検索処理 参考にさせていただいたブログ記事では、ビルドの度に全記事分の情報が格納されたjsonファイルを生成し、それをReactコンポーネントからaxiosを使って取得していましたが、今回はuseStaticQueryを
このブログにタグ機能を作りました。 タグって自作ブログを作ると絶対に欲しくなってしまう機能なのですが、Gatsby でそれを作るのはちょっと敷居の高さを感じていたので、噛み砕きながら解説しようと思います。 一度わかってしまえば単純な話だとは思うものの、gatsby-node.js の使い方やビルドプロセスの知識が問われるので、Gatsby を使えるようになるかどうかの最初の関門になってそうと個人的には思っています。 同様の知識は Gatsby から記事ページを生成するときにも問われますが、それは公式チュートリアルをやればすんなりと通れるため、実質タグ機能の実装が最初の関門になってそうです。 そのため "Gatsby を初めてみてチュートリアルやって静的サイトは作れるようになったけどよくわかってない" という人にとって有用になりそうな情報も含めて、タグ機能の実装に必要な知識や考え方をつらつら
Why the TypeScript team is using Gatsby for its new website | Gatsby
Why are we using Gatsby for TypeScript’s new Website? The TypeScript v1 site is a Jekyll website, and Jekyll packs a lot of power into a small tool. Jekyll is really great way to build static websites, but it’s built to work for small-medium sized websites of around 1-20 pages. You can feel the scope by how they treat templating (liquid, which is a sandbox’d logic-less templating engine), how they
From Static to Real-time: Introducing Incremental Builds in Gatsby Cloud Today I’m thrilled to announce the release of Incremental Builds on Gatsby Cloud. In January we announced Gatsby Builds, bringing you up to 60x faster builds for Gatsby sites compared to other solutions. Now, when you make a data change in a CMS, the Gatsby Cloud Incremental Builds feature will rebuild only what’s necessary—g
Jamstack Advent Calendar 2020 の 1 日目の記事です。 最近 Next.js が凄い勢いで進化していますが、同じ React フレームワークの Gatsby.js も負けず劣らず新しい機能が追加されています。 今回は、先月公開された Gatsby.js の新しい API、 File System Route API について紹介します。 この記事は以下バージョン時点の情報です。 Gatsby.js: 2.25.4 File System Route APIとは？ File System Route API は、ブログの個別ページなど同レイアウトでデータが異なるページを作る際に、ファイル名を特定の表記とすることで動的にページを生成する API です。今までは gatsby-node.js で createPages で行ってたことを代替できます。 旧来の方式とF
爆速サイト構築に挑戦１.ヘッドレスCMSを導入
CXやDX（デジタルトランスフォーメーション）が流行ってきましたが、ツールのタグを入れすぎてサイトが重い、iTPなどセキュリティ・プライバシー対策が弱いので精度が落ちた、なんて状況は避けたいですよね。 「分かりやすいデザイン」「使いやすいUI」は誰でも追求できますが、楽してWordPressを使っているようではパフォーマンスのチューニングに限界があります。ここ数年、数週間でWebの技術は驚くほど格段に進化しました。 そこで、将来のWebの進化を見据えて最先端のツールやアプローチを使って、でも（ほぼ）無料でセキュアで爆速なサイトを最短で構築することに挑戦します。 ヘッドレスとサーバーサイドでいこうCMSとタグ管理の発想を根本的に変えることで、爆速セキュアなサイトを実現することにします。 1.CMSはヘッドレスとSPAまず、CMSはヘッドレスとSPAを組み合わせます。ヘッドレスCMSは2017
Gatsby.jsって？ この記事はGatsby.js Advent Calendar 2019 3日目の記事です。 実は1日目も記事を書いてます(Reactの最強フレームワークGatsby.jsの良さを伝えたい！！)。中1日です。高野連に怒られるやつです。カレンダーが空いていたので記事を書きます。 よければGatsbyの良さを叫んだ上の記事も合わせてご覧ください！ 改めてとなりますが、Gatsby.jsはReactで作られた静的サイトジェネレーターです。内部的にGraphQLを用いてデータを取得し、markdownからHTMLを生成、などの処理を簡単に行うことができます。 Gatsbyはとても凄いので、プラグインなどをブチ込むと簡単にPWA対応した超高速サイトが作れたりします。もはや静的サイトジェネレータとしてだけでなく、create-react-appに代わるフレームワークとして使える
GatsbyのTheme周辺を自分の言葉でまとめた記事です。触れている内容はチュートリアルやドキュメントにあるものなので、それらすべてに目を通しているような人はここでブラウザを閉じてOKです。 公式チュートリアルを流し読みした後のおさらいとでもいいましょうか。 Gatsby Themeとは コンポーネント, レイアウト, GraphQLなど、Gatsbyを構成する要素をnpmパッケージ化したものです。よく比較されるのがスターターです。スターターはそれ1つが構成単位のため、導入後は基底のスターターから乖離してしまいます。例えば、バージョンアップを受けるのが難しくなります。テーマは構成を別パッケージとして分けているため、それが容易になります。 テーマはプラグインのようなもので、複数組み込むことが可能です。重複する部分は構成設定の順序で優先度が決まります。具体的にはgatsby-config.j
GitHub - BuilderIO/builder: Visual Development for React, Vue, Svelte, Qwik, and more
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Gatsbyは静的サイトジェネレータフレームワークです。 フロントエンドを作成するときは最近はReactやvueなどのJSフレームワークを使って作成することが多いです。 メリットも大きい反面、webpackやparcelでbundle.jsを作成し、動的に仮想DOMツリーを生成するSPAの欠点として以下のことが挙げられます。 bundle.jsのファイルサイズが肥大化する（Code Splittingをして適切な分割読み込みや先読みである程度は回避できるが、依存ライブラリのファイルサイズが増えると厳しい） そもそも仮想DOMツリーの構築に初回のJS実行時間がかかる（SSRでもバックエンドでJSによる動的にDOM構築をするため、遅い） TwitterやFacebookシェアのOGPを実装しようとするとSSRの実装に迫られる（SSRは複雑度を増すのでSPAとしてはあまりやりたくない・・・） 静
こんにちはかみむらです。個人的な肌感で、Jamstackアーキテクチャーの構成でWEBサイトを公開する企業が増えてきた気がします。最近では日本製Headless CMS「microCMS」も登場して、だいぶ日本でも採用しやすい環境が整ってきました。 私もJamstackアーキテクチャー推しな一人なので、現在色々な構成で試作をしています。 Webサイト高速化のための 静的サイトジェネレーター活用入門 (Compass Booksシリーズ) 作者:エビスコム発売日: 2020/06/01メディア: Kindle版 今回は、Ghostのブログ記事に触発されて、GatsbyJS + Ghostの構成をローカルで動かしてみます。GhostはNode.js製のヘッドレスCMSで、オープンソースで公開されています。Ghostの環境はDockerで準備します。 ghost.org Jamstackアーキテ
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-s
Introducing Headless WordPress with Gatsby Cloud (Live Preview, Incremental Builds, and more!) Today we are excited to announce that Gatsby’s new source plugin for WordPress has launched in beta! This new release delivers major improvements to our headless WordPress integration with Gatsby and Gatsby Cloud. Checkout these updates in the demo video below to see how your content editors’ creative po
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
WorpdressからGatsby.jsに移行するにあったって、wordpressの記事情報の取得・表示までの連携をメモします。 以下内容はCLIにてgatsby newで作成したプロジェクトを基本にしています。 Wordpressプラグインの追加 wrodpressとの連携はgatsby-source-wordpressにて行うのでパッケージをダウンロードします。
画像はWebサイト・Webページの構成要素として非常に重要な存在です。また、ページのデータ量の中でも、大きな割合を占めます。 そのため、デバイスに対する画像の最適化は必須であり、現状であれば、解像度＆画像フォーマットの両方を考慮した以下のようなレスポンシブイメージのコードが必要です。 <picture> <source type="image/webp" srcset=" image/lemons-w400.webp 400w, image/lemons-w768.webp 768w ... " sizes="100vw" /> <img srcset=" image/lemons-w400.jpg 400w, image/lemons-w768.jpg 768w ... " sizes="100vw" src="image/lemons.jpg" alt="Lemons" loading
GitLab Pages は無料でしかも帯域利用枠が無制限という太っ腹の仕様。このブログは以前までは Netlify で運営していた。Netlify は素晴らしいサービスだったんだけど、帯域利用枠とビルド時間がやけに食う Gatsby には GitLab Pages の方があっている。 ブログを GitLab Pages に移したらいいことしかなかった。 Netlify と Gatsby の相性は悪い？Netlify の素晴らしさに触れてからなんでもプロジェクトを Netlify に入れていた。今でも Netlify は大のお気に入りだ。でもある時にふと「Gatsby にはあんまり相性がよくないのでは？」と思うようになった。なぜなら Gatsby はその特性上、コンテンツの内容を変更してデプロイするとビルドがいる。Netlify の無料プランにはこのビルド時間が月に３００分でそれを超えたら
Gatsby 4 combines the control and scalability of server-side rendering with the performance of static-site generation, creating a whole new web of possibilities.
Gatsby.jsにreact-helmetを導入してhead要素（メタタグ）をカスタマイズする GatsbyでHTMLファイルを書き出すと、初期状態ではメタタグはおろかタイトルもないんですよね。 その辺のカスタマイズは「helmet」とというプラグイン使うと簡単らしいでご紹介します。 投稿日2019年10月14日 更新日2019年10月14日 Gatsbyがはじめての方は下記の記事も参考にしてください。 React製静的サイトジェネレーターGatsby使ってみた インストール 下記コマンドでプラグインをインストールします。 react-helmetはReactのコンポーネントですが、それをGatsbyのプラグインで利用できるようにしたのがgatsby-plugin-react-helmetですね。 $ npm install --save gatsby-plugin-react-helm
Creating tag pages for your blog post is a way to let visitors browse related content. To add tags to your blog posts, you will first want to have your site set up to turn your markdown pages into blog posts. To get your blog pages set up, see the tutorial on Gatsby’s data layer and Adding Markdown Pages. The process will essentially look like this: Add tags to your markdown filesWrite a query to
Gatsby raises $15M Series A for its modern web development platform | TechCrunch
Startups Gatsby raises $15M Series A for its modern web development platform Gatsby, a platform that uses modern web technologies like React and GraphQL to help developers build better sites faster, today announced that it has raised a $15 million Series A round led by CRV. Previous investors Trinity Ventures, Mango Capital, Fathom Capital and Dig Ventures also participated, as did Kong CEO August
概要 今回は、Reactベースの静的サイトジェネレータのGatsbyと、サイトを公開するためのNetlifyを利用して、爆速でWebアプリケーションをデプロイする方法について書きます。 ※ブログはテンプレートのままでデプロイしています。 プロジェクトの作成 Gatsbyはテンプレートを選んでプロジェクトを作成することができます。 今回はNetlifyのテンプレートがあるため、そちらを利用していきます。 それ以外のテンプレートはこちらから探すことができます。
概要 Kentaro Matsushitaさんが開発されたOGP画像生成ライブラリ「catchy-image」を使用して、Gatsby.js製ブログにOGPを自動生成・設定する実装をしました。お手軽に記事タイトルに応じたOGP生成ができる素晴らしいライブラリです。gatsby-starter-blogをベースに構築したブログを想定し、導入までの作業をメモしておきます。 完成したOGP画像の例 記事のタイトルとサイト名、アイコンが記載されたシンプルなOGP画像が完成しました。 執筆時構成 node v12.15.0 gatsby 2.27.5 catchy-image 0.1.6 最新の情報はcatchy-imageリポジトリのREADMEをご参照ください。 手順 catchy-imageをインストール catchy-image パッケージをインストールします。 npm install --
１５分で超カンタンに爆速の無料ブログができるGatsbyの作り方
Gatsby で超カンタンにブログが作れる。たったの１５分で爆速の無料ブログが完成するやり方を書いた。 Gatsby のパワーを未経験の方はぜひお試しください。やってみたら、たぶんこれからのブログやウェブサイトに求められるスピードの概念が変わる。 この解説で完成するブログはこちら https://jabba14.gitlab.io/blog_test/ なぜ Gatsby？爆速でめっちゃ速い永年無料でホスト料金を気にしなくていいサーバーが落ちないこのブログも Gatsby にしていて Google PageSpeed Insights の結果がこれ。特になにもしなくても基本は爆速です。 なんで速くできるのかの仕組みについては公式サイトのドキュメントを読むといろいろと工夫があって、マジ感動する。IT エンジニアの方はぜひ一読されたし。 ホストしてるデータは静的だから落ちない。 さらに無料！も
GitHub - tengkuhafidz/WebSheets-Listing-Page: This is a Gatsby template for creating a catalogue websites based on Google Sheets data.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
はじめに 本記事は https://tech-blog.yoshikiohashi.dev/posts/start-gatsby-blog-add-tags のクロスポスト記事になります。 この記事はGatsbyというヘッドレスCMS技術で構成されています。今回は「エンジニア初心者でもできる」を前提に以下の構成で記事を作成していこうと思います。 Gatsby始めるまで GatsbyにShare機能、OGPタグをつける タグ機能、カテゴリ機能をつける（基礎編） タグ機能、カテゴリ機能をつける（応用編） GatsbyにTableOfContents（目次）をつける DarkModeをつける 内容 今回はWordPressのタグ機能、カテゴリ機能に当たる部分を実装していきます。標準で実装されてないの？！って突っ込みはあるかと思いますが、そうです。標準のテンプレートでは実装されておりません。なので
Gatsby Link API | Gatsby
For internal navigation, Gatsby includes a built-in <Link> component for creating links between internal pages and a navigate function for programmatic navigation. <Link> drives Gatsby’s fast page navigationThe <Link> component drives a powerful performance feature called preloading. Preloading is used to prefetch page resources so that the resources are available by the time the user navigates to
既刊「GatsbyJS Guidebook」を改訂して技術書典10で頒布したものです。 ■ 概要 第1章ではReactのおさらいをしつつJSXでポートフォリオを構築します。最後にReact単体でウェブサイトを作る際のデメリットを確認し第2章でGatsbyに入門します。 第2章ではポートフォリオの要件を達成するGatsbyのサイトを作成します。Gatsbyのルーティング、データの取扱、Netlifyのデプロイまで一通りサイトが作れるレベルまでやります。 第3章では記事データを外部のmicroCMSというHeadless CMS（Viewを持たないCMS）に保存し、そのデータをもとにサイトを構築する方法を学びます。 第4章では公式情報への当たり方やGatsbyをより便利に扱うためのテクニックを紹介します。 ■ 対象読者 本書では、次のような方を対象読者として執筆しています。 • Git/Gi
Next.js vs. Gatsby in 2023
In recent years React has had two frameworks dominate its user base: Next.js and Gatsby. Until recently, they had some sizable differences that allowed developers to pick one of the two that made sense for their use case. But, in recent months the two frameworks have become much closer. Both Gatsby and Next allow you to create very versatile and powerful React websites using features like Sever-Si
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Gatsby.js】「ここだけ押さえれば普通に使える」って知識をまとめてみた - Qiita
Gatsbyを最速で理解するためのチュートリアル - Qiita
Gatsbyビルドチューニング ビルド時間を15分から7分に短縮するためのTips 7選 | Takumon Blog
GatsbyJS と WordPress と Block-based Themes | エビスコム - EBISUCOM
サイト構築のタスクを自動化する「Gatsby Recipes」とタスク記述言語としてのMDX - Qiita
Gatsby向け無料のWebテンプレート集「JamTemplates」は一見の価値があるデザインレベルの高さ
Gatsby製ブログでサイト内検索を実装しました
Gatsby製のブログにタグ機能を追加するための方法を見直してみよう
What is Gatsby Incremental Builds? | Gatsby
Gatsby.jsの新機能「File System Route API」を試してみる
Gatsbyの超高速テンプレート(PWA, MDX, TypeScript対応)を作ったヨ！ - Qiita
Gatsby Themeの超入門
静的サイトジェネレータGatsbyを秒速で理解する - Qiita
GatsbyJS + GhostでJamstackなブログを作成する - hiro08gh
初心者がReact製の静的サイトジェネレーター「Gatsby」でシンプルなWebサイトを作ってみた
Headless WordPress with Gatsby Cloud | Gatsby
オープンソースの静的サイトジェネレータ「Gatsby v3.0.0」がリリース
Gatsby.jsでWordPressと連携。記事一覧、詳細を表示するまで - Qiita
Gatsby・Next・WordPressから見た「いまどきのレスポンシブイメージ」 | エビスコム - EBISUCOM
Gatsbyブログを無料で帯域無制限のGitLab Pagesに移したらいいことしかなかった
Introducing Gatsby 4 | Gatsby
Gatsby.jsにreact-helmetを導入してhead要素（メタタグ）をカスタマイズする
Creating Tags Pages for Blog Posts | Gatsby
はじめに｜ブログサイトを作りながら学ぶGatsby入門
GatsbyとNetlifyを用いて爆速でブログの公開 - Qiita
Gatsby.js製ブログで記事毎にOGP画像を自動生成する | kyabe.net
Gatsbyにタグ機能、カテゴリ機能をつける（基礎編） - Qiita
React & GatsbyJS開発入門 - mottox2（つのぶえ出版） - BOOTH