意外なところに手を出してきたと思われるかもしれませんが、きっかけは WordPress ＆ Gutenberg なんです。 2015年の Automattic社 Matt Mullenweg 氏の "Learn JavaScript, Deeply" という言葉。そして、バージョン5.4までたどり着いた現在の WordPress と、見え始めた Block Based Theme。 世間では WordPress=PHP という認識がまだまだ強いわけですが、とっくに、Gutenberg=JavaScript（React）なわけです。 すでに見えている未来を考えれば、WordPress=JavaScript と言われる時代もそう遠くはないのではとさえ思います。 なので、自分たちも JavaScript（React）をもっと身近なものにしておかなければと動き始めました。 入門者の通常ルート通り、
「Vercel + freenom + Getform.io」構成で「爆速 + 管理費完全無料」のポートフォリオをGatsbyJSで作ったら幸福度が高まった話 - Qiita
「Vercel + freenom + Getform.io」構成で「爆速 + 管理費完全無料」のポートフォリオをGatsbyJSで作ったら幸福度が高まった話ReactFreenomgatsbyVercelGetform.io こんにちは(๑╹ω╹๑ ) つい先月のエントリでGatsbyJSの魅力をお伝えしたばかりですが、 今日はそのGatsbyJSで開発したポートフォリオサイトの構成を紹介します🤗 ↓ 開発したポートフォリオサイトです 今回のエントリとは関係ないですが、 技術構成は下記のとおりです🤝 React GatsbyJS Less ポートフォリオサイトの構成について☺️ 管理費完全無料は本当？🤔 本当です👨💻 SPAサイトの静的ホスティング 独自ドメイン お問い合わせ管理 全ての管理費が無料です✨ ※ 2020年8月30日現在 ※ 詳細は以降に説明 静的ホスティングサ
基礎から始めるGatsbyJS入門 | アールエフェクト
Gatsbyとは GatsbyはStatic Site Generator(静的サイトジェネレーター)でReactをベースに開発されているフレームワークです。Gatsbyを理解するためにはJavaScriptだけではなくReact, GraphQLなどの基礎知識が必要となります。 Gatsbyではデータを取得する際にはGraphQLを利用します。GraphQLを使って内部リソースのMarkdownファイル、データベース、CSVファイルまたは外部リソースのContentfulやWordPressなどさまざまなリソースからデータを取得することができます。WordPressのテーマに対応するStarter(スターター)やPlugin(プラグイン)も豊富にあるため効率的にサイト構築を行うことができます。 Gatsbyを使いこなすためにはPluginにどのようなものがあるかも理解する必要があります。
2019/02/16 11:00 当ブログでも使用されているReact用の静的サイトジェネレータGatsbyJsのコンセプト、技術的な仕組みや、�使い方について紹介します。 GatsbyJsとは GatsbyJsは、React用に作られたモダンで高速なサイトを作成できる静的サイトジェネレータです。 当ブログもGatsbyJsで構築されていますが、GatsbyJsのサイトのトップページに書かれている様に、驚くほど簡単に爆速モダンWebサイトを構築できます。 Build modern, beautiful, secure, blazing fast, apps and websites with React. そんなGatsbyJsは大きく分けると以下の4つのコンセプトに基づいて実装されています。 モダンなWeb技術を手軽に超絶パフォーマンス豊富なデータソースへの対応安価でスケーラブル・セキュ
ShopifyとGatsbyJSでヘッドレスコマースサイトを作る方法 | non-standard world株式会社
こんにちは、代表兼エンジニアの高崎です。 寒くなってまいりましたが、皆様お体の調子は大丈夫でしょうか。 私達の会社では「世界観を作ってモノが売れるを、すべての人へ。」をミッションに主に製造小売のお客様のECサイトを制作しているのですが、現在、高速で開発効率の高い次世代のECサイトの作り方「ヘッドレスコマース�」を研究しています。 この記事では基本を共有できればと思います。 ヘッドレスコマースとは 従来型のECサイトが「デザイン（フロントエンド）」と「データ（バックエンド）」が一体化していたのに対し、ヘッドレスコマースは、「デザイン」と「データ」がきれいに分離したコマースサイトの作りです。 ヘッドレスを採用する理由 主にサイトの動作速度と開発効率を上げることができることから海外のD2Cブランドのサイトで採用が進んでいます。 とくにサイトの表示速度が２秒遅くなるだけで直帰率は50%増加すると言
GatsbyJS + NetlifyでWordPressを記事管理システムにしちゃう方法 | HPcode（えいちぴーこーど）
最近流行り始めてきているWordPressを管理画面としてだけ扱い、表向きのサイトの表示は、あらかじめ静的サイトとして変換したものを出しちゃうという方法です。 色んな技術が絡み合っていて、ほぼWordPressしか触ってこなかったわたしは頭爆発しそうでしたが、全容が体感として理解できると、なんとなく腑に落ちるようになります。 全体の構成は、Gatsbyの公式トップページの図が分かりやすいです。 登場人物としては以下の通り。一般的なWordPressしか触ってこなかった人にとっては馴染みがないかもしれませんが、実際に一度流れを掴んでしまえば理解できるはずです（実体験） WordPressの管理画面で記事を更新する。この記事がデータ元となる。 GatsbyにてWordPressからデータを取得してHTML、CSS、JavaScriptに変換する。（SPAとして動く） Gatsbyでビルドされた
GatsbyJSのIncremental Buildsで静的サイト制作が劇的に変わる - hiro08gh
こんにちはhiro08です。 先日GatsbyJSのブログで、Incremental Buildsのリリースがアナウンスされました。これはコンテンツに変更があった場合、変更部分のみを再ビルドする仕組みです。今後のJamstack/静的サイト制作を劇的に変える非常に強力な機能です。 補足 現時点ではGatsby CloudのProfessionalプランで使える機能です。まだまだ試用機能といった感じです。 www.gatsbyjs.org いままでの課題点 いままでのGatsbyJSには課題がありました。それは、変更があった場合すべてのページを再ビルドしてしまうことです。少ないページ数の場合あまり影響ないですが、数千から数万ページ以上の大規模な静的サイトでは、 一部の変更でもすべてのページが再ビルドされてしまうため、ビルド効率が悪い(CI/CDを使ってる場合消費量が多くなってしまう) ビルド
パフォーマンスが重視される昨今、サーバサイドレンダリングを採用したり、静的サイトジェネレーターを使用して必要なファイルをあらかじめ生成してからホスティングするサイトが増えてきています。 これまでもJekyllをはじめとして静的サイトジェネレーターはいくつかありましたが、Webフロントエンド界隈では普段から使用しているスキルセットで扱えるジェネレーターとしてNuxt.js、VuePress、GatsbyJSなどが話題を呼んでいます。ジェネレーターの機能をCIに組み込むことで、サイトの構築をVue.jsやReactで行いながら静的ファイルの生成からデプロイまで一気に行うこともできます。 中でもGatsbyJSはテキストなどのデータソースをWordPressやDrupalから取得したうえで静的サイトを生成する機能を持っており、これまでCMSで自分のブログを運用していた方がGatsbyJSに乗り換
What would you like to call your site? （あなたのサイトを何と呼びたいですか？） ✔ · Example GatsbyJS 2022 What would you like to name the folder where your site will be created? （サイトが作成されるフォルダにどのような名前を付けますか？） ✔ atelier/ example-gatsbyjs-2022 ✔ Will you be using JavaScript or TypeScript? （JavaScriptまたはTypeScriptを使用しますか？） · TypeScript ✔ Will you be using a CMS? （CMSを使用しますか？） · No (or I'll add it later) ✔ Would you like
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分のコンテンツになります。 非常に質の高いチュートリアル動画ですが、全編英語です。しかし、英語が聞き取れない方でも動画を見ながら写経すれば大丈夫です。実際に、私は英語が全くわかりません笑 コンテンツ内容 動画の概要をざっと
WordPress 5.5 以降のロードマップも見え始め、年内には Full Site Editing (FSE) ＆ Block-based Themes が出てくるようで、非常に楽しみです。 また、Block-based Themesを見ているとどうしても SSG（静的サイトジェネレーター）っぽく見えるもので、WordPress が Jamstack を気にしないわけないよな… などと妄想してみたりしています。 一方、静的サイトジェネレーター周辺では、打倒WordPressなんて話をよく見かけます。気持ちはよくわかります。最近のWordPressは色々と大変ですし…。 また、コストをかけずにサイトを公開できる時代になって、WordPress のためのサーバーコストが気になり始めたという話もよく見かけるようになりました。 このあたりを考えれば、WordPress からの避難先として、静的
惜しまれながら終了した、はてなグループの日記を静的サイトとして生成するジェネレータを GatsbyJS で作った - 2nd life (移転しました)
はてなグループが終了してしまい、はてなに頼んでエクスポートしてもらった MovableType 形式の日記が記載されている .mt データは手元にあれど、手元のストレージの肥やしになっている方はいませんか、私はそうでした。 というわけで、せっかく10年以上書いていた日記がWeb上から消えてしまって悲しいので、もう一度再び公開できるように静的サイトジェネレータを作った。 https://subtech-secondlife.netlify.com/ (サブテク日記再び・懐かしのデザイン…) https://github.com/hotchpotch/hatena-group-static-generator (ソースコード) これを使えばみなさんはてなグループ日記をまたどこかに公開できるので、よかったら公開しよう!!1 GatsbyJS を使って作った感想 静的サイトジェネレータは一昔前は
GatsbyJS 現代のWordpress
またベースとなっているフロントエンドフレームワークベース以外の SSG と各種比較したものは以下のようになります。 (Next.js と Gatsby の比較 より引用) 静的サイトジェネレーター(SSG)が注目されている理由 近年、SSG が人気となり注目を集めてきています。(上記 Github の Star 数の多さにも表れています) このように SSG が注目されている最も大きな理由は 静的サイトだけで動的サイトのような Web サイトを作成できるから です。 静的サイトについて Web サイトには 動的サイト と 静的サイト の 2 種類が存在します。 動的サイトとは アクセスした時の状況に応じて異なる内容が表示されるWebページ であり、静的サイトとは 何度アクセスしても同じものが表示されるWebページ を指します。 静的サイトの特徴 動的サイトと静的サイトでは多くの場合、それぞ
Gatsbyを調べ始めた頃にたどり着いた、こちらの記事。 Reactベース静的サイトジェネレータGatsbyの真の力をお見せします https://qiita.com/uehaj/items/1b7f0a86596353587466 当時はさっぱりでしたが、Gatsbyを色々と使うようになって、随分と理解できるようになってきました。 そして、この記事の中で当時から引っかかっていたのが、 …「クエリの結果」のみをJSONとして合わせてデプロイし、ブラウザ内ではGraphQL DBクエリ結果取得の代りにJSON値を使うことで… というお話。 ん？ もしかして…ということで、テストでこんなコンポーネントを用意してみました（書籍のサンプルに合わせています）。 import React from "react" import { graphql, useStaticQuery, Link } fro
Gatsbyjsのチュートリアルがとてもわかりやすくて勉強になったので、 自分で内容を忘れないためにWordPressのデフォルトのテンプレートに近いものを作ってみました また、私はGatsbyjsやWordPress初心者です、よろしくお願いいたします 作ったのはGitHub Pagesで見れます↓ 私が作成したコードは以下です 0. gatsbyの雛形を作成
こんにちはかみむらです。個人的な肌感で、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アーキテ
ローカルで開発中のページをスマホで確認したい場合は、プライベートIPでアクセス可能にしてあげればスマホでも開発中のページをスマホでも見ることができます 実行コマンド gatsby develop -H 0.0.0.0 実行後 スマホで赤枠で囲んでいるURLにアクセスすると開発中のページが、閲覧できます。 ※ 接続できない場合は、同一のネットワーク環境出ない可能性があるので、ネットワークの接続先を確認しましょう。
ようこそ！GatsbyJS日本語サイトへ！ GatsbyJS勝手に日本語翻訳サイトです。→ 公式サイトへ(英語) このサイトは管理人である[ヤル蔵(@xtuberz)]が自己学習のため、勝手にGatsbyJSのサイトを翻訳しています。 手書きでピタピタ書いていきますのでよろしくお願いします。 はじめは翻訳しようと思っていたのですが、意味のない繰り返しや読まなくても良い部分が多く、堅苦しい言い回しがあり翻訳したとしても読みにくいと感じてしまったので、私が公式サイトの文章を読んで必要な部分をまとめています。 雰囲気はGatsbyJS翻訳サイトではありますが、私の独断と偏見で綴った「GatsbyJSまとめ」と言う立ち位置で考えて頂けると幸いです。 Gatsbyとは？ GatsbyJSはReactをベースにしたオープンソースフレームワークです。 最近流行っている「静的サイトジェネレーター」の１種で
本文書は公開済みの”基礎から始めるGatsbyJS入門”の続きです。前回の文書でGatsbyのインストールやページの遷移、、コンポーネント作成、レイアウト、CSSの設定の確認を行いました。本文書ではGraphQLなど読者のみなさんがまだ学習した経験がないまたは馴染みのない技術も出てきますのでぜひこの機会にGatsbyだけではなくGraphQLがどのようなものかどのように利用されるのかということも合わせて理解してください。 GraphQLの使い方 GraphQLとは GraphQLはREST APIよりも効率的にデータを取得できる新しいAPIです。REST APIでは1つのEndpoint(URL)から得られるデータが十分ではない場合、それぞれのデータが取得できる複数のEndpoint(URL)に対して複数のAPIのリクエストを送信する必要があります。しかし、GraphQLでは1つのEndp
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
はじめに 本記事は https://tech-blog.yoshikiohashi.dev/posts/publish-npm-gatsbyjs-theme のクロスポスト記事になります。 このブログのThemeにも使用しているGatsbyJSですが、Themeを別途作成してnpm公開してみました。 使用してみたい方はこちらからどうぞ。 npm install -g gatsby-cli gatsby new hoge-blog https://github.com/yoshiki-0428/gatsby-all-pack-theme-starter.git なぜつくったか GatsbyJSは早くて軽くて使いやすい！ というのは周知の事実なのですが、如何せんタグ付けだったり、カテゴリー機能、ページネーションの機能、検索機能、RSSの作成など、ブログの機能に必須な機能は自分で実装しないといけ
動的CMSがサイト開発の主流の中、静的サイトジェネレータ（SSG）が注目されている。このサイトもWordPressからGatsbyJSに乗り換えた。SSGはWordPressの代わりになるのか？ そのことをまとめた記事です。 この数年は、ウェブサイトを丸っと制作する案件が多い。サイトの内容や予算、そして知名度からくる「通りの良さ」から、サイトの基盤は大抵の場合WordPressに落ち着くわけだが、中には「コンテンツを簡単に追加したいけど、WordPressを使うような規模でもないんだよな」というものも多く、もっと柔軟でフットワークの軽いCMSがないものか、漠然と思っていた。 一方、この春から夏にかけて、大規模なWordPressベースのサイトをほぼ一人で設計・開発していた。こちらはカスタムフィールドを使いまくりで、もはやWordPressの必然性あるの？というもの。そんなこんなで、正直もう
Gatsby is a React-based free and open-source framework that allows developers to build optimized web apps following the latest web standards. It’s a static site generator like Hugo and Jekyll. However, Gatsby does better in many aspects than Hugo and Jekyll as you can see from this comparison. You don’t need Gatsby to deliver optimized web apps. You can do it yourself. Be prepared, though, for lon
静的サイトジェネレータで構造化データマークアップを入れた知見【GatsbyJS】 こんにちは Nash です。GatsbyJS でブログを構築しています。 この記事は「静的サイトジェネレータ(GatsbyJS)で構造化データマークアップを作り込むにあたってやり方・ハマったポイント」の記事です。 結論を箇条書きにしていきます。 構造化データマークアップって？ ← Web ページのメタ情報。Google のクローラに詳細を教えるために必要。 どう表現するの？ ←JSON 形式でページに埋め込んでおくのがベター。Person みたいに繰り返し使うようなものは Entity が決められている。 どう作っていくのが良い？ ← Google のツール・ドキュメントで Try＆Error が確実。 作る際の効率化 ← ローカルで開発して Ngrok 経由で Public に開放してツールで確認。 で
動機 👶「GatsbyJSのブログ、CSS書いてみたけど…ダサくね??? (👶リサーチ中)おしゃれなブログにはみんな画像🗻が入ってる。つまり画像を入れればおしゃれになるのでは?助けて、🧛♀️」 🧛♀️「あい」 今回の環境: Gatsby 2.23.3 React 16.12.0 コードはこちら: https://github.com/yuriacats/yuriacatsblogs 完成品はこちら: https://yuriacats.site 手順表 Index.mdのヘッダー部分の書き換えとデフォルト画像の設定 ←今回 blog-post.jsの変更 ←今回 index.jsの変更 ←次回やる OGP画像の設定 ←次回やる(予定) 投稿通知設定 ←次回やる(予定) Index.mdのヘッダー部分の書き換えとデフォルト画像の設定 Index.md
既刊「GatsbyJS Guidebook」を改訂して技術書典10で頒布したものです。 ■ 概要 第1章ではReactのおさらいをしつつJSXでポートフォリオを構築します。最後にReact単体でウェブサイトを作る際のデメリットを確認し第2章でGatsbyに入門します。 第2章ではポートフォリオの要件を達成するGatsbyのサイトを作成します。Gatsbyのルーティング、データの取扱、Netlifyのデプロイまで一通りサイトが作れるレベルまでやります。 第3章では記事データを外部のmicroCMSというHeadless CMS（Viewを持たないCMS）に保存し、そのデータをもとにサイトを構築する方法を学びます。 第4章では公式情報への当たり方やGatsbyをより便利に扱うためのテクニックを紹介します。 ■ 対象読者 本書では、次のような方を対象読者として執筆しています。 • Git/Gi
本記事では、GatsbyJS + microCMSの構成でオウンドメディアを作成していくチュートリアルになっています。作成イメージはライターと記事のコンテンツを結び付けて、複数人で編集できるものを想定しています。 前提検証した環境は以下の通りです。 GatsbyJS v2.26.1gatsby-source-microcms v1.0.1セットアップまずはGatsbyJSのプロジェクトを作成してみましょう。公式で用意されているCLIを使います。 $ npx gatsby new gatsby-microcms-mediaそして開発サーバーを立ち上げてください。 $ yarn run develop無事に開発サーバーが立ち上がってるのを確認してください。 microCMSの用意をする次に、microCMSでAPIを作成していきます。手順は下記に用意しました。詳細については、microCMSの
GatsbyJSで作っているブログにタグ機能を導入した
はじめにギフティ Advent Calendar 2019 - Qiitaの1日目の記事。このブログにタグ機能を導入したので、その時の手順を解説する。基本的に公式の記事に従えば良いのだが、差分が分かりづらいのと、自分で理解した内容を補足したいので、記事にした。 前提このブログはGatsby公式のgatsby-starter-blogをベースに作られている。 gatsbyjs/gatsby-starter-blog: Gatsby starter for creating a blog デモこの記事に付けられているタグ（「GatsbyJSで最強のブログを作る」）をクリックすると、そのタグが付けられた記事に絞り込まれた一覧を確認できる。 手順各記事に tags を追加する各タグの一覧ページが生成されるようにするテンプレートを作成する記事ページにタグを載せる各記事に tags を追加する各記事の
こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。 Gaji-Labo のコーポレートサイトを運用しているなかで、より効率的に更新が行えるようにするために、最近は使用するCMSやホスティングなど、サイトを動かす環境をアップデートすることを検討しています。 今回は、そんなアップデートを検討しているなかで知った、React 用静的サイトジェネレーターの GatsbyJS から派生した Gatsby Cloud というサービスについて知見をまとめたいと思います。 Gatsby Cloud とは？Gatsby Cloud とは、静的サイトジェネレーターの GatsbyJS のローンチを容易にするプラットフォームです。 GatsbyJS を使用しているWebサイトの GitHub リポジトリと連携し、リポジトリに push があったり接続している CMS から投稿を行ったりすると、イ
GitHub Actions を使って GitHub Pages に GatsbyJS のサイトをデプロイ | External Storage
TL;DR GatsbyJS でブログシステムを構築して、GitHub Actions で自動デプロイできるようにした話。 GatsbyJS って何? WordPress・Contentful 等の各種 CMS、ローカルの Markdown・YAML 等のファイル、API・Database 等をデータソースとして、 GraphQL を通じて統一的に扱う事ができる静的サイトジェネレータです。 複数のデータソースを扱えることから、既存のブログシステムから GatsbyJS による静的サイトへの乗り換えも容易です。 Airbnb や Nike 等、多くの有名企業で採用実績があります。 また、React ベースで実装されているので、React で UI パーツの追加などがしやすいです。 Starters と Plugins GatsbyJSには「Starters」「Plugins」という2つのエコ
2020/12/31追記：この仕組みがあるとよい理由を説明したページを追加しました。またわかりにくい箇所を加筆修正してます。 Gatsby.jsによる静的ページを独自ドメインで公開するためS3+CloudFrontを利用し、さらにS3へのコピーをGitHub Actionsで自動化するお話です。 これを以下のように何回かに分けて紹介します。 その０：なぜこうした仕組みが必要なのか？ ←2020/12/31追加 その１：ゴールの説明とS3バケットを作る ←このページの内容 その２：ドメイン準備とCloudFrontの設定を作る その３：GitHub ActionsでGatsby.jsで作ったファイルをS3にデプロイする その４：独自ドメインで外部からアクセスできるようにする このような仕組みがなぜ必要のかについてはその０：なぜこうした仕組みが必要なのか？を読んでください。（説明を書き始めた
WordPressとGatsbyの組み合わせは非常に強力です。WordPressはCMSとして完成されていますし、Gatsbyと合わせて使うための環境も整っています。また、WordPressのセキュリティー対策などもあまり考えなくて良くなります。ページの構成要素としてReactを手軽に使えるようになるのも大きいです。 エビスコムのこのサイトもWordPress&Gatsbyをベースにして管理していますが、なかなか便利です。 リクエストを頂くこともあるもので、うまくまとめられないかと原稿を書き始めるのですが…そのたびにちゃぶ台返しを食らっている感じでして、まとめきれるかは自信がありません。 そこで、WordPressとGatsbyを組み合わせる際に、個人的に大きな壁になっているポイントを残しておこうと思います。 GatsbyとWordPressの組み合わせ GatsbyとWordPressを
Jamstackな構成＋Shopifyをバックエンドにサイトを作る方法について
Gatsby.jsとは? Gatsbyは、Reactに基づく無料のオープンソースフレームワークであり、 開発者が非常に高速なWebサイトやアプリを構築するのに役立ちます ※ Docsより 環境構築 まずはCLIが用意されているので、Gatsby CLIをインストールします。
Gatsbyjs + Netlify + Contentful で Blogを作成 今回作成するサイトのDemoです。 こちらが今回実際に作成したBlogです。 以前にgatsby-starter-blogでブログを作成したのですがCMSを利用したいと思い、 新たにgatsby-starter-gcnでブログを作成したので備忘録を残します。 利用したサービス Gatsbyjs GatsbyjsはReactを利用したモダンなサイトを高速に作成できるオープンソースフレームワークです。 Gatsbyjsでなにか作りたい方はテンプレートが豊富に用意されているので、そちらを利用するといいと思います。 Netlify Netlifyは静的なサイトを高速で提供できるホスティングWebサービスです。 フロントエンドのビルド、デプロイ、ホスティングの全てを高速に行ってくれます。 また、NetlifyはGit
モチベーションGatsbyJSでブログを作っており、SPAでページ遷移が爆速なのがとても良いが、読み込みがないことで、逆にフィードバックがなくてページが変わったことに気づけないので、ページ遷移時にアニメーションを付けたかった。 できあがったもの適当にページ遷移するとファンってなるのを体験できる。 ※ 後日追記下記 react-transition-group と gatsby-plugin-layout を使う方法でページ遷移時にアニメーションを付いたのだが、モバイル端末でスタイル崩れが発生したので、ページ遷移時のアニメーションは外した。 ※ さらに追記で、CSSで実現する方法が良さそうだったので、記事にした。 続・GatsbyJSで作っているブログでページ遷移時にアニメーションが付くようにした GatsbyJSのTransition事情gatsby-plugin-transition-l
背景 サブスクリプションECをつくってみたいと思い、Shopifyを使ってみたかった とはいえモダンな開発環境でやれないかと調べてみることにした 近頃ShopifyでSubscription APIがリリースされるということであった これらに関して関連するトピックについて調べてみたので簡単にまとめてみました。 なお私の知識レベルについていうと、Shopifyで開発・運用した経験があるわけではなく、お試しでショップをつくってやってみたところです。 Gatsbyでの開発 Gatsbyとは GatsbyはReactベースの静的サイトジェネレーター。 ReactのSPAを静的に生成し、よしなにデプロイするようなモダンな開発環境を提供してくれます。 GraphQLで各種APIからデータをロードする。これを用いたHeadless CMSとの連携が豊富にある（WP, Contentful, Shopif
Making a Site with User Authentication | Gatsby のチュートリアルを試した時の作業を備忘録としてまとめました。 全体の実装は t-yng/examples/gatsby-auth を参照してください。 要件 ログイン、ログアウトができる 非ログイン状態で要認証ページが表示できないこと プロジェクトの作成 $ gatsby new gatsby-auth gatsbyjs/gatsby-starter-hello-world $ cd gatsby-auth ナビゲーションバーを実装 ナビゲーションバーのコンポーネントを作成する。 // src/components/NavBar.tsx import React from "react"; import { Link } from "gatsby"; export const NavBar =
GitHub - gatsbyjs/gatsby-starter-hello-world: Starter with the bare essentials needed for a Gatsby site
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
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GatsbyJSの本を書いた理由 | エビスコム - EBISUCOM
爆速静的サイトジェネレーターのGatsbyJs入門 | #TSUKAMON
GatsbyJSで静的サイトジェネレートをはじめよう！ | フロントエンドBlog | ミツエーリンクス
GatsbyJS + TypeScript 環境構築 2022
GatsbyJS と WordPress と Block-based Themes | エビスコム - EBISUCOM
GatsbyJSでのクエリデータの扱い（静的生成後の記事一覧のランダム表示） | エビスコム - EBISUCOM
GatsbyjsでWordPress風の簡易ブログを作って勉強してみた - Qiita
GatsbyJS + GhostでJamstackなブログを作成する - hiro08gh
コーポレートサイトをGatsbyJSを利用したJamstack構成でリニューアル
GatsbyJS ローカルで開発中のページをスマホでも見る方法 - Qiita
Gatsby勝手に日本語化サイト | GatsbyJS 日本語訳-v2系
GatsbyJSでのGraphQLの使い方 | アールエフェクト
超多機能なGatsbyJS Themeを作成してテーマを公開した話 - Qiita
WordPressからGatsbyJSへ。phpからReactへ。今こそ静的サイトへ。
10 Top GatsbyJS Plugins For 2020
静的サイトジェネレータで構造化データマークアップを入れた知見【GatsbyJS】
👶「GatsbyJSにサムネイル画像をつけたい」その1 - Qiita
React & GatsbyJS開発入門 - mottox2（つのぶえ出版） - BOOTH
GatsbyJS + microCMSでJamstackなオウンドメディアを作ろう
GatsbyJS サイトの高速なビルド＆デプロイが行えるプラットフォーム Gatsby Cloud が便利
GatsbyJSで作ったコンテンツをS3+CloudFrontで公開する その１｜片岡雅人
GatsbyJS と GutenbergのCSS（WordPress） | エビスコム - EBISUCOM
ShopifyとGatsbyJSを使った ヘッドレスコマース入門
GatsbyJSを試してみた - Qiita
Gatsbyjs + Netlify + Contentful で Blogを作ってみた。 - Qiita
GatsbyJSで作っているブログでページ遷移時にアニメーションが付くようにした
Shopify+GatsbyJSでのECサイト開発、サブスクリプション実装について調べた - Qiita
GatsbyJSで認証サイトを実装する | みどりのさるのエンジニア