[B! Gatsby] jsstudyのブックマーク

7年間使ってきたWordPressを捨ててContentful+Gatsby+Netlifyにしたら爆速になったし経緯とか教訓とか語る - Qiita

7年間使ってきたWordPressを捨ててContentful+Gatsby+Netlifyにしたら爆速になったし経緯とか教訓とか語るWordPress React Netlifygatsbycontentful こんにちは、古都ことと言います。普段はブログやらなんやらをやっているのですが、今回ブログのお引っ越しをしたのでその経緯などについてお話ししたいと思います。先にまとめブログをVPSとWordPressで7年間運営してきた速度面やメンテナンス面でそろそろガタがきていた Contentful+Gastby+Netlifyの構成に移行した Lighthouseで高スコア叩き出せた技術選択って難しいね運営しているブログ Subterranean Flower Blogというブログをやってます。主にフロントエンド周りのことを取り扱っており、たまにマリオ64の記事や、転職の記事などでも

jsstudy 2020/05/16

headlessCMSは良さげだけど、自前で用意したい（ベンダーロックインを避けたい）　headlessCMS | Top Content Management Systems for Jamstack sites https://headlesscms.org/

リンク

GatsbyJSの本を書いた理由 | エビスコム - EBISUCOM

意外なところに手を出してきたと思われるかもしれませんが、きっかけは WordPress ＆ Gutenberg なんです。 2015年の Automattic社 Matt Mullenweg 氏の "Learn JavaScript, Deeply" という言葉。そして、バージョン5.4までたどり着いた現在の WordPress と、見え始めた Block Based Theme。世間では WordPress=PHP という認識がまだまだ強いわけですが、とっくに、Gutenberg=JavaScript︵React︶なわけです。すでに見えている未来を考えれば、WordPress=JavaScript と言われる時代もそう遠くはないのではとさえ思います。なので、自分たちも JavaScript︵React︶をもっと身近なものにしておかなければと動き始めました。入門者の通常ルート通り、

jsstudy 2020/04/25

世間では WordPress=PHP という認識がまだまだ強いわけですが、とっくに、Gutenberg=JavaScript︵React︶なわけです。すでに見えている未来を考えれば、WordPress=JavaScript と言われる時代もそう遠くはないのではとさえ思います。 ●Gatsby ●本 ●WordPress ●React ●SSG ●PHP

リンク

静的サイトジェネレーター Gatsby - Qiita

静的サイトジェネレーターとは？ Static Site Generator︵SSG︶ WebサイトのHTMLファイルを生成するツールのこと Wordpressのような従来CMSの仕組みは、MySQLなどのDBをもとに、サーバーでHTMLを生成して返すものだったそれに対し静的サイトジェネレーターは、コンパイル時にGraphQLやAPIからすべてのデータを取得し全てのHTMLを最初に生成するさらに、生成されたファイルを、Netlifyなどのホスティングサービスを用いて、サーバーレスで公開する仕組みが主流になっている静的サイトジェネレーターのメリット ※ Netlifyなどホスティングサービスを用いた場合レスポンスが速い。サーバーでHTMLを動的に生成しないからサーバー代 ¥0✨ サーバーが必要ないためサーバー落ちない。メンテが不要 ※ ただしホスティングサービスが落ちる可能性はあり

jsstudy 2020/04/01

リンク

JSフレームワーク事情2020年始め｜erukiti

この記事では面倒なので名前に .js が付いているものは省きます。例えばNext.js は Next と表記します。まず結論から日本ではVueはReactと二分する人気があるように観測されますが、世界的な数字で人気・シェアを見るとReactが圧倒的です。シェアだけで見るとAngularとAngularJS︵Angular系の1.x系︶の合計値はVueよりも高いですが、﹁今後はもう採用したくない﹂と考える率が高く、Angular/AngularJSの人気が低下しているということは間違いありません。 ※追記: Angularのシェア、人気度に関しては、Angular及びAngularJS両方を含む数値であり、AngularJSとAngularは別物であるものが混ざってカウントされているため、Angularのシェア及び人気度はあやふやかもしれません。他の数値に関して信頼性を疑うべきかどうかは

jsstudy 2020/01/04

シェアを参考にしつつも、最終的には実際に使ってみて一番使いやすいと思ったツールを採用すべき。ReactはTypeScriptの他に、Facebookが開発しているReasonMLというAltJSとも相性が良い？ https://reasonml.github.io/reason-react/

