タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
「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にどのようなものがあるかも理解する必要があります。
ShopifyとGatsbyJSでヘッドレスコマースサイトを作る方法 | non-standard world株式会社
GatsbyJS + NetlifyでWordPressを記事管理システムにしちゃう方法 | HPcode（えいちぴーこーど）
最近流行り始めてきているWordPressを管理画面としてだけ扱い、表向きのサイトの表示は、あらかじめ静的サイトとして変換したものを出しちゃうという方法です。 色んな技術が絡み合っていて、ほぼWordPressしか触ってこなかったわたしは頭爆発しそうでしたが、全容が体感として理解できると、なんとなく腑に落ちるようになります。 全体の構成は、Gatsbyの公式トップページの図が分かりやすいです。 登場人物としては以下の通り。一般的なWordPressしか触ってこなかった人にとっては馴染みがないかもしれませんが、実際に一度流れを掴んでしまえば理解できるはずです（実体験） WordPressの管理画面で記事を更新する。この記事がデータ元となる。 GatsbyにてWordPressからデータを取得してHTML、CSS、JavaScriptに変換する。（SPAとして動く） Gatsbyでビルドされた
GatsbyJSのIncremental Buildsで静的サイト制作が劇的に変わる - hiro08gh
パフォーマンスが重視される昨今、サーバサイドレンダリングを採用したり、静的サイトジェネレーターを使用して必要なファイルをあらかじめ生成してからホスティングするサイトが増えてきています。 これまでも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
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 から投稿を行ったりすると、イ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GatsbyJSの本を書いた理由 | エビスコム - EBISUCOM
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 が便利
m.facebook.com
m.facebook.com
zenn.dev/daaaaazo
www.google.com
m.facebook.com
m.facebook.com