2023/04/06
Gatsbyバージョンアップ（v2 to v5）
なにこれ ブログについて以下２点改修したので備忘録を残します。 Gatsbyをv2からv5に更新：しばらくブログを更新しない間にGatsbyの最新バージョンはv2からv5になっていたのでバージョンアップしました。 ＋α…
26件
2020/06/21
Gatsbyビルドチューニング ビルド時間を15分から7分に短縮するためのTips 7選
なにこれ 自分のブログ(Gatsby製)のビルドが遅すぎてNetlifyでタイムアウトしてしまうので、ビルドチューニングをしました。 15分以上かかっていたビルドが7分以下になり50%短縮できたので、その時の知見をまとめます。 割と地味な作業が多いですが、Gatsby…
2020/05/23
Gatsbyビルドエラー「window is not defined」への対処法
なにこれ react-cytoscapeのようなwindowオブジェクトを前提としたライブラリをGatsbyで使おうとすると、のときは正常動作するにもかかわらず、ビルド時にだけエラーがでます。今回はその対処法を備忘録として残しておきます。 原因と対処法 Gatsby…
2019/06/18
Gatsby + Netlify + ZapierでRSSリーダーを作る
なにこれ 自分専用のRSSリーダーをGatsby + Netlify + Zapierを使って作りました。Gatsbyビルド時にRSSとOGPを取得して、Webサイトに表示しています。 今回はこのWebサイトのビルドの仕組みと、GatsbyビルドでRSS+OGP…
2019/06/02
Gatsbyにおける外部取得画像へのgatsby-image適用方法
なにこれ Gatsbyで画像を扱う場合gatsby-imageを使うとイイ感じに最適化してくれます。 Webサイトのリポジトリ内の画像についてはで簡単に設定できますが、今回はビルド時に動的に取得する外部画像に対して設定する方法をご紹介します。 実装方法 Step…
2019/06/02
Gatsbyで2種類のマークダウンファイルの区別する方法
なにこれ GatsbyでWebサイトを作るときに、ブログや職種紹介など2種類以上のマークダウンファイルを管理する場合があると思います。通常だとMarkdownRemarkNode…
2019/05/31
GatsbyのルートページにContextを設定する方法
なにこれ Gatsbyでは、gatsby-node.jsのcreatePagesで以下のようにページを作成できます。 ただルートページ（index.jsのページ）はGatsby側で生成されるので通常はContext…
2019/05/13
パスを渡せばgatsby-imageで画像を表示してくれるコンポーネントの作成方法
なにこれ こんな感じでgatsby-imageの画像を表示したい。そんなコンポーネントの作成方法です。 gatsby-imageをちょっと知っている人ならわかると思うのですが、gatsby-imageで画像を表示するには、いちいちStaticQueryタグとGraphQL…
2019/05/11
2019/05/01
GatsbyでCytoscape.jsを使って記事関連マップを作った
なにこれ 以前の記事で紹介したタグとキーワードから関連記事を算出するロジックと、Cytoscape.jsを用いて記事の関連情報を視覚的に確認できるマップを作りました。 今回はそのマップの紹介とCytoscape.jsを使ってみた感想です。 記事関連マップ 使い方 URL…
2019/02/09
2019/01/15
Gatsbyショーケースに自分のWebサイトを登録する方法
なにこれ Gatsbyの公式サイトにはショーケースなるものがあって、 世の中に公開されているGatsby製のWebサイトを一覧で見ることができます。 実はこのショーケース、けっこう簡単に自分のWebサイトを登録できるということに最近気づきました。 今回は、Gatsby…
2019/01/11
2018/11/24
Gatsby themeを使ってみる
なにこれ 下記の記事を読んで、 実験的に追加されたGatsby themeで何ができるのかサンプル作って試してみました。そのときのメモです。 Gatsby themeはどんな問題を解決してくれるか Gatsby…
2018/11/11
GatsbyでQiitaから記事を取得する(gatsby-source-qiita)
なにこれ GatsbyにQiitaの記事を取り込めるプラグイン(gatsby-source-qiita)を作りました QiitaからGatsbyに乗り換えようと考えている方で、Qiitaの記事を引き継ぎたい場合に便利なプラグインです。サンプル(gatsby-starter…