TL; DR Firebase Hostingのデプロイに時間がかかる VSCodeでの執筆はやめたくない 日本にエッジがないホスティングでもCloudflare経由でいい感じに配信できた これまでの構成と課題 これまでは、Gatsby CloudでビルドしたアセットをFirebase Hostingを使って…

Gatsby V3が発表されました！ www.gatsbyjs.com 目玉は更なる高速化とIncrement Buildのオープンソース化でしょうか。gatsby-plugin-mage などのプラグインもBetaが取れています。 Gatsby cloudにHosting機能が追加され、Functionsのプレビュー募集も始まっ…

タイトルの通りのコンポーネントを作っていたのだが、クライアントサイドからでは他のサイトにリクエストを飛ばしてOGPデータを取得することができないので、バックエンドAPIを利用してOGP情報を毎回生成するCloud functions を作成しました。 iframelyやサ…

10分くらいかかってたビルドが3分になった、催眠術とか超スピードとかそんなチャチなもんでは（ｒｙ 激重サムネイル処理(<5000 images)ブログ、Vercelで10分以上かかってたビルドがGatsbyCloudだと3分かからない…！？ pic.twitter.com/AERB04Un7Q— ゲン (@ge…

NetlifyのCDNに不具合があり、TTBFが遅延する自体が長いこと続いているので別のJAMStackホスティングサービスを探しており、now.shとして知られていたサービスが今ではVercelとなりJAMStackとの親和性が上がっているようでしたので、テスト的にサークルサイ…

Gatsby.jsのIncremental BuildがNetlify上でBeta版として利用できるようになりました www.netlify.com これは、本来は毎回リポジトリ全ページをビルドするGatsbyのビルドを、前回ビルド時のキャッシュを利用して更新が入ったページのみ追加でビルドして更新…

サークルサイトを更新した際に、ReactのUIフレームワークであるMaterial-UIを使ってモバイル表示用にサイドバーをドロワー化して開閉できるようにしました。 公式サンプルは機能を十全にアピールするためにかなり複雑だったので、最低限のコードで済むように…

お世話になっているGatsbyのドキュメントを和訳するプロジェクトが進行していたので、一部を手伝うことにしました。 こちらのリポジトリをフォークしてIssueで宣言した上で翻訳・マージすることになっています github.com 準備までの手順 Issueで翻訳する場…

TypeScript導入時はコンポーネント内に自分でPropsの型を書いていましたが、全てのコンポーネントでこれを行うと非常に面倒かつ、GraphQLのスキーマとオリジナルの型で二重に型を生成することになるので、自動生成するプラグインを導入してコンポーネントか…

サークルサイトの再構築をするにあたり、Typescriptを導入してみました。 「最近の記事」コンポーネント GraphQLで取得したデータに型を指定する interface StaticQueryProps { allMarkdownRemark: { edges: Edge[] } } interface Edge { node: { frontmatte…

はじめに この記事はJAMstack Advent Calender20日目の記事です。 qiita.com フレームワーク類の実装や特定のCMSが～～といった内容はこの記事には皆無です。 個人開発、企業のWEBサイト・ブログでそれぞれJAMstackを採用するメリット・デメリットについて考…

Gatsbyに変更した理由 Hugoは元々サイトビルドが爆速という理由で採用しました。事実、ローカルサーバを作る場合でも300ページ近いブログも一瞬（0.2秒程度）でビルドが終わりlocalhostで接続できるのでこの点については全く不満なし。 ただし、主に実際にWE…