# 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) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://irosyadi.gitbook.io/irosyadi/webdev/jamstack.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.