We may earn an affiliate commission when you visit our partners.
Course image
Udemy logo

JAMStack

The Complete Guide

Ray Viljoen

Learn to build fast, reliable & secure sites using the JAM stack architecture.

A comprehensive start to finish guide with practical lessons suited to both beginners and experienced developers alike.

Read more

Learn to build fast, reliable & secure sites using the JAM stack architecture.

A comprehensive start to finish guide with practical lessons suited to both beginners and experienced developers alike.

  • Learn JAMStack-specific concepts

  • Understand each layer of the stack and how they fit together

  • Learn the fundamentals of Static Site Generators

  • Integrate a Headless CMS into a static site

  • Automate builds & deploys using CI / CD

An invaluable skill for any Web Developer

JAMStack is modern web stack that solves many of the problems associated with traditional server-side (monolithic) architectures used for most web-based projects.

Learning to shift from traditional stacks to a modern stack, like JAMStack, is an essential skill for any developer working on web-based projects.

This course will provide a very practical and concise approach to understanding every aspect of the JAMStack and will enable you to start creating custom solutions for any given project, or incrementally migrate existing projects to a JAMStack.

Content & Overview

With dedicated sections for each part of the JAM stack, this course aims to teach you how to think and work in terms of a JAMStack.

The focus of the course is the architecture itself, rather than focusing on specific solutions and is suitable for anyone with basic web-development and Git knowledge.

The course starts by covering all the concepts specific to a JAMStack and demonstrates the function of each layer of the stack.

Thereafter the “Markup” part of the stack is covered with some in-depth explanations and an introduction to the HUGO static site generator. Teaching you how to install, configure and compile static sites.

The course then builds on this by explaining how to add dynamic functionality to a static site by means of JavaScript APIs. Including the use of cloud functions and self-hosted API services.

Next you’ll learn to create a completely automated build and deploy process using either GitHub Actions or an all-in-one solution like Netlify.

With finally a dedicated section on how to integrate a headless CMS into a static site.

Upon completion of this course, you will not only understand the specific solutions covered in the lessons, but also have a broad understanding of how to build sites and apps using the core principles of a JAMStack.

The entire course is to the point and will teach you the entirety of the JAMStack architecture in the shortest amount of time possible.

Enroll now

What's inside

Learning objectives

  • Jamstack architecture
  • Static site generators (hugo)
  • Headless cms (netlify cms)
  • Continuous integration & continuous delivery

Syllabus

A brief overview of the JAMStack and what to expect from the course.

Course Introduction.

A short overview of the problems a JAMStack aims to solve and the benefits it brings to modern web projects.

Read more

An explanation of lesson structure and tools used.

Learn JAMStack-specific concepts and what the stack comprises of. Demonstrates various ways a JAMStack might be configured to solve different project requirements.

Learn the 3 principles of a JAMStack comprises of - JavaScript, APIs & Markup - and how they fit together.

A practical lesson to demonstrate a viable minimal JAMStack comprising of all 3 parts, JavaScript, APIs & Markup.

Learn the various ways a JAMStack can be configured to solve specific project requirements.

Learn the basics of using a static site generator to build static markup for a JAMStack site. This section will teach the fundamentals of HUGO.

A short overview of static site generators and why we'll use HUGO.

Learn to install the HUGO build tools on Mac, Windows & Linux.

Learn the basics of the HUGO command line tools by creating and compiling a new project.

An overview of HUGO Archetypes and how to use them.

Learn how HUGO projects are structured with an overview of basic template inheritance and lookup orders.

An introduction to the fundamentals of templating HUGO layouts. Covers template context, partials, loops and conditionals.

Short lesson teaching how to access template variables for various contexts.

An explanation of HUGO's "Content Types" and "Page Kinds", showing how to disable specific kinds of pages.

Learn to create and modify custom template-level variables.

Learn the syntax for using HUGO template functions.

Shows how to integrate dynamic templating into content by means of shortcodes.

A concept very similar to that of other CMSs like WordPress.

Learn to use asset processors like SASS, minification and more.

Learn to access local and remote data sources for use within the site build.

Learn to add dynamic functionality to a static site, using third-party APIs, JavaScript libraries & self-hosted API services.

