gatsby-course-starter
A Gatsby starter to get you started creating educational materials using Markdown
Get Started
npm install --global gatsby-cli
- make sure you're on Gatsby v2+- See docs here if you need help
gatsby new course-website https://github.com/btholt/gatsby-course-starter
cd course-website
npm run dev
- Open http://localhost:8000 in your browser
Lessons
The crux of this site is are the lessons. Provided are two examples. Each lesson needs a frontmattter path
, order
, and title
. Generally you should make the path
and the file name match for ease of finding it.
path
- needs a leading slash. This will be slug of the lessontitle
- will be the title displayed on the Table of Contents and on the page itselforder
- the order of which the item should appear in the table of contents. should in<number><capital letter>
format where the number corresponds to the section it's and the letter corresponds to the order of the lesson inside the section, e.g.3B
section
- the title of the section that the article is in. Only the first lesson for each section will be used.
On just the first lesson of every section
description
– a one-to-three sentence summary of the lesson. used for the meta tag for social shares and SEO. if no description is given, thesiteMetadata.description
for the site is used.icon
- the Font Awesome icon you want for the home page of the site
Config
Inside of gatsby-config.js
be sure to fill out the siteMetadata
fields, including title
, subtitle
, description
, and keywords
.
For the social links, you can leave them as empty strings if you want to omit them.
Themes
All the variables for theme are in the variables.css file. You can also change the Prism.js theme.
GitHub Pages
If you do want to deploy to GitHub pages, make sure you add the name of the repo to the pathPrefix
property in gatsby-config.js
so that it will correctly make all the links.
GitHub Actions
This site is ready to deployed to GitHub Pages out of the box with GitHub Actions. If you do not want to deploy this to GitHub Pages, delete the .github
directory.
If you do want to deploy this to GitHub Pages with GitHub Actions, you need to do a few things.
- Make sure you're using the
main
branch as your default, notmaster
. - Under settings in your repo, under the Actions tab, make sure your repo allows Actions to run, either from anybody or just you. Also make sure that under Workflow Permissions that
GITHUB_TOKEN
has access to Read and Write permissions. These are both set by default so no action here needed if this is a new repo and you haven't changed anything. - Now once you commit your code, it should automatically deploy your GitHub Pages site should deploy automatically!
Example Sites
CSV
If you run npm run csv
, a CSV will be generated with all the various lessons' frontmatter outputted to public/lessons.csv
. You can change the path by changing the OUTPUT_CSV_PATH
environment variable.
Another CSV will be output to public/links.csv
where it pull all the links out of each lesson and put them into a CSV. This path can be modified by setting the LINKS_CSV_PATH
environment variable.
License
The code is this repo is licensed under the Apache 2.0 license.
I include the CC-BY-NC-4.0 license for the content; this is what I recommend you license your content under: anyone can use and share the content but they cannot sell it; only you can.