Jamstack and WebApps

Jamstack and WebApps

What is Jamstack?

• Jamstack is Javascript, APIs, and Markup.
• Jamstack
• What is Jamstack
• Awesome Jamstack

• Structure

  • JavaScript Frontend Frameworks
  • Static Site Generator
  • Headless CMS
  • Deployment
  • Third Party SaaS

List JavaScript Frontend Frameworks

• React
• Vue
• Angular
• Svelte

List Static Site Generators

• Next.js
• Gatsby
• Hugo
• Jekyll
• 11ty (Eleventy)
• Nuxt
• Docosaurus

List Headless CMS's

• Contentful
• Strapi
• Netlify CMS
• Dato CMS
• Ghost
• Publii
• Prose
• Forestry
• Sanity
• Stackbit

List of Deployments (Static Hosting)

Comparison

• Github Pages

• Netlify:

  • Netlify
  • Netlify Drop
• Zeit, now Vercel

• Cloudflare:

  • Cloudflare Pages
  • Cloudflare Workers

• Google:

  • Firebase
  • Google Cloud Platform : How to GCP
• Azure Static Web Apps–App Service - Microsoft Azure, How to Azure

• Amazon:

  • AWS Amplify
  • AWS
• Surge
• Render
• Digital Ocean App Platform
• NearlyFreeSpeech
• Peergos
• Neocities
• Oracle Cloud Free Tier
• Fleek
• CodaSite

Host Comparison

• CloudFlare Pages, Netlify, Zeit, Github Pages, and Gitlab Pages. Where to host for free?

Third Party SaaS

• Comments

  • Disqus
  • Staticman

• Search

  • Algolia
  • List.js

• Authorization

  • Auth0

• Form Submission

  • Typeform
  • FormKeep

• E-Commerce

  • Snipcart
  • Foxy.io

Learn Jamstack

• How to host and deploy a static website or JAMstack app to AWS S3 and CloudFront from freeCodeCamp
• A Step-by-Step Guide: Gatsby on Netlify from Netlify
• Build your own Blog from Scratch using Eleventy from filament group
• How to Host your Static Website with AWS - A Beginner's Guide from freeCodeCamp
• Hugo Tutorial: How to Build & Host a (Very Fast) Static E-Commerce Site from SnipCart
• How to Build Authenticated Serverless JAMstack Apps with Gatsby and Netlify from freeCodeCamp
• Which service? Netlify vs Vercel vs Azure Static Web App · Elio Struyf
• How to Deploy a Full-Stack App to the Web
• 10 Tips To Host Your Web Apps For Free
• Deploy A Web App (Golang, Java, ...) To The Cloud For Free - Simply How

Gatsby Starters

• BooGi: Gatsby Starter - Gatsby
• gatsby-starter-rocket-docs: Gatsby Starter - Gatsby
• gatsby-starter-docz-netlifycms: Gatsby Starter - Gatsby
• gatsby-personal-site-template: Gatsby Starter - Gatsby
• gatsby-markdown-typescript-personal-website: Gatsby Starter - Gatsby
• Gatsby Starter - Gatsby
• gatsbystarterportfolio: Gatsby Starter - Gatsby
• LekoArts/gatsby-starter-minimal-blog: Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and line highlighting. *
• Home - Julia Doe
• AbdaliDahir/gatsby-portfolio: creative personal & portfolio template based on gatsby. designed so you can showcase your work and write your blogs.
• gatsby-starter-foundation/blog-post.js at main · stackrole/gatsby-starter-foundation
• Chronoblog/gatsby-theme-chronoblog: ⏳ Chronoblog is a Gatsbyjs theme specifically designed to create a personal website. The main idea of ​​Chronoblog is to allow you not only to write a personal blog but also to keep a record of everything important that you have done.
• codebushi/gatsby-starter-dimension: Gatsby.js V2 starter template based on Dimension, designed by HTML5 UP. Check out https://codebushi.com/gatsby-starters-and-themes/ for more Gatsby starters.

Jekyll Themes

• mpa139/allanlab: Allan Lab website
• liuyxpp/liuyxpp.github.io: Homepage for my research group as an example of LYX Jekyll Theme.
• Niemeyer-Research-Group/niemeyer-research-group.github.io: Niemeyer Research Group site
• alshedivat/al-folio: A beautiful, simple, clean, and responsive Jekyll theme for academics
• mmistakes/minimal-mistakes: Jekyll theme for building a personal site, blog, project documentation, or portfolio.