An overview of how dynamic functionality can be added to a static site by means of JavaScript and APIs.

This lesson also demonstrates a very simple implementation of a self-hosted contact form service.

Learn add a full-text search functionality to a static site, using a third-party JavaScript library.

Learn how to use cloud function services like Google Cloud Functions to add server-side processing to your static app.

Learn to configure fully automated builds and deploys for a static site using Continuous Integration & Continuous Deployment (CI/CD).

Create an automated build and deployment process using GitHub Pages and GitHub Actions. Teaches the basic principles of CI/CD for a JAMStack.

See the benefits of using a simpler all-in-one hosting service built for JAMStack projects.

Learn to integrate a full-featured headless content management system into a static site.

An overview of the 2 main types of headless CMSs and why you'd choose either.

Learn to install and configure Netlify CMS. This lesson demonstrates adding content collections and configuring a local development backend for the CMS.

Learn how to configure an authentication backend using GitHub Oauth with Netlify, and integrate a headless CMS with the CI/CD for the project.

Course outro with some final thoughts and JAMStack resources.

Some helpful resources for taking your JAMStack knowledge further.

Bonus Lecture

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Builds a strong foundation for beginners
Deepens understanding of modern web architectures
Taught by an instructor recognized in the industry
Makes use of an in-demand web development framework
May not fully prepare learners for higher level development roles
Does not offer a certificate upon completion

Save this course

Save JAMStack: The Complete Guide to your list so you can find it easily later:
Save

Activities

Coming soon We're preparing activities for JAMStack: The Complete Guide. These are activities you can do either before, during, or after a course.

Career center

Learners who complete JAMStack: The Complete Guide will develop knowledge and skills that may be useful to these careers:
Web Developer
Web Developers create and maintain websites. They are responsible for the design, development, and implementation of websites. This course may be useful for Web Developers who want to learn more about the JAMStack architecture. The course covers the basics of static site generators, headless CMSs, and continuous integration and continuous delivery. This knowledge can help Web Developers build faster, more reliable, and more secure websites.
Full-Stack Developer
Full-Stack Developers are responsible for both the front-end and back-end of a website. This course may be useful for Full-Stack Developers who want to learn more about the JAMStack architecture. The course covers the basics of static site generators, headless CMSs, and continuous integration and continuous delivery. This knowledge can help Full-Stack Developers build faster, more reliable, and more secure websites.
Front-End Developer
Front-End Developers are responsible for the design and implementation of the user interface of a website. This course may be useful for Front-End Developers who want to learn more about the JAMStack architecture. The course covers the basics of static site generators, headless CMSs, and continuous integration and continuous delivery. This knowledge can help Front-End Developers build faster, more reliable, and more secure websites.
Back-End Developer
Back-End Developers are responsible for the server-side logic of a website. This course may be useful for Back-End Developers who want to learn more about the JAMStack architecture. The course covers the basics of static site generators, headless CMSs, and continuous integration and continuous delivery. This knowledge can help Back-End Developers build faster, more reliable, and more secure websites.
Software Engineer
Software Engineers design, develop, and maintain software applications. This course may be useful for Software Engineers who want to learn more about the JAMStack architecture. The course covers the basics of static site generators, headless CMSs, and continuous integration and continuous delivery. This knowledge can help Software Engineers build faster, more reliable, and more secure software applications.
Site Reliability Engineer
Site Reliability Engineers are responsible for the reliability and performance of websites and web applications. This course may be useful for Site Reliability Engineers who want to learn more about the JAMStack architecture. The course covers the basics of static site generators, headless CMSs, and continuous integration and continuous delivery. This knowledge can help Site Reliability Engineers build faster, more reliable, and more secure websites and web applications.
DevOps Engineer
DevOps Engineers are responsible for the development and operation of software systems. This course may be useful for DevOps Engineers who want to learn more about the JAMStack architecture. The course covers the basics of static site generators, headless CMSs, and continuous integration and continuous delivery. This knowledge can help DevOps Engineers build faster, more reliable, and more secure software systems.
Cloud Engineer
Cloud Engineers are responsible for the design, implementation, and management of cloud computing systems. This course may be useful for Cloud Engineers who want to learn more about the JAMStack architecture. The course covers the basics of static site generators, headless CMSs, and continuous integration and continuous delivery. This knowledge can help Cloud Engineers build faster, more reliable, and more secure cloud computing systems.
Product Manager
Product Managers are responsible for the planning, development, and launch of new products. This course may be useful for Product Managers who want to learn more about the JAMStack architecture. The course covers the basics of static site generators, headless CMSs, and continuous integration and continuous delivery. This knowledge can help Product Managers build faster, more reliable, and more secure products.
Data Scientist
Data Scientists are responsible for the analysis and interpretation of data. This course may be useful for Data Scientists who want to learn more about the JAMStack architecture. The course covers the basics of static site generators, headless CMSs, and continuous integration and continuous delivery. This knowledge can help Data Scientists build faster, more reliable, and more secure data analysis and interpretation pipelines.
Machine Learning Engineer
Machine Learning Engineers are responsible for the design, development, and maintenance of machine learning models. This course may be useful for Machine Learning Engineers who want to learn more about the JAMStack architecture. The course covers the basics of static site generators, headless CMSs, and continuous integration and continuous delivery. This knowledge can help Machine Learning Engineers build faster, more reliable, and more secure machine learning models.
Business Analyst
Business Analysts are responsible for the analysis of business needs and the development of solutions to meet those needs. This course may be useful for Business Analysts who want to learn more about the JAMStack architecture. The course covers the basics of static site generators, headless CMSs, and continuous integration and continuous delivery. This knowledge can help Business Analysts build faster, more reliable, and more secure solutions to business needs.
Project Manager
Project Managers are responsible for the planning, execution, and completion of projects. This course may be useful for Project Managers who want to learn more about the JAMStack architecture. The course covers the basics of static site generators, headless CMSs, and continuous integration and continuous delivery. This knowledge can help Project Managers build faster, more reliable, and more secure projects.
Data Engineer
Data Engineers are responsible for the design, development, and maintenance of data pipelines. This course may be useful for Data Engineers who want to learn more about the JAMStack architecture. The course covers the basics of static site generators, headless CMSs, and continuous integration and continuous delivery. This knowledge can help Data Engineers build faster, more reliable, and more secure data pipelines.
Technical Writer
Technical Writers are responsible for the creation and maintenance of technical documentation. This course may be useful for Technical Writers who want to learn more about the JAMStack architecture. The course covers the basics of static site generators, headless CMSs, and continuous integration and continuous delivery. This knowledge can help Technical Writers create faster, more reliable, and more secure technical documentation.