リンク

Gatsby - daily-dev.net

jsstudy 2019/11/08

NetlifyCMSで、記事の作成を行い、Gatsbyで、ビルド中にNetlifyCMSからデータを取得して、静的ファイルに変換します。 NetlifyとGatsbyを組み合わせれば、特定のブランチにpushすれば、自動でビルドして、サイトを更新できます。

リンク

Gatsbyプラグイン45選 - Qiita

なにこれ React.js製の静的サイトジェネレーター Gatsbyは、プラグインを使って簡単に機能拡張できる仕組みを持っています。公式プラグインとコミュニティ提供のものをあわせると、なんと502個もあるそうです。今回はその中でも、おすすめ45個をユースケース別にご紹介します。 ※ 本記事はブログの転記です。Qiitaで使えない機能︵コードブロックの指定行強調表示など︶の表示結果はスクリーンキャプチャにしています。HTMLでの表示結果を見たい場合はブログをご覧ください。ユースケース別目次 ※クリックすると説明セクションにとべます。マークダウン系コードブロックでシンタックスハイライトするコードブロックにタイトルを追加する見出しにGitHub風ホバーリンクをつける絵文字を使う Graphvizでグラフを描画する数式を使うコードブロックにJavaSriptファイルなどを埋め込む

jsstudy 2019/11/03

Gatsby
React

リンク

Gatsby.jsでWordPressと連携。記事一覧、詳細を表示するまで - Qiita

WorpdressからGatsby.jsに移行するにあったって、wordpressの記事情報の取得・表示までの連携をメモします。以下内容はCLIにてgatsby newで作成したプロジェクトを基本にしています。 Wordpressプラグインの追加 wrodpressとの連携はgatsby-source-wordpressにて行うのでパッケージをダウンロードします。

jsstudy 2019/11/03

このように簡単にwordpressのリソースを利用できるので、wordpressからの移行にgatsby.jsはとてもオススメだと思います。

リンク

GatsbyJSをGAEにデプロイする - Memento memo.

GatsbyJS をGoogle App Engine にデプロイする方法の備忘です。 app.yaml と cloudb uild.yaml を設定してCloud Buildのコマンドを叩くことでデプロイします。 Google App Engine の設定まずは app.yaml の設定です。基本は Hosting a static website on Google App Engine | App Engine standard environment for PHP | Google Cloud を参考にします。ルーティングの都合上、拡張子を指定しない場合のリクエストは index.html にマッピングさせます。 runtime: php55api_version: 1 handlers: # file with extensions (e.g. .html) -

jsstudy 2019/11/03

React
Gatsby

リンク

The Best React-Based Framework | Gatsby

Netlify is offering all Gatsby Cloud customers easy migration paths to Netlify to unite two industry-leading platforms into one.

jsstudy 2019/10/19

CLIを使うのか。面倒くさいなー

リンク

Reactベース静的サイトジェネレータGatsbyの真の力をお見せします - Qiita

NTTテクノクロスの上原です。業務では、社内情報のReact製自前キュレーションサイトの構築を担当しています。この記事はNTTテクノクロスAdvent Calendar24日目の記事であり、社内の勉強会で発表した内容をQiita記事として書きなおしたものです。タイトルは釣りです。 (2018/12/28追記あり) 導入記事を書いた理由 Gatsby.js(以降、Gatsbyと表記)はさまざまな高速化テクニックを用いた﹁爆速サイト生成﹂で有名なツールですが、そのリッチな機能性は、たとえばイントラ内サイト、業務システム開発、ツール開発などでも十分に活用できるものだと思い、その可能性を紹介するために書きました。﹁静的サイトジェネレータ﹂って何？いわゆる﹁静的サイトジェネレータ(Static Site Generator, SSG)﹂は、CMS(コンテンツ管理システム)の一種です。代表的

jsstudy 2019/07/28

"たとえば、Reactの公式サイトはGatsbyを使用したサイトです　https://reactjs.org/　GatsbyはSSR的な静的HTML生成に加えて、それと連動する通常のReactアプリも生成します。" →データの入力や編集はWordPressを利用可能＝便利かも？

リンク

はてなブックマーク

タグ

関連タグで絞り込む (11)

Gatsbyに関するjsstudyのブックマーク (10)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第1週）

月間はてなブックマーク数ランキング（2024年6月）

今週のはてなブックマーク数ランキング（2024年6月第5週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス