Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

A Gatsby course theme

hangindev gatsby-theme-courses

A Gatsby theme for creating a course platform, using Youtube as video host.

Theme features

📝 Use .mdx file to save course & lesson information and notes.

📹 Youtube as video host

🏍️ Support autoplay

💹 Save learning progress

💖 Bookmark courses


npm install --save @hangindev/gatsby-theme-courses


Theme options

Key Default value Description
basePath / Root url for all course courses
contentPath content/courses Location of course courses
mdx true Configure gatsby-plugin-mdx (if your website already is using the plugin pass false to turn this off)

Example usage

// gatsby-config.js
module.exports = {
  plugins: [
      resolve: `gatsby-theme-course`,
      options: {
        basePath: `/courses`

Data layer

Courses are consisted of lessons and the relationships are represented by the folder structure. Every directory in the contentPath represent a course.

Course info (title, tags, cover image, description) and lesson info(title, youtubeId, note) are stored as .mdx file under the course directory.

See demo for the required metadata of the .mdx file.

Example course folder structure

      ├─bitcoin-and-cryptocurrency  # slug of course "Bitcoin and Cryptocurrency"
      │      index.mdx  # course info should be written in index.mdx
      │      01-intro.mdx  # other .mdx files will be interpreted as lessons
      │      02-how-bitcoin-achieves-decentralization.mdx
      │      03-mechanics-of-bitcoin.mdx
      │      04-how-to-store-and-use-bitcoins.mdx
      │      cover.jpg  # related course materials/images can be stored in the same directory

Example course index.mdx file

title: "Bitcoin and Cryptocurrency"
lastUpdated: 2015-02-16
tags: ["bitcoin", "cryptocurrency", "blockchain"]
coverImage: "./cover.jpg"


Example lesson .mdx file

title: Intro to Crypto and Cryptocurrencies
youtubeId: fOMVZXLjKYo
duration: 3521


Override theme

This theme used styled-components. You can override the theme settings in src/styled folder or directly override the components in src/components folder.

Additional configuration

In addition to the theme options, there are a handful of items you can customize via the siteMetadata object in your site’s gatsby-config.js for SEO.

// gatsby-config.js
module.exports = {
  siteMetadata: {
    title: `My course Title`,
    author: `My Name`,
    description: `My site description...`,
    social: [
        name: `GitHub`,
        url: `https://github.com/hangindev`


[ ] Read Youtube video duration with API

[ ] Restriced access

© 2023 Gatsby, Inc.