Reading list

We've selected 11 books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in JAMStack: The Complete Guide.
Provides a concise overview of the good parts of JavaScript, including the basics of JavaScript, as well as more advanced topics such as closures, prototypes, and functional programming.
Provides a comprehensive overview of React, including the basics of React, as well as more advanced topics such as state management, routing, and performance optimization.
Comprehensive guide to JavaScript and is commonly used as a reference book for web developers. It provides a comprehensive overview of JavaScript, including its syntax, semantics, and best practices.
Provides a comprehensive overview of CSS and is commonly used as a reference book for web developers. It provides a comprehensive overview of CSS, including its syntax, semantics, and best practices.
Provides a comprehensive overview of HTML and is commonly used as a reference book for web developers. It provides a comprehensive overview of HTML, including its syntax, semantics, and best practices.
This great beginner's guide to HTML. It provides a clear and concise overview of the language, and it is perfect for those who are new to programming.
Provides a comprehensive overview of Node.js, including its core features, modules, and tools. It great resource for those who want to learn more about Node.js and how to use it to build web applications.
Provides a comprehensive overview of the command line, including its history, features, and tools. It great resource for those who want to learn more about the command line and how to use it to automate tasks.

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Here are nine courses similar to JAMStack: The Complete Guide.
Next.js by Example
Gatsby JS: Build PWA Blog With GraphQL And React +...
Building Dynamic Websites with PHP and MySQL
Full Stack Application Development Capstone Project
Laravel: The Big Picture
Django Application Development with SQL and Databases
Develop a Serverless Computing App with Azure Static Web...
Build a Static Website with Rust and Zola
Creating Plugins, Themes, and Starters with GatsbyJS 3:...
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser