Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

Courses Theme

A minimalist Gatsby theme for creating courses

Check out the live demo

✨Features

  • Minimalist and fast
  • Create courses and lessons with MDX
  • Multiple video hosts: Youtube, Facebook, Vimeo, Wistia, Twitch and more
  • Styling with Theme UI
  • Responsive

🌐Showcase

Your project using this theme goes here

🚀Installation

  1. Install the theme
npm install --save gatsby-theme-courses

or

yarn add gatsby-theme-courses
  1. Add the theme to your gatsby-config.js
// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-theme-courses',
      options: {
        // See config section for more information
      },
    },
  ],
}

📝Config

Key Default value Description
basePath / Root url for all courses
coursesPath content/courses Location of courses
authorsPath content/authors Location of authors
mdxOtherwiseConfigured false Set this flag true if gatsby-plugin-mdx is already configured

📚Example

Course definition

courses/become-react-developer/index.mdx

---
title: Become a React Developer
description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eleifend nibh vel blandit interdum
author: John Doe
cover: ./assets/cover.png
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lessons

courses/become-react-developer/hello-world.mdx

---
title: Hello World
description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eleifend nibh vel blandit interdum.
duration: "9:28"
number: 1
video: https://www.youtube.com/embed/dQw4w9WgXcQ
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eleifend nibh vel blandit interdum.

Authors

authors/authors.yml

- name: John Doe
  bio: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eleifend nibh vel blandit interdum. Phasellus vel sodales justo, vel maximus tellus.
  avatar: ./avatars/john-doe.webp
  link: https://example.com

👥Shadowing

You can customize the theme using shadowing

Shadowing in Gatsby Themes

✋Support

If you want to thank me or support this project you can buy me a coffee

Buy Me A Coffee

Issues and pull requests are welcome

License

MIT

© 2023 Gatsby, Inc.