7年間使ってきたWordPressを捨ててContentful+Gatsby+Netlifyにしたら爆速になったし経緯とか教訓とか語る - Qiita
7年間使ってきたWordPressを捨ててContentful+Gatsby+Netlifyにしたら爆速になったし経緯とか教訓とか語るWordPressReactNetlifygatsbycontentful こんにちは、古都ことと言います。普段はブログやらなんやらをやっているのですが、今回ブログのお引っ越しをしたのでその経緯などについてお話ししたいと思います。 先にまとめ ブログをVPSとWordPressで7年間運営してきた 速度面やメンテナンス面でそろそろガタがきていた Contentful+Gastby+Netlifyの構成に移行した Lighthouseで高スコア叩き出せた 技術選択って難しいね 運営しているブログ Subterranean Flower Blogというブログをやってます。 主にフロントエンド周りのことを取り扱っており、たまにマリオ64の記事や、転職の記事などでも
Headless CMSとは Headless CMSは、Wordpressなどとは違って本体のウェブサイトと管理画面が完全に分離されているのが特徴の CMS(コンテンツマネジメントシステム) です。 これを使うと、フロントエンドとCMS側が分かれるのでそれぞれを別の場所に配置することが可能です。 動的なコンテンツを表示することをサーバーを持たずに行うことが可能になるのが魅力です。 Micro CMSとは Micro CMSは国産のHeadless CMSです。 これまでのHeadless CMSというと「Contentful」が主流な気がします。 Contentfulは日本のサービスではないので英語が基本になりますが、Micro CMSはデフォルトで日本語に対応していたり、日本語でのチャットサポートがあるのが良いと思いました。 使い方 登録 上記画面の「無料ではじめる」または「新規登録」
Vue Fes Japan 2019 サイトのソースコードを公開した - おいちゃんと呼ばれています
この記事は Nuxt.js Advent Calendar 2019 - Qiita の最終日（25日）の記事です。 Vue Fes Japan 2019 の Web サイトのソースコードを公開したので、お知らせします。 https://github.com/vuejs-jp/vuefes-2019 概要 Vue Fes Japan 2019 は Nuxt.js の静的サイトジェネレート機能（nuxt generate）によって作成している。 生成した静的ファイルを Netlify でホスティングしている。 スポンサー情報などのコンテンツをヘッドレス CMS である Contentful で管理している。いわゆる JAMstack 構成。 ポイントをピックアップ Vue Fes Japan 2018 サイトのソースコードについては下記で解説しており、2019 のものと共通している点も多いの
こんにちは、@f_subal です。 pixivFACTORY というサービスで普段はフロントエンドをやっています。 今回は Rails のサービスに Headless CMS の Contentful を導入し、ワークフローを改善した話をします。 ランディングページ、あるいはマスターデータの詳細について pixivFACTORY はグッズおよび同人誌がブラウザ上で簡単に作れるサービスです。 取り扱っているグッズは 60 種類以上あり、各グッズごとに仕様が大きく異なります。 グッズにはそれぞれ、仕様や出来上がりの写真を載せたページ（以下、product 詳細とも呼びます）が存在します。 要するに、以下の状況を想定してください。 運営が管理する静的なドメインモデル（ここでいう「作れるグッズの仕様」）が存在する モデルの各内容について説明するページが存在する 各ページの内容は DB の内容から
なぜPWAなのか PWA(Progressive Web Apps)はひと言で説明するとWebがアプリのようになる技術です。 個人的にはとても魅力的な技術だと思うのですが、2015年に発表されてから今まであまり活用されていないような気がします。もちろんネイティブアプリには及ばないですが、情報がまとめてあるのが中心で少しの機能だけの場合はPWAで事足りるのではないかと思ったので作ってみました。 作ったサイトはこちら https://mdtakaoka.info まず結論から言うと、Webサイト的には成功したのではないかと僕は思います。下の画像GoogleAnalyticsの解析ですがPWAユーザ（ホーム画面に追加したユーザ）はページ/セッション、平均セッション時間、直帰率がすべてのユーザに比べて良くなりました。今回はWebサイト上にはホーム画面に追加できることを記載しなかったので、１割程度の
ブログサイトを作りながら学ぶGatsby入門
昨今のフロントエンドのトレンドとしては「React」や「Vue」などのSPAを構築できるライブラリが挙げられるかと思います。 React製のフレームワークであるGatsbyは手軽に高速なwebサイトを作れると注目されています。 本書ではGatsbyの基礎的知識はもちろん、実際にブログを作り公開するまでの実践的な使い方を学べる内容となっています。 作るブログサイトのDEMOが見れるURL https://musing-banach-f3a228.netlify.app/
高速、セキュア、スケーラブルな次世代EC技術「ヘッドレスコマース」でShopifyサイトを作っての学び | non-standard world株式会社
こんにちは。代表兼CTOの高崎です。 この前、自社運営の出版レーベルのECを高速、セキュア、スケーラブルな次世代EC技術「ヘッドレスコマース」形式でリニューアルしました。 ヘッドレスコマースとは 海外のD2Cと呼ばれるテクノロジーを重視した製造小売で標準となっている次世代型のEC技術で、 データ（バックエンド）とデザイン（フロントエンド）の分離が特徴的なECサイトの作りです。 メリット 1.高速 以下は海外ECサイトがヘッドレス化する前と後で速度がどのように変わったかの例です。 左がShopifyを使ってヘッドレス化したサイトの映像で、右が旧来のECサイトです。 ご覧いただければスピードの差が一目瞭然かと思いますが、「サイト表示が0.1秒遅くなると、売り上げが1%減少し、1秒高速化すると10%の売上が向上する。」と言われる通り、高速であることはECサイトの売上に直結します。 また、高速なサ
GatsbyJSのIncremental Buildsで静的サイト制作が劇的に変わる - hiro08gh
こんにちはhiro08です。 先日GatsbyJSのブログで、Incremental Buildsのリリースがアナウンスされました。これはコンテンツに変更があった場合、変更部分のみを再ビルドする仕組みです。今後のJamstack/静的サイト制作を劇的に変える非常に強力な機能です。 補足 現時点ではGatsby CloudのProfessionalプランで使える機能です。まだまだ試用機能といった感じです。 www.gatsbyjs.org いままでの課題点 いままでのGatsbyJSには課題がありました。それは、変更があった場合すべてのページを再ビルドしてしまうことです。少ないページ数の場合あまり影響ないですが、数千から数万ページ以上の大規模な静的サイトでは、 一部の変更でもすべてのページが再ビルドされてしまうため、ビルド効率が悪い(CI/CDを使ってる場合消費量が多くなってしまう) ビルド
ノーコードでJAMstackなWebサイトを作成できる「Stackbit」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、JAMstack*1を構成できるさまざまなサービスと連携してサイトを手軽に作成できる無料のWebサービス「Stackbit」をご紹介します！ しかもプログラミング不要で、話題のノーコード（NoCode）サービスとしても人気が高いことで知られています。面倒な処理はすべて自動化されているので、誰でも手軽に最新のWebサイトを作ることができます。 Webサイト制作やJAMstackなどにご興味ある方は、ぜひ参考にしてみてください！ 【 Stackbit 】 ■「Stackbit」の使い方 それでは、基本的な「Stackbit」の使い方から見ていきましょう！ まず最初にトップページにある【TRY NOW】ボタンをクリックします。 JAMstackを構成する各サービスを選択する画面が表示されます。 2020年5月時点において、選択できるサービスは
2019-11-07 【Contentful】入門。Conentfulとは？導入方法・設定手順の解説 #contentful#cms#blog#webアプリ#api#headless cms Contentfulとは？ Contentfulは、「Headless CMS」と呼ばれるAPIベースのCMSです。 従来のCMSとの違いや、料金体制などについて簡単に説明します。 従来のCMSとHeadless CMSの違い まずCMSとは、「Contents Management System」の略で、直訳すると、コンテンツを管理するシステムです。 CMSを利用する最大のメリットは、Webサイトを作成するためのHTMLやCSSの知識がなくても、ブログなどのコンテンツを管理できることです。 具体的に言うと、コンテンツ(ブログ記事など)の作成・編集・削除などを行うためのサービスです。 従来のCMS(W
Contentfulの料金と使い方を整理しつつ、Nuxt.jsと組み合わせてブログを作る - Qiita
Contentfulを使ってみたくなったので、印象に残った邦画を書き残すブログを作りました。ブログを作って満足してしまったので、記事の中身は（仮）です。Contentfulの考え方に馴染むのに少し時間がかかったので、そこのところの整理がメインの記事です。 ヘッドレスCMSというもの CMSというと、WordPressとMovable Typeぐらいしか知らなかったのですが、最近ヘッドレスCMSという言葉を耳にするようになりました。ヘッドレスCMSは、WordPressのようにテンプレートを表示する部分を持たず、APIでデータを提供することに特化している点が特徴です。 ヘッドレスCMSの選択肢は、こちらのサイトにたくさんありましたが、そのなかで、ContentfulというCMSのサービスが気になったので、Nuxt.jsと組み合わせて簡素なブログを作りました。 headlessCMS | A
[初心者向け]Contentfulの全体像・記事投稿の流れ・便利な機能をまとめてみた | DevelopersIO
どうも、ベルリンオフィスの小西です。 ヘッドレス CMS の Contentful について、そういえば概要説明的な記事は書いたことがなかったなと思い、本記事を執筆してみました。 この記事で Contentful の全体像や使用する際の流れを把握できるようにしているつもりです。 こういう情報が欲しいなどあればお気軽にご連絡ください。 Contentfulについて Contentful はヘッドレス CMS の一つです。 Contentful では記事やアセット（画像など）の管理を行い、記事の取得や表示などを行う「ビュー（View）」は外部に委ねるため、ヘッドレスと言われます。 Contentful はドイツの会社で、弊社のヨーロッパオフィスと同じベルリンに本社があり、アメリカ・ヨーロッパを中心にグローバルにサービス展開しています。 Contentfulの全体像 Contentful の基本
![[初心者向け]Contentfulの全体像・記事投稿の流れ・便利な機能をまとめてみた | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/ea57ff72b375f8110786fdfce004a8904911e6ea/height=288;version=1;width=512/https%3A%2F%2Fd1tlzifd8jdoy4.cloudfront.net%2Fwp-content%2Fuploads%2F2022%2F12%2FUntitled6-3.png)
GitベースのCMSとAPIベースのCMSの比較
JAMstack Advent Calendar 2019の11日目の記事です。 また、本記事は Git-based CMS vs. API-first CMS: Which Headless CMS Should You Choose? を翻訳したものです。 （提供元には事前に許可を得て掲載しています） ========== 世界中がクラウドにシフトしている中、CMSはおよそ20年間、古い技術・アーキテクチャのままでした。 しかもそれらは今でも動作しており、WordPressは全Webサイト中で34%のシェアがあります。 イノベーションとより良いデジタル体験の需要の高まりにより、モダンなフロンエンドツールは、より軽くて速くてセキュアなサイトを構築できるようになりました。 でもあなたのウェブサイトのコンテンツは依然として前のままですよね？ 是非ヘッドレスCMSの世界に足を踏み入れてみましょ
趣味をアウトプットするためにブログをはじめようと思い立ちまして、 せっかくなので最近勉強中のNuxt.jsを使用してブログを作成してみました！ 記事表示までの手順をまとめてみたので、参考にしていただければと思います！ <前編>ではNuxtプロジェクトの作成からContentfulのセットアップまで、 <後編>では記事の作成、Nuxtでの表示、Netlifyへのデプロイまでの手順をまとめてあります。 なお、この記事はこちらの動画を大いに参考にしています。 併せて参考にしていただければと思います。 Nuxtプロジェクトの作成 前提条件として、nuxtはインストール済みとします。 $ npx create-nuxt-app <project-name> nuxtで新しくプロジェクトを作成します。 設定はすべて初期設定のままです。 次に必要な物をインストールします。 $ cd <project-n
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ページを開く
国産Headless CMS 「Micro CMS」を試してみた - Qiita
Rails + Contentful で LP のコーディングをゼロにする - pixiv inside
イベントの情報サイトをPWAで作ってみた【Nuxt.js】 - Qiita
【Contentful】入門。Conentfulとは？導入方法・設定手順の解説 | FromsBlog
Nuxt + Contentful + Netlifyでブログ作成全手順<前編>
Headless CMS を導入する · Issue #3 · vuejs-jp/vuefes-2019