@coursemaker/gatsby-theme-coursemaker NPM

gatsby-theme-coursemaker

Make Online Courses

Theme Status: Alpha

The theme is in alpha, and is subject to significant, breaking changes.

🗝 Elevator Pitch

This Gatsby theme allows you to create a fully-featured, commercial online course website for free. Key features:

Easily create courses and lectures using tools you love (git, markdown)
Sales pages out of the box, with easy configuration options
Gated content (via integration with Auth0's free plan and YouTube private videos)
Payments (via integration with Stripe Checkout)
Hosting (via Netlify, AWS or many other options)
Responsive design (looks good on mobile + tablets for your students)
SEO optimized
Google analytics integration
Blazing fast
Serious documentation & support - we use this theme for our commercial product. It's not going quiet. And naturally, we've created a course explaining how to use this theme ;)
Fully customizable via gatsby shadowing made even easier by our use of gatsby-theme-ui.

🚀 Hosted Option

Don't want to host it yourself, and want access to:

Truly gated videos
Student progress reports
Easy payment collection integration (Stripe)
Discount coupons
File downloads
Course dashboard
Easy memberships
24/7 Support

Checkout CourseMaker

Installation

Dependencies

Ensure node.js >= v14 is installed
Install the gatsby-cli: npm install -g gatsby-cli
Create a new site: gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-hello-world
cd into your directory (in the above example it would be "gatsby-site"), then run the site: gatsby develop

Add the theme

Run yarn add @coursemaker/gatsby-theme-coursemaker
In your gatsby-config.js, add the theme to your plugins array as described in the docs here

There are many configuration options for the coursemaker theme which we discuss below.

🚀 Configuring A Course Website

note if you prefer a real code example, the course_demo_site contains just that.

Concepts

An entire site, potentially with many courses, is a school. When you install the @coursemaker/gatsby-theme-coursemaker theme and run gatsby develop, you will see a directory called "school" created in your project root. This houses all your courses and lecture data.

📚 School Config Options (all underneath `siteMetaData`)

Text fields

title: The school name
landing_page.contact_email: The contact email address which students are shown on the school landing page
landing_page.title_and_description.title: The School name that will appear on your overall landing page
landing_page.title_and_description.description: The School description that will appear on your overview section of the landing page
landing_page.primary_button.text: The call to action text on your school's main button, e.g. "View Course(s)"
landing_page.cta_button.text: The call to action text on your school's CTA button
landing_page.cta_section.title: The title of the call to action section on your school's landing page
landing_page.cta_section.description: The descriptive text of the call to action section on your school's landing page

🎉 How to Create & Configure a Course

Every directory directly underneath the school/courses directory represents a course.
Every course is configured via the index.mdx file in its root directory.

The Course index.mdx

Many aspects of your course are configured in the index.mdx file frontmatter at the course directory root. These include:

courseImage which looks in the /assets directory of your course folder for the file you indicate. This image will appear on your school and course landing pages.