Building Projects using Jamstack

Host your first static website on the internet with Netlify by dragging and dropping your project, gaining fast, global access and future interactivity via JavaScript and static site generators.

Deploy your jamstack site by dragging the updated folder into Netlify, publish a preview deploy, and serve the JavaScript via a content delivery network to reach many users quickly.

Install eleventy with npm and create the source and _includes structure, plus a .eleventy.js config. Explore templates, layouts, pagination, filters, and deployment scripts that render content into static sites.

Configure Eleventy with a simple config file that defines the input source and distribution folder, enabling cloud-ready builds and deployment using node and npm.

Discover how to include JavaScript in a Jamstack build by configuring pass-through copy, organizing a source JavaScript folder, and ensuring assets are served as static files during local builds.

Learn to deploy jamstack sites with drag-and-drop hosting, publish builds, and serve API data at build time, while setting up automated GitHub deployments.

Learn to integrate data into an Eleventy site by using the underscore data folder, looping over a JSON object to render meme images at build time.

Build a movie picker app from the jamstack skeleton by selecting genres to fetch movies from a movie database and randomly choose one for tonight.

Refactor the base HTML to include a persistent navigation and a reusable template, add an on-page movie list, and wire links for a multi-page jamstack app.

Apply css in a Jamstack project by wiring a stylesheet, selecting Verdana, and refining the nav bar and content while testing changes and wiring a random movie picker.

Explore Gatsby’s architecture, hook up the Stripe API, and render products into a static hosted HTML page for a Gatsby-based eCommerce store built with React in a jamstack workflow.

Install and configure stripe and gatsby plugins to integrate a shopping cart in a Gatsby project, expose price data via gatsby-source-stripe, and outline secret key handling and env file setup.

Explains how environment variables in a .env file secure API keys and keep Stripe secrets off the client side, with development and production considerations for Gatsby and Netlify.

Fixing store errors in a Jamstack app, this lecture demonstrates debugging a Stripe integration, updating the publishable key, and enabling client-only mode, guided by the official documentation for checkout.

Style the store by adding images from the Stripe product object and refining fonts and button visuals. Tweak cart and checkout visuals and prepare hosting to go live.