Gatsbyjs + Netlify + Contentful で Blogを作ってみた。 - Qiita
Gatsbyjs + Netlify + Contentful で Blogを作成 今回作成するサイトのDemoです。 こちらが今回実際に作成したBlogです。 以前にgatsby-starter-blogでブログを作成したのですがCMSを利用したいと思い、 新たにgatsby-starter-gcnでブログを作成したので備忘録を残します。 利用したサービス Gatsbyjs GatsbyjsはReactを利用したモダンなサイトを高速に作成できるオープンソースフレームワークです。 Gatsbyjsでなにか作りたい方はテンプレートが豊富に用意されているので、そちらを利用するといいと思います。 Netlify Netlifyは静的なサイトを高速で提供できるホスティングWebサービスです。 フロントエンドのビルド、デプロイ、ホスティングの全てを高速に行ってくれます。 また、NetlifyはGit
Gatsby Cloud で Contentful にプレビュー環境を簡単構築する - Qiita
Gatsby Cloud を使うと、Gatsby + Contentful で構築したサイトにプレビュー機能を簡単に実装できたので、その手順を紹介します。 Gatsby Cloud とは Gatsby Cloud は、Gatsby 社が提供するクラウドサービスで、Gatsby 製サイトのビルド、デプロイ、ホスティング、CMSプレビューなどの機能を基本無料で使うことができます。 有料プランでは、月間のビルド数上限が増えたり、並列ビルドが可能な Incremental Builds を利用可能になります。 いくつか機能を簡単に紹介します。 Lighthouse Reports 各ビルドに Lighthouse のレポートを出力することが可能です。 ビルド履歴にスコアが残るので、推移が見えて良いです。 Gatsby Preview この記事のメインである、サイトのプレビュー機能です。 データソー
GatsbyJS + Airtable + NetlifyでJAMstackな雑記サイトはじめました
JAMstack な静的サイトジェネレーター（Static Site Generator）を試してみたかったので、雑記を書くためのサイトを作ってみました。（JAMstackってなによ？ という方はこちら） その名も「R note」。このブログ「Rriver」のノートという意味です。 R note – @rriverの雑記ノートです いまのところ、主にGatsbyJSを使ったサイト制作についてメモを書き残しています。あと、このブログでは書かないような小ネタとか、その瞬間思ったことを、勢いにまかせてちょこちょこメモっていこうと思います。 今回使ったJAMstackの構成 静的サイトジェネレーターもいろいろあるし、Headless CMSやデプロイ用のプラットフォームもたくさんあるみたいなんですが、今回採用したのは以下の3つです。 GatsbyJS Airtable Netlify この3つを組
ノーコードでJAMstackなWebサイトを作成できる「Stackbit」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、JAMstack*1を構成できるさまざまなサービスと連携してサイトを手軽に作成できる無料のWebサービス「Stackbit」をご紹介します！ しかもプログラミング不要で、話題のノーコード（NoCode）サービスとしても人気が高いことで知られています。面倒な処理はすべて自動化されているので、誰でも手軽に最新のWebサイトを作ることができます。 Webサイト制作やJAMstackなどにご興味ある方は、ぜひ参考にしてみてください！ 【 Stackbit 】 ■「Stackbit」の使い方 それでは、基本的な「Stackbit」の使い方から見ていきましょう！ まず最初にトップページにある【TRY NOW】ボタンをクリックします。 JAMstackを構成する各サービスを選択する画面が表示されます。 2020年5月時点において、選択できるサービスは
GatsbyJSのIncremental Buildsで静的サイト制作が劇的に変わる - hiro08gh
こんにちはhiro08です。 先日GatsbyJSのブログで、Incremental Buildsのリリースがアナウンスされました。これはコンテンツに変更があった場合、変更部分のみを再ビルドする仕組みです。今後のJamstack/静的サイト制作を劇的に変える非常に強力な機能です。 補足 現時点ではGatsby CloudのProfessionalプランで使える機能です。まだまだ試用機能といった感じです。 www.gatsbyjs.org いままでの課題点 いままでのGatsbyJSには課題がありました。それは、変更があった場合すべてのページを再ビルドしてしまうことです。少ないページ数の場合あまり影響ないですが、数千から数万ページ以上の大規模な静的サイトでは、 一部の変更でもすべてのページが再ビルドされてしまうため、ビルド効率が悪い(CI/CDを使ってる場合消費量が多くなってしまう) ビルド
Gatsby cloud と Headless CMSの紹介
昨年末（2019年末）に登場したGatsby Cloud！ これは、buildとhostingをしてくれるサービスですが、 gatsbyを使っている方の悩みとして、ページ数や画像等のmediaファイルが増えてくると、ビルドの時間がかかる。 そこで、これをGatsby Cloudに任せ、 さらにhedlessのcms（contentfulやcosmic js など）にて、記事を管理し、 リアルタイムpreviewまでも可能にします こちらを実現する上で、 今回はまずHeadless CMSのご紹介をします。 この記事の内容を読むメリット Headless CMS導入のメリットがわかる 静的サイトジェネレーターを使いたくなる 静的サイトジェネレータ 従来の、サーバーサイドプログラム（Ruby Python PHP等）でのWEBサイトは アクセス来る 処理する ブラウザが読める形でDesign含
Gatsby.js + Contentful + Netlifyで作った爆速ブログ | CatNose
記事のデータやタグなどのコンテンツを管理するWebアプリです。マークダウンエディターを備えており、ここで記事を書きます。この記事データをGatsby.jsが読み込み、静的なファイルを作ってくれるわけです。 （記事を保存したときに、Netlifyに通知が飛ぶようにしておくと、Netlifyがページデータを再生成してくれます） 静的なサイトをビルド、デプロイ、ホスティングしてくれるサービスです。GitHub上のGatsby.jsのソースコードと、Contentfulの記事データを読み込み、静的なサイトデータを生成（ビルド）してくれます。そのため、ブログのカスタマイズがとっても楽になります。SSL化も無料。 高速な理由（Gatsby.js）WordPressと異なり、あらかじめ静的なページデータを生成しておく（Gatsby.js）ファーストビューに関わるCSSを自動でインラインで埋め込んでくれる
7年間使ってきたWordPressを捨ててContentful+Gatsby+Netlifyにしたら爆速になったし経緯とか教訓とか語る - Qiita
7年間使ってきたWordPressを捨ててContentful+Gatsby+Netlifyにしたら爆速になったし経緯とか教訓とか語るWordPressReactNetlifygatsbycontentful こんにちは、古都ことと言います。普段はブログやらなんやらをやっているのですが、今回ブログのお引っ越しをしたのでその経緯などについてお話ししたいと思います。 先にまとめ ブログをVPSとWordPressで7年間運営してきた 速度面やメンテナンス面でそろそろガタがきていた Contentful+Gastby+Netlifyの構成に移行した Lighthouseで高スコア叩き出せた 技術選択って難しいね 運営しているブログ Subterranean Flower Blogというブログをやってます。 主にフロントエンド周りのことを取り扱っており、たまにマリオ64の記事や、転職の記事などでも
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
