GatsbyJS と WordPress と Block-based Themes | エビスコム - EBISUCOM
WordPress 5.5 以降のロードマップも見え始め、年内には Full Site Editing (FSE) ＆ Block-based Themes が出てくるようで、非常に楽しみです。 また、Block-based Themesを見ているとどうしても SSG（静的サイトジェネレーター）っぽく見えるもので、WordPress が Jamstack を気にしないわけないよな… などと妄想してみたりしています。 一方、静的サイトジェネレーター周辺では、打倒WordPressなんて話をよく見かけます。気持ちはよくわかります。最近のWordPressは色々と大変ですし…。 また、コストをかけずにサイトを公開できる時代になって、WordPress のためのサーバーコストが気になり始めたという話もよく見かけるようになりました。 このあたりを考えれば、WordPress からの避難先として、静的
7年間使ってきたWordPressを捨ててContentful+Gatsby+Netlifyにしたら爆速になったし経緯とか教訓とか語る - Qiita
7年間使ってきたWordPressを捨ててContentful+Gatsby+Netlifyにしたら爆速になったし経緯とか教訓とか語るWordPressReactNetlifygatsbycontentful こんにちは、古都ことと言います。普段はブログやらなんやらをやっているのですが、今回ブログのお引っ越しをしたのでその経緯などについてお話ししたいと思います。 先にまとめ ブログをVPSとWordPressで7年間運営してきた 速度面やメンテナンス面でそろそろガタがきていた Contentful+Gastby+Netlifyの構成に移行した Lighthouseで高スコア叩き出せた 技術選択って難しいね 運営しているブログ Subterranean Flower Blogというブログをやってます。 主にフロントエンド周りのことを取り扱っており、たまにマリオ64の記事や、転職の記事などでも
WordPressブログのフロントエンドをGatsbyJS + Netlifyで構築する
今までWordPressでブログを運用してきたのだが、HTMLとPHPを絡めたテーマ開発が煩雑で表示速度も遅かったため、フロントエンドにGatsbyJS, Netlify, WP REST APIを導入することで改善した。 あまり時間がない中、ガガガッと移行したので忘れないように備忘録を残しておきたいと思う。 目次 ブログのシステム構成WordPressからデータを取得する準備GraphQLを試すビルド・デプロイ設定ケーススタディ ブログのシステム構成 フロントエンドのソースコードはGithubに置いておき、masterへのプッシュをNetlifyが検知してGatsbyのソースコードを自動ビルドする。 このビルドでWordPressから記事データを引っ張ってきて静的ファイルを生成してくれる。 ビルド後はそのままNetlify上でサイトデータをホスティングという流れになる。 ブログの更新はこ
GatsbyJSでカテゴリー機能を実装する - Crieit
カテゴリーページにもっと自由を カテゴリー一覧を作っていきたい。 GatsbyのStarterではGraphQLのGroup機能を使ってやっている人が多い。 今回はMarkdownを使ってある程度自由にカスタマイズできるように実装していきたい。 それには理由があって、僕のサイトの作り方だとカテゴリーページが上がる傾向にある。そこでユーザーを離脱させない工夫としてカテゴリーをmarkdownで自由にカスタマイズできるようにしておきたい。 作っていくもの categoriesフォルダ gatsby-node.js /templete/categorypage.js /components/categoryPostlist/ こんだけで実装できそうだ。 まず、/contents/categoies/food.mdと /contents/categories/drink.mdを作成。 --- pa
Headless CMSと静的サイトジェネレータ「Gatsby」を使ったサイトの構築 - Qiita
はじめに（Headless CMSとは） Headless CMSを一言で説明すると「コンテンツを表示する機能を持たず、APIでコンテンツの配信を行うCMS」になります。従来のCMSはコンテンツを管理するバックエンドの機能とコンテンツを表示するフロントエンドの機能が一体となっていますが、Headless CMSでは画面テンプレートのようなフロントエンドの機能を持っていません。従来のCMSをCoupled（一体型） CMSと呼ぶのに対して、Headless CMSをDecoupled（分離型） CMSと呼ぶ場合もあります。 従来のCMSはサイトの枠組みが出来上がった状態から構築を行うことができるため誰でも素早く簡単にサイトを立ち上げることができます。一方でCMSの枠組みに縛られるため自由自在にサイトを構築するという訳にはいきません。 一方、Headless CMSはサイトを構築するための機能
TypeScriptでGatsby.jsチュートリアル - Qiita
2019年1月5日追記: Gatsby.jsがv1であることを明記。チュートリアルへのリンクが最新版(現時点ではv2)になっていたので、v1へのリンクに修正。 Reactベースの静的サイトジェネレータGatsby.js (v1)のチュートリアルを、TypeScriptで動かしました。 TypeScriptはJavaScriptに静的型付けを追加した言語です。Visual Studio Codeなどのエディタで補完が効くといった嬉しい事があります。 環境 Windows 10 Pro Insider Preview Build 17074 (Windows Subsystem for Linux) Gatsby.js v1.9.207 準備 まずは公式のチュートリアルに沿ってプロジェクトを構築します。 $ yarn add gatsby-cli $ ./node_modules/.bin/g
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
