タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
フロントエンド初心者が無事に Hugo のブログを Gatsby で一から作り直すことができた。その振り返り。 歴史 インターネットを小中学生(もはや 25 年以上前)に触り初めた頃に、HTML で文章の構造を作り CSS でデザインする、ということができるのを知って感動したけど、結局自分には何かが合わなくてそれを突き詰めることができなかった。というか、それを知ったが故にテーブルレイアウトとかがどうしても気に入らず、かといって CSS は float が難しすぎて、結局ウェブサイトを作る、という根本的な営みをずっと避けてきてしまった。 時は過ぎ、Wordpress の様なブログエンジンや Hugo の様な仕組みがあったおかげでブログを初めて続けることはできた。13 年前にレンタルサーバに Wordpress を置いて始めたこのブログも 9 年前には VPS での Wordpress 運用に
microCMS + Gatsby + GitHub Actions + S3 でJamStackのチュートリアル | DevelopersIO
What is Jamstack? ここ数年でよく聞くようになったワード。 Jamstackとはウェブサイトを構築および運用するための、技術の組み合わせです。 JavaScript・API・事前にレンダリングされたMarkupの組み合わせでJamStackとのこと。 (以前はJAMStackといってたけど、最近はJamstackだったりする) Jamstackは、 「ウェブをより速く・より安全に・より簡単に拡張できるように設計されたアーキテクチャ」であり、 生産性を最大化するツールやフレームワーク、ライブラリやワークフローなどを 組み合わせて構築されるもの、とのことです。 ※jamstack.orgより 従来のCMSではアクセスがあったとき動的にページを生成しますが、 Jamstackではデプロイ以前に必要なページを生成します。 具体的には、下記。 Webサイトのフロントエンド全体(HTM
POSTDの運用がリクルートからニジボックスに移管される際に、デザインのリニューアルと同時にコードベースをGatsby.jsに変更しました。 本記事では、運用移管に至るまでの過程を踏まえつつ、現在のPOSTDの構成を紹介します。 移管前のPOSTD 前述の通り、POSTDは株式会社リクルートのインキュベーション部門Media Technology Lab.（現新規事業開発部）で運用されていました。 最後に公開した記事は、2019年3月28日の「PHPはもうダメだ、PHP万歳！」となっています。 もともとはWordPressによる運用が行われていましたが、運用体制の関係で静的HTMLをFirebaseで公開する形式になっていました。 ニジボックスへの引き継ぎに伴い、記事の翻訳を始めとしたサイト運用を再開することになり、改めてCMSの形式に変換する必要が出てきます。 Gatsby.jsを選ぶ
サービスサイトをGatsby×Wordpress×NetlifyでJamstackなサイトにリニューアル - カミナシ エンジニアブログ
はじめまして、株式会社カミナシのエンジニア @tomiです。 カミナシは、2020年10月にサービスサイトをフルリニューアルしました。 kaminashi.jp 今回のサイトリニューアルでは、どのような構成で作ったのか、また技術選定で考慮した点をお伝えします。 Jamstackな静的サイト構成 Gatsby.jsとWordpressを使いJAMstack構成で作成しました。 最終的に以下の画像のような構成になりました。 利用した技術を並べると、 Gatsby.js Typescript StyledComponents GraphQL EsLint + Prettier Wordpress + Gutenberg Netlify 導入事例やセミナー情報など、動的な情報は記事としてWordpressに登録し、Gatsby.js側で記事をGraphQL経由で取得して表示しています。 静的なファ
今回はWordPressとGatsbyを連携して高速なサイトの作る手順について説明します。 説明する環境は以下です。 macOS Catalina v10.15.5Visual Studio Code v1.57.0node.js v16.13.1react v17.0.1gatsby v4.11.2 WordPressとGatsby用の環境を作る WordPressで記事の更新を行い、Gatsby側でそのデータを受け取って実際のサイトに表示させるようにします。それはWordPress用のドメインと、実際のサイトを表示させるためのドメインの２つが必要になるということを覚えておきましょう。 今回は本番環境でサイトを表示させる方法については説明していません。環境構築の手順とGatsbyを使ってWordPressからデータを取得して基本的なページを表示させる方法について説明しています。 まずは環
Next.jsはGatsby.jsを倒さない
最近Next.jsがめでたくv10がリリースされたこともあってNext.jsの名前を聞く機会は増えていると思います。 Next.jsの特徴で調べると「SSG+SSRが出来るフルスタックなフレームワーク」として出てきますが、そのことによってGatsby.jsは打倒されるのではないかという疑問をよく目にするようになっていると思います。 私個人の意見として、現状Next.jsがGatsby.jsを完全に置き換えられるかという問いに対してノーと言えます。 その理由は、各フレームワークがSSGを実現するその仕組みについてを知り強み弱みを理解することで納得できるものとなるでしょう。 各フレームワークによるSSGの実行プロセス 例えば、あなたがブログサービスを作りたいとして以下の要件を決めた場合、Next.jsとGatsby.jsでSSG面に関して実装の差を見比べましょう。 - url形式は /blog
JAMスタックのNetlify、静的サイトジェネレータ開発元のGatsby買収を発表。Webサイトホスティングサービス強化へ
JAMスタックのNetlify、静的サイトジェネレータ開発元のGatsby買収を発表。Webサイトホスティングサービス強化へ Webサイトのホスティングサービスを提供するNetlifyは、静的サイトジェネレータGatsby.jsの開発元であり、GatsbyをベースにしたWebサイトホスティングサービスを提供しているGatsbyの買収を発表しました（Netlifyの発表、Gatsbyの発表）。 We’re thrilled to announce that we have acquired Gatsby Inc.! Together we will build the future of composable, and empower developers with flexibility and choice in building composable web experiences.
Gatsby・Wordpress・Netlifyで開発したときの躓きと解決方法 - カミナシ エンジニアブログ
こんにちは、株式会社カミナシのエンジニア @tomiです。 前回、「サービスサイトをGatsby×Wordpress×NetlifyでJamstackなサイトにリニューアル」という記事を書き、たくさんの反響をいただきました。ありがとうございます。 kaminashi-developer.hatenablog.jp 今回は、Gatsby・Wordpress・Netlifyで開発したときの躓きについての話で、似た構成で開発される方の役に立つと思います。 逆に、違う構成の場合は、全くためにならない内容となっていますので、ご容赦を。 開発していて躓いたところ Docker上でWordpressからGraphQLでの記事の取得がエラーになる WordpressをGraphQLで読み込む際プラグインのバグがある Gutenbergのブロック作成に手こずった GutenbergブロックのTypeScri
Jamstack構成（microCMS × Gatsby × Netlify）で自社サイトをフルリニューアルした話 - NRIネットコムBlog
本記事は NRIネットコム Advent Calendar 2021 22日目の記事です。 🎁 21日目 ▶▶ 本記事 ▶▶ 23日目 🍰 はじめまして、フロントエンドエンジニアの牧と申します。 今回自社サイトのリニューアルをJamstack構成で行ったので、Jamstackとそこで採用したサービスについて書いていきます。 リニューアルの概要について Jamstackとは 今回の採用サービスと採用理由 microCMS（ヘッドレスCMS） Gatsby（静的サイトジェネレーター） Netlify（CDN/ADN） 各サービスを使ってみた所感 microCMS Gatsby Netlify 最後に リニューアルの概要について リニューアルの背景やコンセプトについては別記事にて記載しておりますので、こちらも合わせてご覧いただければと思います。 tech.nri-net.com Jamsta
I’m excited to announce that Gatsby Inc. is joining Netlify in order to spread the growth of Gatsby and composable architectures across the entire web. To see how we got here, let’s start by rewinding back in time. Eight years ago, I was a front-end developer, and I fell in love with React. At the time, React was a tiny emerging framework for apps, but I wanted to build a website with it. So I too
個人で Gatsby.js を使い始めたのですが、検索して見つかる Gatsby.js の TypeScript 化についての記事の情報が少し古かったので、自分で書き直してみました。 順を追ってスターターパッケージを TypeScript 化していきます。 なお今回のコードは全て下記リポジトリにあります。 もし、何かエラーになった際は参照してみてください。 この記事は以下のバージョン時点の情報です。 Gatsby.js: 2.24.66 gatsby-plugin-typegen: 2.2.1 0. プロジェクトの作成 gatsby コマンドを使うめにgatsby-cliの追加。
はじめてGatsbyを使ってページをビルドしたとき大量のJSファイルが同時に生成されているのを見つけました。 単純にHTMLだけを生成すると思っていたので少し予想と異なり混乱しましたが、勉強を進めていくとGatsbyのより便利な側面が見えてきました。 この記事の概要 Gatsbyはプリレンダリングをしている クライアント側でページを生成することも可能 用語の整理 静的レンダリング 静的レンダリングは 「全てのページ分の HTML ファイルをあらかじめ生成しておき、それを配信するという方法」 です。 先にファイルを生成しておくことでサーバーの計算量を減らすことができ、素早くコンテンツを提供することが可能です。 また、静的ファイルをホスティングできれば良いので S3 や Netlify などにデプロイすることも可能です。 静的レンダリングの問題点はリクエストが予測できない場合にあります。 検索
Netlify Acquires Gatsby Inc. to Advance Composable Architectures
SAN FRANCISCO – February 1, 2023 – Netlify, the leading platform for modern web development, today announced that it has acquired Gatsby Inc., providers of an advanced cloud platform for web delivery and content orchestration, and creators of the open source framework Gatsby. The acquisition of Gatsby is Netlify’s latest move to support its vision of empowering developers at companies such as Twil
タイトルの通り、Gatsby.js, TailwindCSS, Netlifyの組み合わせでフロント技術オンリーのフリー素材サイトを作ってみたので、使っている技術とサイトの紹介をしたいと思います。 Qiitaに書くかZennに書くか(同時にどちらにも投下するか)迷ったんですが、Zennにしました。 作ったものと動機 「FLAT SVG DESIGNS」というSVGアイコンやイラストを無料で配布する素材サイトを作成しました。アイコンはまだ130個ほどしかありませんが、順次追加していきます。アイコン作成からサイト作成まで全て一人でやってますので、更新はゆっくりになると思います。(1週間に10個が目標) FLAT SVG DESIGNS アイコンはこんな感じのデザインです。 ここがこだわり サイト全体でPNG形式などのラスター画像を使っているのはファビコンのみ。それ以外は全てSVGファイルで画像
正直、無料プランで十分です。 使い方 ツールはどうこう言う前に一回触ってみるのが大切なので早速触っていきます。 どんなもんか見たいという人はここからウェブサイト見れます(ウェブサイトもノーコードで作られてるっぽい) サインイン/サインアップ 下記のページからGoogleアカウント、GitHubアカウント、メールアドレスで登録することができます。 エクスポートとかがしたいのであればGitHubアカウントで登録しておくと後々楽です。 プロジェクト作成 サインアップが完了すると、このようなページに飛ばされます。 ここがダッシュボードでプロジェクトの管理や作成が可能です。 真ん中にある「Start Building」と書いてある黒いボタンを押してプロジェクトを作成します。 黒いボタンを押すと「1から作るか」「テンプレートを利用するか」を選ぶことが可能です。 今回は試しなのでなにか良さげなテンプレー
Gatsbyを辞めた人が知らないGatsbyの便利機能
URL は 2023-no-gatsby だが、これは 「2023 の gatsby」であって「NO！」ではない。「YES！」だ。 定期的に 「Gatsby は良いぞ」なブログを書いていますが今日もそれを書いていく。 ブログが新しくなりました(2 ヶ月前に)ので、その報告と技術的な解説 なぜ私は Gatsby でブログを作っているのか Gatsby3 はいいぞ Gatsby は React を使ったハイパフォーマンスな静的サイトジェネレータの先駆け的な存在だ。リリース当初から チャンク最適化、画像の最適化、CSS の最適化などが実装されており、後のさまざまな SSG FW に影響を与えた。 Next.js もその一例であり、v9 あたりで SSG がサポートされたときにはこれらの多くの機能が入り、定期的に Gatsby の機能を取り入れている。残念ながら Next.js で SSG ができ
Popularity of top frameworks on Netlify: Next.js, Gatsby, create-react-app
We run an annual survey of web developers and have shared that data with the community in 2020, 2021 and 2022. While that data is about web developers as a whole, we often get questions about what framework usage looks like on Netlify specifically. So we dug into our data and here’s what we found. Netlify is a pioneer of the composable web, sometimes called the Jamstack: this architectural approac
JSer.info #530 - Gatsby v3がリリースされました。 Gatsby v3 Incremental Builds in OSS, new Gatsby Image, and more | Gatsby Gatsby v3.0 (March 2021 #1) ローカルでは実際にアクセスされたページだけをビルドすることで、全体を再構築せずにビルドする挙動がデフォルトとなっています。これによって必要なページだけをビルドするため、開発時のビルド待ち時間を少なくしています。 破壊的変更としてNode.js 12未満のサポート終了、React 17/webpack 5/ESLint 7へアップデート、globalのgraphqlではなくimportして使うように変更、APIの変更などが含まれています。 マイグレーション方法については、次のドキュメントに丁寧な解説が書かれています。
JSer.info #559 - Web Componentsを扱うライブラリであるLit 2がリリースされました。 Announcing Lit 2 stable release – Lit Lit 2.0 Release Livestream - YouTube Lit 2は今までLitElement 2.xとlit-html 1.xという別々のパッケージになったものを統合していて、litという新しいパッケージ担っています。 classベースのDirectives API、非同期Directives、Reactive Controllersの追加されています。 要素全体に対して影響を与えられるElement expressions、タグ名などに変数を使えるStatic expressionsなども追加されています。 また、実験的にSSRのサポートなども追加されています。 LitElem
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
Netlify Acquires Gatsby, Its Struggling Jamstack Competitor
Join our community of software engineering leaders and aspirational developers. Always stay in-the-know by getting the most important news and exclusive content delivered fresh to your inbox to learn more about at-scale software development.
Gatsby v3 Incremental Builds in OSS, new Gatsby Image, and more | Gatsby
tl;dr: We are excited to announce Gatsby v3.0.0! This new version of Gatsby’s core framework introduces massive improvement to the developer and user experience. Upgrade now using our v2 to v3 migration guide. Meet the latest Gatsby Ever since the very first version of Gatsby we’ve simplified the building of performant React sites for web developers. Optimized loading, prefetching, responsive imag
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
「Muddy Web」はMuddy = 泥臭いとして、Webフロントエンドの開発現場における話やケーススタディなど泥臭さのある話をもとに学びを得ることを目的として開催しています。平山氏と三好氏からは、株式会社CAMにおける「Gatsby」の活用方法について発表がありました。全2回。前半は、自社の占いサービスの基盤「Fensi」の概要と「Gatsby」のシャドーイング機能について。 占いサービスを支える基盤「Fensi」 平山大暉氏（以下、平山）：「CAMがGatsbyで新規サービスを爆速で開発できるワケ」というタイトルで話します。よろしくお願いします。 自己紹介から始めます。2019年新卒の平山大暉です。趣味ですが、最近は外に出ることがなくなってしまったので、掃除にはまっています。特にお風呂場とか洗面台とか、水回りの掃除に最近はまっています。 三好良弥氏（以下、三好）：2020年新卒の株式
JSer.info #618 - Parcel 2.8.0がリリースされました。 Parcel v2.8.0 Release v2.8.0 · parcel-bundler/parcel Parcel 2.8.0では、ViteとTurbopackのベンチマーク比較から着想を得たパフォーマンス改善が含まれています。 Is Turbopack really 10x Faster than Vite? · Discussion #8 · yyx990803/vite-vs-next-turbo-hmr 大規模なアプリケーションでのビルド時間とバンドルサイズの削減、HMRのincremental buildのパフォーマンス改善、Tree Shakingの改善によるバンドルサイズの削減などが含まれています。 Deno 1.28がリリースされました。 Deno 1.28: Featuring 1.3
「Gatsby・Next・WordPressから見た「いまどきのレスポンシブイメージ」」について記述した記事です
GatsbyでMarkdownをソースにするブログを作ったらサイト内検索が欲しくなった。 検索自前で作るの面倒…とはいえ検索がないブログは不便なんだよなあ…。 他所に頼るならお手軽なGoogleのカスタム検索か、有能なAlgoliaを使うのが手っ取り早いが、Googleのカスタム検索はUIがカスタムしづらく、Algoliaは有料プランだとお値段が結構高い。 結果自前で渋々実装しなければならないケースもままあると思う。 で、実際にサイト内検索の実装をやってみた結果このメモが生まれたわけだが、これくらいの手間をかけないと日本語の検索として満足な動作を得られなかった。 やったこと Markdownからキーワードを抽出したJSONを生成キーワード抽出はKuromoji.jsを利用する最近の単語に反応させるため mecab-ipadic-neologd の辞書を追加mecab辞書をkuromoji辞
![[Gatsby] Flexsearch × Kuromoji による日本語フレンドリーなサイト内検索の追加](https://cdn-ak-scissors.b.st-hatena.com/image/square/dd7038b5c75912db882c6bfa990d99b978614c2f/height=288;version=1;width=512/https%3A%2F%2Ftenderfeel.xsrv.jp%2Fwtn%2Fwp-content%2Fuploads%2F2021%2F08%2Fflexsearch-lang-process.png)
静的サイト生成に特化したReactのフレームワークGatsby.jsですが、せっかくなら作ったサイトのホスティングまでさくっとやりたいなと。 ターミナルから簡単にビルド&S3へのデプロイができたので、その方法を紹介します。 前提 Macのターミナル Node.jsがローカルにインスロール済み AWSのアカウントを持っている 1. Gatsbyアプリの立ち上げ 何はともあれGatsby.jsのスターターをローカルで立ち上げましょう。 Gatsby.jsが入っていない人はインストール。
ベルリンオフィスの小西です。 Gatsbyでは、ビルド処理の効率化のためにインクリメンタルビルドという仕様があります。これはコードやデータソースの変更内容に基づき、更新が必要なHTMLファイルのサブセットのみを生成することで、ビルドの高速化を図る機能です。 非常に便利な機能で、静的サイトであることを意識させないくらい高速なビルドを行うことも可能なのですが、困ったことにGatsbyには「インクリメンタルビルド」と名のつくビルド方法が複数あります。 それぞれ動作する条件や環境が異なるため、今回はGatsbyサポートにもヒアリングしつつ、それぞれの概要を整理してみました。 各ビルドの説明 Incremental buildsと名のつくビルド方法は、大きく分けて3つあります。 1. Incremental builds Gatsbyのバージョン3からコアとして組み込まれている、インクリメンタルビル
それから、黄金の帽子も被るんだ。もし彼女が喜ぶんだったらね。 もし高く跳べるなら、彼女のために跳んであげるんだ。 彼女がこう叫ぶまで。「大好き、金ぴかの帽子を被って、高くジャンプするあなた。 あなたは私のもの！」 Then wear the gold hat, if that will move her; If you can bounce high, bounce for her too, Till she cry “Lover, gold-hatted, high-bouncing lover, I must have you!” - Thomas Parke D'Invilliers Chapter I 若くてまだ傷ついてばかりだった頃、父が言ってくれたことがある。今日に到るまで、父のこの言葉に思いを馳せては、自分なりに考えてきた。 「人の批判をしたくなることもあるだろうが」そう父は
ReactフレームワークのGatsby.jsとNext.js、VueフレームワークのNuxt.js、これらの主要なJSフレームワークで静的サイトを構築して得た気づきをご紹介します。 【結論】どれか1つ選ぶならGatsby.js Nuxt.js、Next.js、Gatsby.jsの順番で使いました。技術レベルのブレもあるため、完全にフラットな視点で選ぶのが難しいのが本音ですが、どれか1つ選ぶならGatsby.jsにします。その後、Next.js、Nuxt.jsと続きます。 詳細は以下に続きます。 開発環境の違い Next.jsがベストです。Zero Config（ゼロコンフィグ）を謳っていて、文字通り「設定が不要」です。もちろん、拡張することもできます。 私が行った拡張はたった1つ。イメージのドメイン設定だけです。 // next.config.js module.exports = { i
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の静的ページ遅延生成機能であるDSGを使ってビルド時間を短縮してみた。 | DevelopersIO
どうも、ベルリンオフィスの小西です。 本日はGatsbyのビルド時間を短縮する仕組み DSG を使ってみたので紹介します。 GatsbyのDSGってなぁに？ DSG (Deferred Static Generation)はGatsbyのバージョン4から追加された機能で、一部のページの生成を、ビルド時ではなくアクセスがあって初めて行います。 自分は 静的ページ遅延生成機能 と訳すとしっくりきました。 Gatsbyは静的ページ生成フレームワークのため、基本的にサイトビルド時に全ての静的ページを生成します。 これによりユーザーがどのページをリクエストしても高速なページの表示が可能になるのですが、一方でページ数が増えるに従ってビルド時間も比例して増えていくことになります。 数百ページ程度なら問題になることはないと思いますが、ヘッドレスCMSなどを使って数千ページ以上の規模になってくると、一回一回
華麗なる Gatsby + WordPress のメールフォーム実装方法 – Contact Form 7 活用例 Gatsby + WordPress 構成の場合におけるメールフォームは、どのように実装すればいいだろうか？ このエントリーでは、Gatsby のメールフォームから Contact Form 7（WP プラグイン）にアクセスしてメール送信する方法を共有したい。 はじめに Netlify にホスティングするならば Netlify Forms を選ぶだろうし、それ以外では、ホスティング先に関わらず静的サイトからアクセスできるフォームサービスも、いくつか選択肢がある。その、いずれもリーズナブルで活用できるし、専用の Web API エンドポイントとアクセスキーを設定するだけ、という簡単なものだ。 ただ、メールのフォーマットに不自由さがあったり、利用回数による課金の可能性を考えると不
Comparing Gatsby and Next.js for website development
Gatsby and Next.js, from a first glance, could look pretty much the same. Both are React-based frameworks, do SSR, SSG, have big communities. We actively use both technologies in our agency, but we think that they fit better for different use cases. I often get asked why we use Gatsby instead of Next.js for websites development? This article will explain it in detail. Choosing the technology for w
ヘッドレスCMSのContentfulではリッチテキストで文章を書くことができます。 今回はContentfulと組み合わせることが多い静的サイトフレームワークのGatsby.jsでリッチテキストを出力する方法を備忘録として記載しておきます。 前提 Contentful & Gatsbyですでにアプリを運用している 1. Contentfulでリッチテキストを投稿する Contentful側のContent Modelで「Rich text」というフィールドタイプが用意されています。 シチュエーションに応じて、エディタから不要なHTMLタグを隠すこともできます。 以上のフィールドを追加したのち記事を投稿しておいてください。 2. リッチテキストをレンダリングするプラグインのインストール Gatsby.js側で、プラグインをインストールします。 import { BLOCKS } from
GatsbyからGTM&Google Analytics(GA4)にイベントデータを送信してみる | DevelopersIO
どうも、ベルリンオフィスの小西です。 UAからGA4になって色々大変なGoogle Analyticsですが、GTM(Google Tag Manager)を通じてGAタグを埋め込んでおけば、基本的にはJamstackなサイトでもうまくページビューなどを検知してくれます。 今回は自分で設定が必要な部分 = 「フォーム送信などのイベント発生データをGoogle Analyticsに送信する」 を行なってみたいと思います。 前提 Google Analytics（GA4）、GTMの基本設定は終わっている Gatsbyのセットアップが完了している セットアップ記事は→ 1. Gatsby立ち上げ GTM側の準備 トリガーの作成 重要なのは [Event name] で、アプリ側から送信するキー名と一致させる必要があるため [formSubmit] としておきます。トリガー条件は [All Cus
概要 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 --
GitHub - cometkim/gatsby-plugin-typegen: Let's give developers using GatsbyJS better DX with extreme type-safety
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
はじめに なんか既視感のあるタイトルから始まります、今回の記事。本稿では、「これからGatsbyJs」を使ってブログ・メディアを作ってみたい皆さんに向けて、私がハマって辛かった情報をご提供できればと思います。 さて、本題に入る前に、ひとつだけ言わせてください。「みんな、もっとContentful + Gatsbyの構成を使って！」 …いや、あのですね、情報が少なすぎませんか？どうして浅瀬の民がちょっとしたブログを作るためにGatsby本体のissueをアサリに行かなくてはならないのか。 あ！そっかぁ、潮干狩りか！え、あ、ちょっまっ…ｺﾞﾝ! ｲﾃﾃﾃ… 今回の潮干狩り会場のご紹介 では、今回の潮干狩り会場についてご紹介させていただきます（強い意志）。会場となる干潟は以下の要素で構成されております。こちら事前情報程度の簡単なものですので、詳しくは各項目のリンク先をご覧ください。 Gatsby
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンド初心者がGatsbyでブログを作り直した話 - As a Futurist...
POSTDをGatsby.jsベースに変更しました | POSTD
WordPressとGatsbyを連携して高速なサイトを作る - 環境構築から基本的なページ作成まで
Gatsby is joining Netlify | Gatsby
Gatsby.jsのTypeScript化 2020
Gatsbyは単なるReactベースの静的サイトジェネレータではなかった話 | DevelopersIO
Gatsby.js, TailwindCSS, Netlifyでフリー素材サイト作ってみた
TeleportHQでノーコードウェブサイト開発してみた(NextJS・NuxtJS・Gatsbyにエクスポート)
2021-03-09のJS: Gatsby 3、Electron 12、ブラウザのライフサイクルの変化
2021-09-28のJS: Lit 2、Gatsby 4 beta、Partytown(Third-Party Script into Worker)
Gatsby.jsの新機能「File System Route API」を試してみる
オープンソースの静的サイトジェネレータ「Gatsby v3.0.0」がリリース
サービスリリースごとに開発が速くなる 「Gatsby」で開発が爆速にできる理由
2022-11-17のJS: Parcel v2.8.0、Deno 1.28(`npm:`の対応)、Gatsby 5、Nuxt 3
Gatsby・Next・WordPressから見た「いまどきのレスポンシブイメージ」 | エビスコム
[Gatsby] Flexsearch × Kuromoji による日本語フレンドリーなサイト内検索の追加
Gatsby.jsで作ったサイトをさくっとS3でホスティングする | DevelopersIO
Gatsbyの「インクリメンタルビルド」がたくさんあるので整理した。 | DevelopersIO
The Great Gatsby 第1章 - The Great Gatsby 翻訳
Gatsby.jsとNext.jsとNuxt.jsを比較する
Introducing Gatsby 4 | Gatsby
華麗なる Gatsby + WordPress のメールフォーム実装方法 – Contact Form 7 活用例
Contentful & Gatsby.jsでリッチテキストを扱う | DevelopersIO
Gatsby.js製ブログで記事毎にOGP画像を自動生成する | kyabe.net
【Gatsby + Contentful】 僕のRich Textに救済を
emiri2.nm.bex.jp
amidax.hateblo.jp
bud-2020.hatenablog.com
hochi.news
arekoresore.biz
my-best.com