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
Contentfulだけで画像変換が割と優秀。フォーマット変換・リサイズ・顔切り抜きなど試してみたよ | DevelopersIO
ヘッドレスCMSのContentfulにはアセット管理機能があり、投稿された画像や動画、各種ファイルを配信するエンドポイントを持っています。 例: https://images.ctfassets.net/e1p9n7i8vdx5/16c9dAKMoKF90j49d6mGmr/788636ce6b837cd8a6cc67a298011d7e/73047226-2a82-484d-8f08-7b7e1a28a2f8.JPG 実はこのURLでパラメーターによる画像変換や最適化が可能で、例えば画像フォーマットの変換やリサイズ、写真内の人物の顔を中心にした自動的な切り抜きなど、シンプルながら優秀な画像配信機能を持っています。 本記事ではその使い道をまとめてみます。 1. フォーマット変換 Contentfulに投稿された画像について、jpgやavifなどの別フォーマットに変換して配信が可能です。
STEP.1：NetlifyでBuild hooksを作成 まずは、Netlify側でBuildを走らせるAPI（Build hooks）を作成します。Contentful Webhookで変更を通知した後に、Build hooksを発火させるためです。 やり方は超簡単！ Settings > Build & deploy > Build hooksで「Add build hook」をクリック。 その後、Build hook nameを適当につけて、「Save」で保存しましょう。 すると、APIが作られるので、コピーしておきましょう。Contentful Webhookを設定する際に使います。 STEP.2：Contentful Webhookの設定 続いて、Contentful Webhook側の設定をしていきます。 最初にSettings > Webhooksをクリック！ 次に、右サイ
Gatsbyjs + Netlify + Contentful で Blogを作成 今回作成するサイトのDemoです。 こちらが今回実際に作成したBlogです。 以前にgatsby-starter-blogでブログを作成したのですがCMSを利用したいと思い、 新たにgatsby-starter-gcnでブログを作成したので備忘録を残します。 利用したサービス Gatsbyjs GatsbyjsはReactを利用したモダンなサイトを高速に作成できるオープンソースフレームワークです。 Gatsbyjsでなにか作りたい方はテンプレートが豊富に用意されているので、そちらを利用するといいと思います。 Netlify Netlifyは静的なサイトを高速で提供できるホスティングWebサービスです。 フロントエンドのビルド、デプロイ、ホスティングの全てを高速に行ってくれます。 また、NetlifyはGit
curlなど他のコード例は、公式ドキュメントをご確認ください。 ContentfulのImages APIとはContentfulのImages APIとは、「画像ファイルを取得して操作するためのAPI」です。たとえば、次のようなコードがあるとします。 const contentful = require('contentful') const client = contentful.createClient({ space: '<space_id>', accessToken: '<content_delivery_api_key>', }) const asset = client.getAsset('<asset_id>').then((asset) => { // ここで画像を操作すると仮定する }) このgetAsset()の返り値assetを用いると、画像の取得は次のようになり
Nuxt,Netlify,Contentful,Python,Firebase,Herokuを使った無料でサーバレスな複業メディアサイトを作った話 - Qiita
Nuxt,Netlify,Contentful,Python,Firebase,Herokuを使った無料でサーバレスな複業メディアサイトを作った話PythonHerokuFirebase個人開発Nuxt 何を作ったか エンジニア向けの複業(副業)メディアサイトを作りました。 複業(副業)関連のニュースを毎日自動で更新して配信してます。 https://fukugyou.dev/ 自分自身2年ほどエンジニアとして複業をしていて、今後もっと複業(副業)をする、興味を持つエンジニアは増えると思いますし、個人的にはもっと複業の良さを知ってほしいという思いがあります。 もちろん複業にはメリットデメリット、色々な意見があると思っていますが、そこも含めて世の中の複業にまつわるニュースを集約してフラットに情報提供出来る場があると良いなと思い当サイトを作りました。 個人で開発を進めておりましたがフロントエン
ベルリンオフィスの小西です。 ヘッドレスCMSのContentfulで、投稿された記事や画像などのアセットを別のスペースに移行したり、一括でエクスポートしたいケースがあります。 Contentfulからインポート/エクスポートツールが公開されているので、CLIを使ってスペース内のリソースを丸ごと移行してみます。 CLIのインストール npm npm install -g contentful-cli yarn yarn global add contentful-cl Management APIキーの取得 ダッシュボードから、Management APIキー（CMA）を取得します。 Management APIキーの一覧ページでは、所属するOrganizationに紐づく全てのAPIキーが表示されるのルので、わかりやすい名前をつけておいたほうが管理が楽になります。 「Generate」を
昨年末（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 Cloud を使うと、Gatsby + Contentful で構築したサイトにプレビュー機能を簡単に実装できたので、その手順を紹介します。 Gatsby Cloud とは Gatsby Cloud は、Gatsby 社が提供するクラウドサービスで、Gatsby 製サイトのビルド、デプロイ、ホスティング、CMSプレビューなどの機能を基本無料で使うことができます。 有料プランでは、月間のビルド数上限が増えたり、並列ビルドが可能な Incremental Builds を利用可能になります。 いくつか機能を簡単に紹介します。 Lighthouse Reports 各ビルドに Lighthouse のレポートを出力することが可能です。 ビルド履歴にスコアが残るので、推移が見えて良いです。 Gatsby Preview この記事のメインである、サイトのプレビュー機能です。 データソー
Nuxt.js / Contentful / NetlifyでJAMstackなブログ開設 - Qiita
繋がらないマッチングプラットフォーム「FLAPTALK」を運営する株式会社OneSmallStep代表取締役CTOの@_takeshi_24です。 この記事はアドベントカレンダー「diffeasyCTO西の24(にし)日連続投稿チャレンジ Advent Calendar 2019」の24日目の記事です。 この記事は前回の「JAMstackなブログ開設にチャレンジ」「Nuxt.js / Contentful でJAMstackなブログ開発編」の続きです。 JAMstackなブログ開発にチャレンジしたい方、是非Qiitaアカウントかtwitterをフォローしていただき、ツッコミやいいね！お願いします！ 前回はContentfulで記事を投稿し、Nuxt.jsで表示するところまでを解説しましたが、今回はContentfulへの記事投稿をトリガーにNetlifyでGitHubからNuxt.jsのソ
GatsbyでContentfulのマークダウン形式のテキストを読み込んでHTMLとして出力する | DevelopersIO
どうも、ベルリンオフィスの小西です。 ヘッドレスCMSのContentfulで長文入力フィールドを作る際、マークダウン形式 とリッチテキスト形式が選択できます。 基本的には使いたい方を使えばいいのですが、Contentful的にはマークダウン形式がおすすめな気がします。 リッチテキストを扱う方法については以前記事を書いたので、 今回はContentfulで投稿されたマークダウンテキストをGatsbyでパースしてHTML表示する方法についてまとめます。 Gatsbyでフロントエンドを作る際、マークダウンを出力する方法はいくつかありますが、今回はGatsbyのオフィシャルプラグインのみを使う方法で行います。 前提 Gatsby : 4系以降のバージョン Gatsbyプラグイン gatsby-source-contentful : 7系以降のバージョン 3系以前のバージョンの場合、Content
contentful を触り始めてみました。 Content Delivery API を使ってエントリーを取得するクエリの記述を一部まとめてみました。 ブログによくある以下のような記事を取得できます。 記事一覧 カテゴリアーカイブ 月別アーカイブ ページネーション 検索一覧 その他詳細は公式を参照してください。 準備 client には Contentful Delivery APIクライアント が入っています。 const contentful = require('contentful') const client = contentful.createClient({ space: '<space_id>', accessToken: '<content_delivery_api_key>' });
![[HeadlessCMS] contentful でエントリーを取得する色んなクエリ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/2a30f648054964ea1ed5a0315bab5de21e8ead34/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSGVhZGxlc3NDTVMlNUQlMjBjb250ZW50ZnVsJTIwJUUzJTgxJUE3JUUzJTgyJUE4JUUzJTgzJUIzJUUzJTgzJTg4JUUzJTgzJUFBJUUzJTgzJUJDJUUzJTgyJTkyJUU1JThGJTk2JUU1JUJFJTk3JUUzJTgxJTk5JUUzJTgyJThCJUU4JTg5JUIyJUUzJTgyJTkzJUUzJTgxJUFBJUUzJTgyJUFGJUUzJTgyJUE4JUUzJTgzJUFBJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz03MGMzNmUwYzdiNTZlMzE1ZjliNjFmNWFkMmE5MGNjZQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDByeW82MjBvcmcmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTE4ZjE3ZWRiNGI0MThkNTRmODI2Nzk0YmNhMmQ5ZDE0%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4gVW5pdHnjgrLjg7zjg6DplovnmbrogIXjgq7jg6vjg4k%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3De0bd3a9b067da2acad627e9d3d2e407d)
Github Actions で Gatsby + Contentful のブログを VPS にデプロイする - utamt engineer blog
Gatsby + Contentful で作成したブログを VPS で運用しています。Contentful で記事を作成したり、コードを github に push したときに自動でデプロイするようにしたかったので、その仕組みを Github Actions を使って構築しました。 前提 以下の状態であることを想定します。 VPS で gatsby のアプリが稼働している (= npm run serve が実行中) 公開鍵認証で SSH が可能である 公開鍵/秘密鍵が作成済みで、~/.ssh/authorized_keys に公開鍵が登録されている ワークフロー作成 Github Actions は、プロジェクトの .github/workflows ディレクトリ配下にある .yml ファイルの内容を元に実行されます。ファイル名は任意ですが、今回は deploy.yml とします。 na
GatsbyJS製ブログをNetlifyでbuildしたら3度失敗したのでその知見 - dassimen.log
こちらの動画を参考に、GatsbyJS＋ContentfulというHeadlessCMSを使ったブログを開発しました。 www.youtube.com ぶっちゃけ作るだけならそこまで労せずでしたが、動画に書かれていない先、 Netrifyへのデプロイで3度詰まったので覚書を兼ねて記載。 アクセストークンの指定漏れ 問題：TypeError: Expected parameter accessToken 結論：開発環境なら.envで指定するアクセストークン、当然Netlifyにも教えてあげなきゃ駄目です。 特に行き詰まったというよりそりゃなって思った内容ですが、載せておきます。 セキュリティのためCMSへのアクセストークンは環境変数に指定すべきですが、 NetrifyのWebから環境変数を指定する場合の起動経路は以下。 Settings > Build&Deploy > Build envi
自作のブログをContentful（ヘッドレスCMS） + Next.jsのSSGで作ったのですが、Contentfulでコンテンツを更新した後、ビルドしてデプロイするためにGitHub Actionを実行する必要があります。 手動でやってましたがめんどくさいので、コンテンツを更新したら自動でアクションが実行されるようにしたいと思います。 大まかな手順 GitHub Personal Access Tokenを作成 ContentfulでWebhookを設定 Actionを修正 前提:そもそもWebhookでGitHub Actionを実行する設定ってどうすればいいの？ GitHub Actionの公式Docを見たところ、どうやらrepository_dispatchイベントというのを発生させるといいようです。 URLは、https://api.github.com/repos/OWNER
2019.08.31に公開 2019.10.12に更新 ブログ構築 4. Contentfulのセットアップ No.4 / 4 「ブログ構築」では、Nuxt.js v2.14未満が使用されています。 Nuxt.jsはv2.13~14で大きなバージョンアップがありました。それに伴い、書き方も大きく変化しています。 v2.14以上で書かれた「ブログ構築」の続編は、カテゴリー「 ブログ構築TS 」 で公開しています。 今回達成すること Contentfulにブログ記事を作成して、Nuxt側で表示するためのセットアップを行います。 また、本番環境のNetlifyにブログ記事を表示する設定も行います。 具体的には、 ConttentfulのSDKを導入 dotenvの導入 開発環境へ環境変数をセット ContentfulのAPIを取得する設定 Netlifyへ環境変数をセット を行います。 Cont
はじめまして！飲むヨーグルト飲みすぎてお腹壊してる系エンジニアの ryt_kwzacky です！！ flintチームに加わってから、クラウドリンクスのフロントエンド開発をしたりチームのビジネス課題をエンジニアリングで解決したり飲むヨーグルトを飲んだりしています。 現在flintではハイエンド向け副業プラットフォームクラウドリンクスという事業を作っています。 2020年1月に正式ローンチした本サービスですが、実際にプラットフォーム上でマッチングする例が多々出てきました。 そこで、発生したマッチング事例を取りまとめメディアとして発信していくことになり、そのメディアを開発する上で採用したHeadlessCMSであるContentfulについて紹介させていただきます。 最終的な結論としては、Contentful + Nuxt.js + Firebaseの構成で自由度の高いメディアをすぐに立ち上げら
はじめに Nuxt.jsとcontentfulを使ってブログを構築してみます。 環境 node v10.12.0 vue-cli 3.1.1 今回使うもの Nuxt.js contentful contentfulって？ 2011年にベルリンのスタートアップが作ったAPIベースのCMSです。 結構前ですが、1300万ドルを調達しています。 ベルリンの「Contentful」が1300万ドルを調達、最先端のプラットフォーム向けCMSの拡大目指す 手順 実際にやっていきましょー Integrate Contentful with Nuxt.js 1. Nuxt.jsをインストール 先ずはvue-cliをインストール
ContentfulからWebhockでGitHub Actions叩いてGatsbyのプロジェクトをビルドしてNetlifyにDeployする - Qiita
ContentfulからWebhockでGitHub Actions叩いてGatsbyのプロジェクトをビルドしてNetlifyにDeployするNetlifygatsbyCICDnetlify-cliGitHubActions はじめに こんにちは.TikTokで日向坂46のメンバーの目の部分の切り抜きでも誰だか分かるよね？という感じの趣旨の動画を見たのですが、推しの松田好花さんだけわかりませんでした.悔しいです.筆者です. さて、GatsbyのプロジェクトをNetlifyでホスティングしております. 今までNetlifyでビルドしてましたが、意外と無料枠超えるのではという不安が発生しました. Netlifyの無料枠超えるのでは Netlifyの無料枠では1か月で300分までビルドが可能です. 筆者はHeadless CMSのContentfulを用いてサイトのコンテンツを管理しております
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
【Contentful Webhook】コンテンツ変更を検知し、Netlifyで自動でビルドさせる方法
Gatsbyjs + Netlify + Contentful で Blogを作ってみた。 - Qiita
Contentfulの画像を操作するImages APIの使い方
Contentfulで記事やアセットを一括エクスポート/インポートする方法 | DevelopersIO
Gatsby cloud と Headless CMSの紹介
Gatsby Cloud で Contentful にプレビュー環境を簡単構築する - Qiita
[HeadlessCMS] contentful でエントリーを取得する色んなクエリ - Qiita
Contentfulでコンテンツを更新したらGitHubActionを実行したい
ContentfulからAPIを取得してNuxt.jsで記事一覧を表示する - 独学プログラマ
新規事業のメディア開発にContentfulを採用した話 - クラウドワークス エンジニアブログ
Nuxt.jsとcontentfulでブログを作成する - Qiita