GatsbyJSで作っているブログでGatsby v2からGatsby v3へ移行した
はじめに2021年3月にGatsby 3.0がリリースされたので、v2からv3への移行を実施した。 v3にアップデートすると何が良くなるのかGatsby v3 Incremental Builds in OSS, new Gatsby Image, and more | Gatsby 大きく分けて4つある。主にパフォーマンス向上を目的とされている。 開発者向け: ローカル開発速度の80%の改善以前は開発開始時にすべてのページや画像のビルドを待たないといけなく、ページ数や画像が多いサイトを開発していた人の辛みとなっていたが、改善された。 正直、個人のブログ程度だとあんまり辛みを感じていなかったが、記事数が増えていくと将来的に踏む可能性もあったので、アップデートしておいて損はない。1万ページのクライアントサイトというワードが出てきていたので、そういうオーダーでも耐えうるものを目指して進化してい
GatsbyJSで作っているブログで Netlify から Gatsby Cloud + Firebase Hosting に移行したらTTFBが改善された
モチベーション今までこのブログのCI/CDとホスティングはNetlifyを使っていた。GitHubのリポジトリを連携するだけでビルドとデプロイとホスティングを担ってくれて、無料で使えるのでめちゃめちゃ便利なサービスなのだが、CDNのエッジサーバが日本になく、一番近いところがシンガポールで、TTFB（Time To First Byte）が少しかかるという課題があった。そのうち日本にも来るだろうと思って2年くらい待っていたのだが、一向にサポートされる気配がなさそうなので、年末年始に暇だったので、移行してみてどれくらい計測値が改善されるかを試してみた。 移行前（Netlify）の計測値Testmysite.io というサービスを使ってTTFBを計測した。奇しくもNetlifyが運営しているサービスのようだ。 Website Speed Test Tool - Testmysite.io by
GatsbyJSで作っているブログで gatsby-plugin-google-analytics から gatsby-plugin-google-gtag に移行した
... { resolve: "gatsby-plugin-google-gtag", options: { trackingIds: ["UA-XXXXXXXX-X"], pluginConfig: { head: true, }, },},... head直下に下記のようなスクリプトが吐き出されていた。 GAのコンソール画面上に生成されるコードと異なり、 "send_page_view":false となっているが、これは、SPAの遷移をハンドリングして、PVを飛ばす機構をプラグイン側が用意しているので、GA側が用意しているMPA用の遷移時にPVを飛ばす仕組みをキャンセルする設定になっている。プラグイン内の下記コードがSPAでPVを飛ばすためのコードとなる。気になる人は確認してみると良いだろう。 exports.onRouteUpdate = ({ location }) => { i
GatsbyJSで作っているブログにおすすめのコンテンツを追加した
モチベーションこのブログ、実は少ないながらも割と検索流入で記事を見てもらえていることもあって、回遊してもらうきっかけを作りたかった。 完成したものトップ 記事下部 やったこと記事数がそれなりに揃っているおすすめしたいタグをいい感じにリンクさせるようにした。まだまだ記事数が少ないので、コンテンツとして成り立つタグがなかなかないが、記事数が増えてきたものから随時追加していけるようにした。「記事数がN件以上のタグ」などで自動的に抽出する案もあったが、 重複した記事を扱う似たようなタグが乱立してしまう順序を指定したかったという2点から、自分で任意のものを出し分けできるように手動でフラグを立てる方針を取った。タグが乱立する件に関しては、記事に対するタグの付け方自体が微妙なのかもしれないが、タグに関してはTwitterのハッシュタグのように記事を書いた時の勢いで自由に付けられるようにしておきたい。手動
続・GatsbyJSで作っているブログでページ遷移時にアニメーションが付くようにした
モチベーションブログの遷移時にアニメーションを付けていたのだが、下記記事の「後日追記」の通り、モバイルでスタイル崩れが発生してしまっていたので、アニメーションを取っていた。やっぱり付けたかった。 GatsbyJSで作っているブログでページ遷移時にアニメーションが付くようにした 完成したもの ページ遷移してもらえると、コンテンツが切り替わる際にフェードのアニメーションがかかっているのが確認できる。 やったことJSで頑張るアプローチを捨ててシンプルにCSSだけでアニメーションを付けたら上手くいった。もっと早くこちらのアプローチを試していれば良かった… JSで頑張るアプローチが難しいのは、Gatsbyが遷移時にスクロール位置の調整をしていて、アニメーションに合わせてスクロール位置を調整する処理を遅延させたりしないといけない点で、なるべく余分なロジックを持ちたくないので、CSSで実現するのが良さそ
GatsbyJSで作っているブログの前の記事と次の記事へのリンクにアイキャッチが付くようにしていい感じにした
モチベーション前の記事、次の記事の部分がスターターのスタイルのままになっていて、手を付けられていなかったので、スタイルを当てていい感じにしたかった。 Before After デザイン今回もアイキャッチコンポーネントを組み合わせるデザインとした。前の記事は左側に、次の記事は右側にアイキャッチが来るようにして前と次を表現した。 アイキャッチコンポーネントが汎用性が高く、記事のリンクを張る際に使いやすいので、用意しておいて良かった。 GatsbyJSで作っているブログでアイキャッチが自動でいい感じに付くようにした やったことまず、アイキャッチコンポーネントに渡す記事に紐づくタグ一覧が、前の記事、次の記事に関しては取得できていなかったので、 gatsby-node.js のGraphQLのクエリにtagsを追加して取れるようにした。 そして、下記のような PreviousAndNextPosts
GatsbyJSで作っているブログの記事一覧にもアイキャッチが付くようにしてデザインをいい感じにした
モチベーションずっと手を付けられていなかった記事一覧のデザインをいい感じにしたかった Before After やったこと前回の記事で記事の頭にアイキャッチが付くようにしたので、その仕組みを応用して、記事一覧にもアイキャッチが表示されるようにした。 GatsbyJSで作っているブログでアイキャッチが自動でいい感じに付くようにした 各記事のリンクはPostというコンポーネントを作っていて、GraphQLで取得した記事のデータを渡せばいい感じに表示してくれるようにしている。 import dayjs from "dayjs" import { Link } from "gatsby" import React from "react" import Date from "./date" import EyeCatch from "./eye_catch" import styles from
GatsbyJSで作っているブログでアイキャッチが自動でいい感じに付くようにした
モチベーションブログにアイキャッチがなかったので、付けたかった。毎回、ブログの記事に適したアイキャッチ画像を用意するのが理想的ではあるのだが、記事を書くハードルをなるべく下げたいので、記事に紐付いているタグベースで自動でいい感じのアイキャッチが付けられないか検討してみた。 Before After 解説アイデアの元ネタはcatnoseさんの下記記事だ。 ブログ執筆を効率化するための工夫 | Cat Knows catnoseさんは各記事毎に絵文字を設定できるようにプロパティを増やしているのだが、各記事毎に絵文字を設定するのすら面倒だったため、記事に付いているタグで出し分けるアプローチを取ってみた。 具体的には、下記のようなタグのマスターを持っていて、記事に紐付けたタグ名が一致した場合は、そのタグに設定された絵文字と背景色のアイキャッチが表示されるようになっている。 - name: 読んだ
Gatsbyビルドチューニング ビルド時間を15分から7分に短縮するためのTips 7選 | Takumon Blog
なにこれ 自分のブログ(Gatsby製)のビルドが遅すぎてNetlifyでタイムアウトしてしまうので、ビルドチューニングをしました。 15分以上かかっていたビルドが7分以下になり50%短縮できたので、その時の知見をまとめます。 割と地味な作業が多いですが、Gatsbyのビルド時間短縮に関するTipsを効果がある順にご紹介します。 🚀1. 画像生成処理を並列化する 🚅2. 必要な画像だけクエリで取得する 🚂3. 生成画像の種類を減らす 🚗4. 画像の縦横サイズを最適化する 🚴🏻5. 画像のファイルサイズを圧縮する 🏃🏻6. 生成する画像をシンプル＆低クオリティにする 🏊🏻7. netlify-plugin-gatsby-cacheを使う 💎番外編1: Circle CIでビルドしてNetlifyにデプロイする なぜビルドが遅いのか → 画像生成に時間がかかっている ビル
GatsbyJSで作っているブログのFOUC対策をした
FOUC とはFOUCとは、flash of unstyled contentの略で、CSSが適用されていない状態が一瞬表示された後にCSSが適用されることでチラつく現象のこと。 事象このブログにおいては、ヘッダーの部分がリロードを繰り返す度にロゴがガタっとなって、チラついていた。 やったことちょうどヘッダーだけMaterial-UIのコンポーネントに変えていたので、GatsbyJSとMaterial-UIの組み合わせが怪しそうだということで、調査してみるとまさしくなIssueがヒットした。 Flicker of Unstyled Content (FOUC) with Gatsby and Material UI · Issue #15097 · gatsbyjs/gatsby その中でGatsbyのコントリビュータの対応策のコメントを見つけた。SSRするページでMaterial-UIの
GatsbyJSで作っているブログでページ遷移時にアニメーションが付くようにした
モチベーションGatsbyJSでブログを作っており、SPAでページ遷移が爆速なのがとても良いが、読み込みがないことで、逆にフィードバックがなくてページが変わったことに気づけないので、ページ遷移時にアニメーションを付けたかった。 できあがったもの適当にページ遷移するとファンってなるのを体験できる。 ※ 後日追記下記 react-transition-group と gatsby-plugin-layout を使う方法でページ遷移時にアニメーションを付いたのだが、モバイル端末でスタイル崩れが発生したので、ページ遷移時のアニメーションは外した。 ※ さらに追記で、CSSで実現する方法が良さそうだったので、記事にした。 続・GatsbyJSで作っているブログでページ遷移時にアニメーションが付くようにした GatsbyJSのTransition事情gatsby-plugin-transition-l
GatsbyJSで作っているブログでリッチなリンクを貼れるようにした
モチベーションアプリやサービスを紹介する際にURLだけだと味気がないので、OGPの情報を拾ってきて、リンク先のタイトルや画像が表示されるようにしたかったnoteとかでよく見るやつできあがったもの Bear - プライベートメモ Bearは、ライター／弁護士／シェフ／教師／エンジニア／学生や保護者などのさまざまなユーザーによって利用されている自由なメモアプリです。 Bearは、素早い整理機能・編集ツール・エクスポート機能を備えているため、素早く書いてどこでも共有することができます。また、暗号化によってプライバシーを保護します。 2017 Apple デザインアワード 2016 年 App Store アプリオブ・ザ・イヤー 「Bear は、私が一番気に入っている執筆アプリ」- Kit Eaton, New York Times 柔軟かつシンプルなツールで*自由に書きましょう* Bear
GatsbyJSで作っているブログにMaterial-UIを導入した
モチベーションFlutterを触るようになってMaterial Designなコンポーネントを扱う機会が増えたので、Material Designなコンポーネントに触れる機会を増やしたかったMaterial-UIの0系の頃に触って以来だったので、触ってみたかったSemantic UIの開発が止まってしまっており、本家からフォークされたFomantic-UIの開発も進んでいるが、将来的に統合されるかも不透明という背景もあり、乗り換え先を探していたやったことMaterial-UIのインストールヘッダーをMaterial-UI製にしてみたAppBarを使うシャドウが濃かったので、調整したスマホで見た時に記事の読むスペースをなるべく広げられるように、よくある、下にスクロールしたら上にヘッダーが隠れて、隠れている最中に上にスクロールしたらヘッダーが出てくる挙動にしたnoteとかもこういう挙動おわりに
GatsbyJSで作っているブログの記事のURLを見直した
今までhttps://kikunantoka.com/2020-02-13--fix-url これからhttps://kikunantoka.com/2020/02/13--fix-url モチベーション年別、月別アーカイブ機能を入れるとしたら、/2020/ とか /2020/02/ とかのルーティングにしたくなりそうなので、それに合わせたかった記事数が増えてきて、記事ディレクトリ配下のフォルダ数が増えていて、管理しづらかったやったこと記事ディレクトリ配下に /2020 や /2019 などのフォルダを追加して階層化した一部の記事がSEOで上位を取れていて、せっかく検索してたどり着いてくれた人にNot Foundを出すのもなーと思ったので、Netlify用のリダイレクトルールを書いたワイルドカードで指定することができて、便利Redirect options | Netlify Docs /
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GatsbyJSで作っているブログで gatsby-remark-component を使うのを止めて、 gatsby-plugin-mdx を導入した
GatsbyJSで作っているブログでAmazonのリンクをいい感じに貼れるようにした