Building Projects using Jamstack

Create a jamstack project with a simple index.html, test with live server, and learn how statically delivered HTML and content delivery networks enable fast, serverless delivery and future Netlify deployment.

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.

Modify the DOM with JavaScript in the Jamstack to render dynamic content on a static HTML page, using index.js and document.querySelector to append a random name.

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.

Explore using APIs in the Jamstack by fetching meme data, rendering images on the page, and comparing client-side rendering with static site generation for speed and scalability.

Explore static site generators within the jamstack, comparing options like eleventy, Gatsby, and Jekyll, to produce fast static html with optional client-side javascript and live content.

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 an 11d project by adding a base template and nunchucks, adjust the index with 11d syntax and safe filter, and use yaml front matter to render content.

Add a new contact us page with a header update, a text area, and a button, and configure the 11t file to render pages from the same base.

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.

Set up a build script with npm to generate static HTML using Eleventy, producing a distribution folder with index.html and contact page.

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.

Configure continuous deployment with GitHub for jamstack projects, linking local and remote repos, and automating builds with npm install and npm run build to publish static HTML.

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.

Finish the jamstack by wiring an API with Axios, transforming data into a data digest, and serving static HTML via a continuous deployment workflow.

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.

Learn how to get a movie database API key, register as a developer, test requests, and migrate from v3 to v4 with authorization headers and build-time URL updates.

Learn how to connect a movie database API to a Jamstack project by testing requests, inspecting responses, and using the docs to discover genres and filters for dynamic data.

Learn to use a movie database API in a Jamstack workflow to query by genre and language, log responses, and build data into the site.

Transform the api data into a lightweight single data object with action, adventure, and comedy movie arrays by keeping only the title and poster path.

Integrate cleaned movie data into the website by returning the data object and rendering posters via the poster path and titles, then build JavaScript utilities to generate a random movie.

Build and organize a jamstack site by creating multiple nunchucks templates (adventure, action, comedy) fed by a base HTML layout, then plan styling and CSS integration.

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.

Finalize a Jamstack movie picker by rendering data as hidden, then reveal a random movie on load using JavaScript. Push to Netlify to trigger an automatic build and deployment.

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 the Gatsby CLI, create a new Gatsby project, and explore the React-based folder structure to prepare for Stripe API integration later.

Set up Stripe in test mode, obtain API keys, and create a product with a price in the dashboard; then prep assets and plan Gatsby integration for jamstack projects.

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.

Build a storefront with jamstack by integrating Gatsby and Stripe, wiring a shopping cart and checkout using copied components.

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.

Finalize your Gatsby e-commerce project and deploy it to Netlify by connecting GitHub, configuring environment variables, and verifying continuous deployments for a functional Jamstack storefront.