> For the complete documentation index, see [llms.txt](https://irosyadi.gitbook.io/irosyadi/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://irosyadi.gitbook.io/irosyadi/webdev/jamstack.md).

# Jamstack and WebApps

## What is Jamstack?

* Jamstack is Javascript, APIs, and Markup.
* [Jamstack](https://snipcart.com/blog/jamstack)
* [What is Jamstack](https://www.freecodecamp.org/news/what-is-the-jamstack-and-how-do-i-host-my-website-on-it/)
* [Awesome Jamstack](https://github.com/automata/awesome-jamstack)
* Structure
  * [JavaScript Frontend Frameworks](#toc_3)
  * [Static Site Generator](https://www.staticgen.com/)
  * [Headless CMS](https://headlesscms.org/)
  * Deployment
  * [Third Party SaaS](https://github.com/agarrharr/awesome-static-website-services)

### 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](https://www.stackbit.com/)

### List of Deployments (Static Hosting)

[Comparison](https://jace.pro/post/2020-12-17-cloudflare-pages-netlify-zeit-github-pages-and-gitlab-pages-where-to-host/)

* [Github Pages](https://pages.github.com/)
* Netlify:
  * [Netlify](https://www.netlify.com/)
  * [Netlify Drop](https://app.netlify.com/drop)
* [Zeit](https://zeit.co/), now [Vercel](https://vercel.com/)
* Cloudflare:
  * [Cloudflare Pages](https://pages.cloudflare.com/)
  * [Cloudflare Workers](https://workers.cloudflare.com/)
* Google:
  * Firebase
  * Google Cloud Platform : [How to GCP](https://cloud.google.com/storage/docs/hosting-static-website)
* [Azure Static Web Apps–App Service - Microsoft Azure](https://azure.microsoft.com/en-gb/services/app-service/static/?cdn=disable#features), [How to Azure](https://docs.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website)
* Amazon:
  * AWS Amplify
  * [AWS](https://aws.amazon.com/getting-started/projects/host-static-website/)
* [Surge](https://surge.sh/)
* [Render](https://render.com/)
* [Digital Ocean App Platform](https://www.digitalocean.com/products/app-platform/)
* [NearlyFreeSpeech](https://www.nearlyfreespeech.net/)
* [Peergos](https://peergos.org/posts/p2p-web-hosting)
* [Neocities](https://neocities.org/)
* [Oracle Cloud Free Tier](https://www.oracle.com/cloud/free/#always-free)
* [Fleek](https://fleek.co/)
* [CodaSite](https://codasite.app/)

### Host Comparison

* [CloudFlare Pages, Netlify, Zeit, Github Pages, and Gitlab Pages. Where to host for free?](https://jace.pro/post/2020-12-17-cloudflare-pages-netlify-zeit-github-pages-and-gitlab-pages-where-to-host/)

### 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](https://www.freecodecamp.org/news/how-to-host-and-deploy-a-static-website-or-jamstack-app-to-s3-and-cloudfront/) from freeCodeCamp
* [A Step-by-Step Guide: Gatsby on Netlify](https://www.netlify.com/blog/2016/02/24/a-step-by-step-guide-gatsby-on-netlify/) from Netlify
* [Build your own Blog from Scratch using Eleventy](https://www.filamentgroup.com/lab/build-a-blog/) from filament group
* [How to Host your Static Website with AWS - A Beginner's Guide](https://www.freecodecamp.org/news/a-beginners-guide-on-how-to-host-a-static-site-with-aws/) from freeCodeCamp
* [Hugo Tutorial: How to Build & Host a (Very Fast) Static E-Commerce Site](https://snipcart.com/blog/hugo-tutorial-static-site-ecommerce) from SnipCart
* [How to Build Authenticated Serverless JAMstack Apps with Gatsby and Netlify](https://www.freecodecamp.org/news/building-jamstack-apps/) from freeCodeCamp
* [Which service? Netlify vs Vercel vs Azure Static Web App · Elio Struyf](https://www.eliostruyf.com/netlify-vs-vercel-vs-azure-static-web-app/)
* [How to Deploy a Full-Stack App to the Web](https://acidtango.com/thelemoncrunch/how-to-deploy-a-full-stack-app-to-the-web/)
* [10 Tips To Host Your Web Apps For Free](https://blog.patricktriest.com/host-webapps-free/)
* [Deploy A Web App (Golang, Java, ...) To The Cloud For Free - Simply How](https://simply-how.com/free-paas-hosting)

## Gatsby Starters

* [BooGi: Gatsby Starter - Gatsby](https://www.gatsbyjs.com/starters/filipowm/boogi)
* [gatsby-starter-rocket-docs: Gatsby Starter - Gatsby](https://www.gatsbyjs.com/starters/Rocketseat/gatsby-starter-rocket-docs)
* [gatsby-starter-docz-netlifycms: Gatsby Starter - Gatsby](https://www.gatsbyjs.com/starters/colbyfayock/gatsby-starter-docz-netlifycms)
* [gatsby-personal-site-template: Gatsby Starter - Gatsby](https://www.gatsbyjs.com/starters/surudhb/gatsby-personal-site-template)
* [gatsby-markdown-typescript-personal-website: Gatsby Starter - Gatsby](https://www.gatsbyjs.com/starters/SaimirKapaj/gatsby-markdown-typescript-personal-website)
* [Gatsby Starter - Gatsby](https://www.gatsbyjs.com/starters/anubhavsrivastava/gatsby-starter-hyperspace)
* [gatsby\_starter\_portfolio: Gatsby Starter - Gatsby](https://www.gatsbyjs.com/starters/algokun/gatsby_starter_portfolio)
* [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.](https://github.com/LekoArts/gatsby-starter-minimal-blog) \*
* [Home - Julia Doe](https://gatsby-starter-julia.netlify.app/)
* [AbdaliDahir/gatsby-portfolio: creative personal & portfolio template based on gatsby. designed so you can showcase your work and write your blogs.](https://github.com/AbdaliDahir/gatsby-portfolio)
* [gatsby-starter-foundation/blog-post.js at main · stackrole/gatsby-starter-foundation](https://github.com/stackrole/gatsby-starter-foundation/blob/main/src/templates/blog-post.js)
* [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.](https://github.com/Chronoblog/gatsby-theme-chronoblog)
* [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.](https://github.com/codebushi/gatsby-starter-dimension)

## Jekyll Themes

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