Awesome Jamstack
Jamstackを扱う資料や関連プロジェクトをまとめたAwesomeリストです。
目次
- 目次
- 一般情報
- チャット
- プラットフォーム
- ノーコードプラットフォーム
- Jamstackサイト事例
- 静的サイトジェネレーター
- CMS
- API
- サーバーレス
- 動画
- チュートリアル/記事
- ポッドキャスト
- 書籍
- ライセンス
一般情報
- Jamstack
- Jamstack resources - ジャムスタックに関する動画と記事
- the New Dynamic - ディレクトリに掲載されたツールを選び、ジャムスタックで作業を行ってください。ショーケースを閲覧し、インスピレーションを得てください。
- Statichunt - ジャムスタックテーマとリソースディレクトリ
- Built At Lightspeed - ジャムスタックテーマ、スタートアップ、UIキットを豊富に収録したディレクトリ
チャット
プラットフォーム
- Netlify - 現代のウェブプロジェクトを自動化する一括プラットフォーム
- Vercel - 構成なしのツールとワークフローを備えた、現代のウェブアプリ向けの一括サーバレスプラットフォーム
- Layer0 - 大規模で動的なウェブサイトと、最高水準のパフォーマンスを実現するための統合CDN、EdgeJS、予測的なプリフェッチ、パフォーマンスモニタリングを備えた、ジャムスタック専用の一括プラットフォーム
- Azure Static Web Apps - 統合されたCI/CDワークフロー、認証、CDNなどを備えたフルスタックサーバレスホスティング
- Stormkit - 現代のJavaScriptアプリ向けの強力な一括インフラ。Gitフローとビルド、デプロイ、スケーリングをスムーズに統合します。
- Cloud 66 - 自社のクラウドアカウントに静的ウェブサイトをビルド・デプロイします。
For more resources about Static Web Apps see (Awesome Static Web Apps)[https://github.com/staticwebdev/awesome-azure-static-web-apps].
ノーコードプラットフォーム
- Jamstack.new - Stackbitが提供する1クリックで新しいジャムスタックサイトを作成
- Storipress - 統合されたサイトビルダーとワークフロー管理を備えた、一括発行・ブログプラットフォーム
- Draftbox - コーディングなしで、WordPressやGhostのブログに高速かつ安全なフロントエンドを提供。
- Plasmic - Reactコンポーネントやジャムスタックサイトの視覚的な構築に最適な強力なデザインツール。
- TeleportHQ - フロントエンド設計・開発プラットフォーム。TeleportHQは、ヘッドレス静的ウェブサイトの作成と公開を即時に行える協働型フロントエンドプラットフォームです。無料コードエクスポート、3つの無料プロジェクト、無制限の協働者を提供。
- Silex - 任意のヘッドレスCMSに接続可能な視覚的なウェブサイトビルダー。出力は静的HTMLとCSS。自宅サーバーで実行可能で、ロックインなし。
Jamstackサイト事例
- React - Gatsbyに構築されています。
- Squoosh.app - Netlify上でホストされ、現代のウェブアプリの高度な機能を示しています。
- Hopper - Gatsbyに構築され、Netlify上でホストされています。
- VSCode Power User Course - Gatsbyに構築され、Netlify上でホストされたPWA。
- CloudyCam - Next.jsで構築されたPWAがZeit Now v2のサーバレスプラットフォーム上でホスティングされています
- FbaMonthly - Netlify上でホスティングされ、Jekyll、Netlify Functions、Netlify Formsで構築されています
- Jarod Peachey - Gatsby + MaterialUIで構築され、Netlify上でホスティングされています
- ProtonDB - React/MaterialUI/FirebaseがNetlify上で2018年8月からホスティングされており、Linuxゲーミングコミュニティで注目されています
- Creative Designs Guru - Eleventy.jsで構築され、Netlify上でホストされ、Tailwind CSSでスタイル設定されています。
- HandleDroid - Next.js、MongoDB、Auth0、AWS CloudWatch、SendGrid、Stripeで構築され、Netlify上でホスティングされています
- Backlinko - Next.js、ヘッドレスWordPress、Netlifyで構築されています
静的サイトジェネレーター
- Gatsby - React向けの高速な静的サイトジェネレーター
- Next.js - 静的およびサーバーレンダリングされたアプリケーション向けの軽量フレームワーク
- Hugo - HugoはGoで書かれた静的サイトジェネレーターです
- Jekyll - Jekyllはシンプルで、ブログに適した静的サイトジェネレーターであり、個人、プロジェクト、組織向けサイトに最適です
- Hexo - Node.jsをベースにした高速でシンプルかつ強力なブログフレームワーク
- Metalsmith - 非常にシンプルで、プラグイン可能な静的サイトジェネレーターです
- Phenomic - モジュール化されたウェブサイトコンパイラです
- Gridsome - Vueを活用した静的サイトジェネレーターで、ヘッドレスCMS、API、またはMarkdownファイルに対応したCDN対応ウェブサイトを構築できます
- Nuxt.js - サーバーサイドレンダリング、静的、伝統的なシングルページアプリケーション向けの多機能なVueベースのフレームワークです
- eleventy - さまざまなテンプレートファイルをHTMLに変換するシンプルな静的サイトジェネレーターです
- Nift - C++で開発されたクロスプラットフォームオープンソースウェブサイトジェネレーターで、非常に高速かつ強力です
- Astro - ほぼJavascriptを送信しないで、より高速なウェブサイトを構築できます
- FactorJS - Viteをベースにした次世代フレームワークです
- Mandu - Bun + Reactで構築されたエージェントネイティブなフルスタックフレームワーク。静的エクスポート、SSR、ファイルシステムルーティング、ランタイムのアーキテクチャガード、100以上のMCPツールを備え、AIエディタがサイトをエンドツーエンドで操作できます。
- Bloggrify - ブログ用のNuxt Contentレイヤー。テーマ、SEO、RSS、アナリティクスが事前設定済み。
より包括的な一覧は Jamstack generators を参照してください。
CMS
- Cosmic - RESTおよびGraphQL APIをサポートするヘッドレスCMS。
- Kentico Kontent - クラウドネイティブなヘッドレスCMSでスケーラブル。
- Contentful - デジタルチーム向けのコンテンツインフラ。
- Decap CMS - オープンソースのGitベースのCMS (元々は Netlify CMS として知られていた)。
- ButterCMS - ヘッドレスCMSおよびコンテンツAPI。
- Scrivito - デジタルエージェンシーと中規模から大規模の企業向けに構築された、クラウドベースのJavaScript CMS。
- Hygraph - GraphQLヘッドレスCMS。
- Apito - CDN、Webhook、チーム協働、コンテンツ修正、クラウド関数を備えたクラウドベースのヘッドレスCMS。
- Prismic - 開発者およびマーケター向けのヘッドレスAPICMS。
- Siteleaf - 静的サイト向けの使いやすいCMS。
- DatoCMS - 編集者が愛するAPIベースのCMS。
- Prose - ProseはGitHub向けのコンテンツエディタで、ウェブサイトの管理を目的として設計されている。
- Forestry - 静的サイトジェネレータで構築されたサイト向けのヘッドレスCMS。
- Coisas - GitHubのMarkdown(およびその他の)ファイルの編集に用いるクライアントサイドCMS。
- Cockpit - 自前サーバーで運用可能なヘッドレスかつAPI駆動型CMS。
- HeadlessCMS - ジャムスタックサイト向けのコンテンツ管理システムの一覧。
- TakeShape - Netlifyへの1クリックデプロイ可能なヘッドレスGraphQLAPICMS。
- Ghost - オンライン出版物向けのヘッドレスCMS。
- Strapi - フロントエンド開発者に支持される、オープンソースのヘッドレスCMS。
- Flotiq - 手軽なヘッドレスCMS
- TreacleWP - WordPress APIのホスティング
- Agility CMS - 開発者とコンテンツ編集者にとって最適な両方の長所を融合
- CloudCannon - ジャムスタックサイト向けのGitベースのCMS
- Contember - カスタムコンテンツ管理。GraphQL APIとユーザー中心の管理画面を構築・運用するための手間なしのソリューション
API
認証
- Auth0 - シングルサインオンとトークンベースの認証
- Netlify Identity - GoTrue API を基盤とする、一通りの認証機能を提供します。
- Stytch - パスワードレス認証とセッション管理のAPI。Vercel上のサンプルで試せます。
- Clerk – React、Next.js、現代ウェブ向けに設計された完全なユーザー管理UIとAPI
- Corbado – Corbadoは、数行のコードでウェブサイトやアプリにパスキーを追加することで、パスワードなし認証を実現します
- Scalekit – 既存の認証システム(Auth0、Firebase、Cognitoなど)に企業向けSSO(SAML、OIDC)およびSCIMプロビジョニングを追加可能で、リライトなしで実現
コメント
- Disqus - ウェブサイト上のディスカッションを向上させ、ウェブ全体の会話に結びつけるグローバルコメントシステム
- Facebook Comments - コメントプラグインにより、ユーザーはFacebookアカウントを使ってあなたのサイトのコンテンツにコメントできます
- Utterances - GitHubのイシューに基づく軽量コメントウィジェット。ブログコメント、WikiページなどにGitHubのイシューを使用できます
フォーム
- Fetch Forms - フォームビルダーのスピードでフォームを作成し、シンプルなAPIを呼び出してアプリケーションに活用できます
- Formcarry - フォームのHTMLエンドポイントを手軽に提供、強力なダッシュボード、信頼性の高いスパムブロッキング、添付ファイルのアップロード、Zapier統合を備えたフォームエンドポイント
- Formcake - 開発者向けフォームバックエンド:Zapier統合、ゼロ依存、シンプルなAPI、無制限のフォーム
- Getform - デザイナーと開発者向けフォームバックエンドプラットフォーム。静的サイトのフォームエンドポイントを数分で設定し、Zapier統合とWebhooksでデータを拡張できます
- Netlify Forms - ビルド時にHTMLファイルをデプロイ時に解析することで、組み込みのフォーム処理を実現
- Arengu - Arenguでサインアップとログインフォームを作成し、ソーシャルログインを有効にし、2FAを追加またはパスワードレスフローを使用して、APIまたは認証プロバイダーでユーザーを認証します。
- Static Forms - サーバー側コードなしでHTMLフォームを簡単に統合できます。ユーザーがフォームを提出した後、当該フォームの内容を登録済みメールアドレスに送信します。
- Form.taxi - HTMLフォームのエンドポイントで提出を簡単に処理。メール通知、ファイルアップロード、提出履歴の保存、GDPR対応データ処理など、豊富な機能を提供します。
Eコマース
- Astro Snipcart - Astro Snipcartは、AstroフレームワークとSnipcartプラットフォームを用いてEコマースサイトを構築できるようにする開発者向けツールです。
- Flatmarket - Flatmarketは、静的ウェブサイト向けの無料かつオープンソースのEコマースプラットフォームです。
- GoCommerce - Jamstackサイト向けのヘッドレスEコマースプラットフォーム。
- Snipcart - 開発者向けの強力なショッピングカートプラットフォーム。
- Moltin - 開発者向けのEコマースAPI。
- Trolley - Jamstack向けに設計されたショッピングカート。
- Shopify - ShopifyのヘッドレスEコマースソリューション。
- Commerce.js - 開発者向けのAPI中心のEコマースプラットフォーム。
- CartQL - Jamstack向けに構築されたGraphQLショッピングカートおよびチェックアウトAPI。任意のフレームワークや在庫システムと連携可能です。
- Medusa - 開発者が優れたデジタルコマース体験を構築できる、オープンソースのヘッドレスコマースエンジンです。
- Saleor - オープンソースで、GraphQLファーストかつ技術非依存のコマースエンジンです。
検索
- Algolia - ビジネスに検索機能を組み込むための最も信頼できるプラットフォーム。
- Lunr - フロントエンドで検索をシンプルに。
- CloudSh - JavaScriptの数行で強力な検索を実現。
データベース
- GraphQL - API用のクエリ言語と、既存データでそのクエリを実行するランタイム。
- Graphcool - サーバーレスGraphQLバックエンドを開発できる、オープンソースかつセルフホスト可能なBackend as a Serviceです。
- FaunaDB - クラウドまたはオンプレミスで、関係型NoSQLデータベースにJOIN、インデックス、マルチリージョンACIDトランザクションを備えたもの。
- Fireproof - ゼロ依存、オフライン対応のCRDTデータベース。ブラウザ内で実行され、任意のクラウドに接続可能。
- Jexia DataSet - REST APIスキーマとスキーマレスのクラウドデータストレージに内蔵されたバリデーター、関係、集計関数。
- Tigris - オープンソースデータプラットフォーム。データベース、リアルタイム検索用自動検索インデックス、キャッシュ、リアルタイムのpub/subを提供。
- Nhost - Postgresデータベース、即時利用可能なHasura GraphQL API、認証、ストレージ、サーバーレス関数を備えた、オープンソースのBackend as a Serviceです。
ファイル管理
- Jexia FileSet - アプリケーション向けREST APIファイルマネージャー。インデックスと追加機能を提供。
自動化
サーバーレス
- Netlify Functions - NetlifyではAWSアカウントなしでLambda関数をデプロイ可能。関数管理はNetlify内で直接行える。
- Amazon Lambda - サーバーのプロビジョニングや管理を必要とせずコードを実行できる。
- Microsoft Azure
- Azure Functions - サーバレスコンピューティングサービス。インフラストラクチャを明示的にプロビジョニングまたは管理する必要なしにコードをオンデマンドで実行可能。
- Azure Logic Apps - クラウドサービスおよびオンプレミスシステム間のアプリケーションとデータを統合する自動スケーラブルなワークフローの構築を簡素化。
- Google Cloud
- App Engine - インフラストラクチャを完全に抽象化し、コードに集中できるサーバレスアプリケーション。
- Cloud Functions - クラウドサービスを構築・接続するためのサーバレス環境。
- Cloud Datastore - 高度にスケーラブルなNoSQLデータベース。自動シャードとレプリケーションを備える。
- Cloud Storage - 高QPS要件向けの地理的リドンダントオブジェクトストレージ。
- Cloud Pub/Sub - すべてのメッセージサイズと速度に対応する地理的リドンダントリアルタイムメッセージング。
- Apigee - マルチクラウド環境向けのエンタープライズAPI管理。
- Endpoints - Google Cloud上で構築されたAPI管理アプリ。
- Cloud Dataflow - サーバレスストリームおよびバッチデータ処理サービス。
- BigQuery - 企業向けの高度なクラウドデータウェアハウスソリューションをデプロイするためのサーバレスデータウェアハウスサービス。
- Cloud ML Engine - カスタムGoogleハードウェア(テンソルプロセッシングユニット)をベースに構築された、自動的にスケーリングされるサーバレス機械学習サービス。
- Serverless - サーバレスアーキテクチャのデプロイおよび運用に用いるツールキット。
- Cloudinary - サーバレスメディア(画像/動画)管理プラットフォーム。人気の言語ごとにSDKを提供し、Jamstackにメディアウィジェットを組み込むことで、メディア、CDN、ストレージ、変換など、簡単に管理できるようにしています。
- imgix - サーバレス画像配信および管理サービス。imgixは、あなたの画像が保存されている場所(例:S3、GCS、ウェブフォルダ)に接続し、シンプルかつ堅牢なURLパラメータを使って、画像を変換・最適化し、知的に配信します。
- TwicPics - サーバレス画像および動画の最適化と変換サービス。TwicPicsは、あらゆるスタックに組み込み、フロントエンド開発者が完全な制御をもってリアルタイムでメディアを最適化できるようにします。
より包括的な一覧は Awesome Serverless を参照してください。
動画
- The New Front-end Stack. JavaScript, APIs and Markup - マット・ビルマン。
- Rise of the Jamstack - マシアス・ビルマン。
- Jamstack: Silly name, serious stuff - フィル・ハックスワース。
- Git-based or API-driven CMS - クリス・マクレ。
- Jamstack Tutorial - Full site using Netlify & Hugo - freeCodeCamp.org.
- Gatsby JS Crash Course - Traversy Media。
- How We Got Here and The Future of the Web - ケイル・マスウェル。
- Talks from all the Jamstack Conferences - Jamstack Conf。
- How I Used React, Vue, & Node to Build a Single Jamstack App - アハム・アワイス。
- React vs Vue, Gatsby vs Gridsome - building the same site - Ondrej Polesny。
- WTF is Jamstack? - Ondrej Polesny。
チュートリアル/記事
- Ghost on the Jamstack
- Jamstack Ecosystem
- Building a contact form in Gatsby using Getform
- Getting Started with Gatsby and Cockpit — Part 1 of 2
- Creating Static E-commerce site with GatsbyJs
- For Static Sites, There’s No Excuse Not to Use a CDN
- E-commerce front-end for Vue.js, Nuxt.js and Snipcart
- Jamstack and Netlify: Do We really need another buzzword?
- The Jamstack Startup Landscape
- How I built my blog using Gatsby and Netlify
- Developer’s Guide to Headless E-Commerce
- Handling Static Forms, Auth & Serverless Functions with Gatsby on Netlify
- Jamstack for Clients: Benefits, Static Site CMS, & Limitations
- Exploring Netlify CMS, a React & Git-Based Content Management System
- Jamstack PWA — Let’s Build a Polling App. with Gatsby.js, Firebase, and Styled-components Pt. 1
- Dynamic Static Sites with Netlify and iOS Shortcuts; Use Netlify Functions, a Gulp build process and iOS Shortcuts to publish dynamic content to your static site
- Gatsby for Apps
- Turning the Static Dynamic
- Going Jamstack with Netlify and Nuxt
- Getting Started With Gridsome
- The Complete Beginner’s Guide to Deploying Your First Static Website to IPFS
- A Broad Discussion on Jamstack & E-Commerce (Podcast & Transcript)
- The Beginner’s Guide to Static Site Generators
- Headless CMS Options for Your Jamstack Site
- State of Jamstack 2020 report
- Jamify Tutorials — Publish flaring fast blogs with Gatsby and Ghost
- Why is Next.js my ultimate choice over Gatsby, Gridsome, and Nuxt?
- Generating a Static Site with Flask and Deploying it to Netlify - PythonとFlaskを使って静的サイトを作成し、Netlifyにデプロイすることで、JAMstackを活用する。
- Static Site Comments: A Jamstack How-To
ポッドキャスト
書籍
- Modern Web Development on the Jamstack - マシアス・ビルマンとフィル・ハックスワース(オライリー出版)。
- Hugo in Action
- Jumpstart Jamstack Development - クリスティアン・ペコラロとヴィンチェンゾ・ガンビノによる。
- The Jamstack Book - レイモンド・カーメンとブライアン・リナルディによる。