• Stars
    star
    212
  • Rank 186,122 (Top 4 %)
  • Language
    JavaScript
  • License
    Apache License 2.0
  • Created almost 2 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

next-course-starter


A NextJS starter to get you started creating educational materials using Markdown

Get Started

  1. Set up Node.js v14+
  2. Clone this repo
  3. Run npm install
  4. Run npm run dev to start the dev server
  5. Open http://localhost:3000 in a browser

Configure Your Course

There are several things to configure before getting started.

course.json

This json file allows you to configure the details of the site. Update the info here and it'll update it everywhere throughout the course website.

  • author.name – Your name
  • author.company – The company you work at or whatever you want as your subtitle. Optional.
  • title – The title of your course
  • subtitle – The subtitle of your course. Optional.
  • frontendMastersLink – A link to the published video on FrontendMasters.com. Optional.
  • _social.twitch -
  • social.twitter – Your Twitter user name. Optional.
  • social.github – Your GitHub user name. Optional.
  • description – The description you want to show up in search engine results.
  • keywords – The SEO keywords for this course. An array of strings
  • productionBaseUrl – Typically useful for GitHub Pages. This adds a base path to your project. For GitHub Pages, this will be the name of your repo. For example, this site's base URL is /next-course-starter because the production URL for this site is btholt.github.io/next-course-starer. Do note this will also make your dev server's base URL this as well so you can catch problems before they go to production.
  • csvPath – A CSV with the meta data for your lessons will be created at this path when you build or export the project. If you delete this config option it will not generate a CSV.

styles/variables.css

Here is where you can theme your site. You can retheme the whole site with just these.

public/images

Here is where you should stick all your images. Inside of your markdown, refer to images in this folder as ./images/<image file name>.

Note this site doesn't use next/image because that requires the server component.

public/images/author.jpg

Your image. If you call it this, you won't have to change any code. If you need to change it, it's in pages/index.js.

public/images/social-share-cover.jpg

The image that will be used if someone shares your website to Twitter/Facebook/etc. If you call it this, you won't have to change any code. If you do need to change it, it's in pages/index.js

public/images/course-icon.png

The image at the top of the course. If you call it this, you won't have to change any code. If you do need to change it, it's in pages/index.js

Favicon

Just replace the favicon* files and the apple-touch-icon.png in the public/images directory. If you have a PNG, favicon.io will generate these files for you. If you don't want favicons, just remove the references to them in pages/_app.js.

Lessons

All your markdown lesson files will go in lessons/. They must be organized an named this way:

The folders must be named 01-section-one-name, 02-section-two-name, 03-section-three, etc.

The lessons are then grouped inside of these, the lessons are ordered by letters, A-lesson-one.md, B-lesson-two.md, C-lesson-three.md, etc. This numbering scheme matches how Frontend Masters organizes their content.

The titles of your lessons and sections are generated from the folder and lesson names (and can be overridden.) The first, organizing part of the name is stripped (the 01- part of 01-section-one and the A- part of A-lesson-one), the hyphens are turned into spaces (section-one becomes section one) and then those are run through title-case (so section one becomes Section One.) If you need to override these, use the frontmatter (explained below.)

The folder and lesson names are also used for the slugs. 02-section-two/C-lesson-three.md becomes yoursite.com/lessons/section-two/lesson-three.

Each of these lessons can have a frontmatter for the following properties

  • title – If you want the title to be different from the file name, you can specify here what that title should be. Frequently this useful for things where the capitalization would be off e.g. TailwindCSS instead of Tailwindcss. Optional.
  • description – If you want to give individual lessons descriptions for SEO and for Frontend Masters, you can write a brief description here.

Be aware because of how the numbers and letters are stripped out, it is possible to have ambigious paths. 01-welcome/A-intro.md and 03-welcome/D-intro.md would resolve to the same thing and only the first one would be visitable.

meta.json

Each section (e.g. inside of 03-section-three folder) folder can have a meta.json file, and is totally optional.

  • title – an override for the title of the section. Frequently useful for capitalization e.g. JS Tools instead of Js Tools.
  • icon – so you can set the icon used in the home page and the header. These icons are pulled from the free Font Awesome v5 icons. If you want fa-hammer, use "hammer" as the value for icon.

highlight.js Theme

The code blocks use Highlight.js. By default it will use a11y-light as the theme for the code blocks. Change the CSS import in pages/_app.js to the theme you want to use.

GitHub Pages / GitHub Actions

By default this repo works with GitHub Pages. Just make sure you set the productionBaseUrl in the course.json to the name of the repo.

It also includes a GitHub Action to automatically deploy to your gh-pages branch. Just make sure that your repo has GitHub Pages enabled and the branch is set to gh-pages. If you're not deploying to GitHub Pages go ahead and delete the .github directory.

By default the GitHub Action looks for a main branch, so be sure you're using that instead of master.

If you want a custom domain, make sure you uncomment the fqdn field in .github/workflows/next.yaml file and put your custom domain. If you don't do that and only set it up with the GitHub web GUI, every deploy will break the custom domain.

Example Sites

npm commands

  • npm run dev - Next's dev command. Start a local dev server. Note if you have a productionBasePath set in your course.json, your dev server will respect that (so you don't mess up your paths in production.)
  • npm run build - Build your site for production. This will still include the Next.js server run time. Use this if you're using something like Vercel to host your site.
  • npm run export - Builds your site statically, use this if you're going to deploy to GitHub Pages, S3, or somewhere else with no server. This will run next build and then next export (no need to run build yourself first.)
  • npm run start - Start an already-built server.
  • npm run csv – Will generate the CSV of the metadata from your course. Note you may have to run build first, depending on your csvPath.

Analytics

By default this doesn't generate any analytics. If you are creating a Frontend Masters course and would like a weekly report of analytics, contact me (Brian Holt) and I'll give you a snippet to drop on your page (though fair warning, I will also have access to your data, if that bothers you.)

Otherwise I'm pretty pleased with Simple Analytics (this is a referral link, free month for me and free month for you); I've been using them for my courses personally.

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.

More Repositories

1

harpoon

Lua
6,501
star
2

vim-be-good

vim-be-good is a nvim plugin designed to make you better at Vim Movements.
Lua
3,200
star
3

init.lua

Lua
3,166
star
4

.dotfiles

Perl
2,971
star
5

refactoring.nvim

The Refactoring library based off the Refactoring book by Martin Fowler
Lua
2,816
star
6

kata-machine

TypeScript
1,267
star
7

git-worktree.nvim

Lua
689
star
8

ts-rust-zig-deez

Java
605
star
9

htmx-lsp

its so over
Rust
602
star
10

anime

The repo that everyone deserves
546
star
11

tyrone-biggums

Clearly a repo about websockets and their comparison...
ReScript
462
star
12

vim-royale

Because Nano sucks
Rust
410
star
13

neovimrc

Lua
341
star
14

vim-apm

Vim APM, Actions per minute, is the greatest plugin since vim-slicedbread
Lua
324
star
15

undefined

A project to turn a file of JSON responses into TypeScript types
TypeScript
282
star
16

fem-algos

FrontEnd Master algorithms!
JavaScript
271
star
17

CHADstack

Dockerfile
257
star
18

ansible

Dockerfile
244
star
19

vim-with-me

Go
242
star
20

keyboards

239
star
21

vim-fundamentals

JavaScript
184
star
22

ThePrimeagen

149
star
23

fem-htmx-proj

Go
139
star
24

primestack

Rust
135
star
25

dev

my next gen build for starting my system
Shell
121
star
26

vmrss

Shell
92
star
27

web3-smart-contracts

JavaScript
84
star
28

BunSpreader

We spread the buns
Zig
73
star
29

fem-algos-2

The Last Algorithm Class You Want
JavaScript
70
star
30

htmx_golang

Go
67
star
31

jvim.nvim

A simple json traverser for NeoVim
Lua
67
star
32

aoc

2020
Rust
65
star
33

fem-git

JavaScript
64
star
34

vimrc

64
star
35

yew-have-ligma

Elixir
62
star
36

orgwasm

CSS
61
star
37

2-simple-steps

Its literally that simple
TypeScript
59
star
38

js-perf-example

TypeScript
53
star
39

neural-js

A kick-ass neural network for javascript
JavaScript
47
star
40

vim-nav-playground

C
43
star
41

coin-toss-me-daddy

Rust
42
star
42

htmx-class-template

The starter template with server in go or rust
Rust
40
star
43

lsp-debug-tools.nvim

this probably isn't the droid you are looking for
OCaml
35
star
44

leftPadDeez

nuts
JavaScript
35
star
45

yt

All my yt videos that require to have some codes.
TypeScript
34
star
46

fem-htmx

JavaScript
33
star
47

game-of-life-vwm

Go
33
star
48

rusty-arduino

Rust
31
star
49

titty-sprinkles

Yes... This is the name for my NodeConfEU project
TypeScript
30
star
50

htmx-subscribe

HTML
30
star
51

test-these-besties

Go
30
star
52

htmx

Rust
28
star
53

jpegdegens

TypeScript
26
star
54

public-edging

Rust
26
star
55

beat-me-daddy

I put my sonic in my pi
Rust
26
star
56

ts-go-rust

JavaScript
26
star
57

go-vs-rust

The greatest cli comparison ever created
Elixir
26
star
58

uhh

When you keep forgetting those sweet sweet sweet sweet commands.
Go
25
star
59

best-of-stackoverflow

A DRAMATIC READING OF STACK OVERFLOW
24
star
60

objects-to-buffer

TypeScript
23
star
61

bun-vs-node

TypeScript
22
star
62

tmux-sessionizer

Shell
21
star
63

vim-arcade

21
star
64

fem-jsperf

JavaScript
20
star
65

rust-wasm-serverless

Rust
20
star
66

json-vs-proto

TypeScript
20
star
67

gspot

Rust
18
star
68

no-flap-november

the greatest
Go
18
star
69

ts-go-rust-projector

TypeScript
17
star
70

ocaml-aoc

OCaml
16
star
71

i-fixed

16
star
72

shooter-js

TypeScript
15
star
73

vim-deathmatch

Rust
15
star
74

milo

TypeScript
15
star
75

big-chungus

is amungus
TypeScript
14
star
76

real-prog-dvorak-zmk

Rust
14
star
77

zig-deez-structures

Zig
14
star
78

this-isnt-rust

There is no rust in this suppository
TypeScript
13
star
79

git-bisect

JavaScript
13
star
80

tree-navigation

Lua
12
star
81

more-htmx-eploration

Rust
12
star
82

javascwipt-performance

suck it piq
TypeScript
12
star
83

your-first-plugin

Example NeoVim Lua Plugin
Lua
11
star
84

projector

Project my config into your prebuild
Go
11
star
85

why-are-promises-slow

they are
11
star
86

cargo-chadr

Rust
11
star
87

chat-js

Rust
10
star
88

tier-list

HTML
10
star
89

he-uses-tabs

Rust
8
star
90

neovim-irc

C
8
star
91

jest-mem-test

JavaScript
8
star
92

the-great-sonnet-test

Go
7
star
93

rxjs-examples

JavaScript
7
star
94

ansible-dev-prod

Dockerfile
7
star
95

rfceez

Lua
7
star
96

todo

yes
C++
6
star
97

first-nvim-plugin

The template for writing your first nvim plugin
6
star
98

first-deno-project

JavaScript
6
star
99

fizzbuzz

A real programmers fizzbuzz
JavaScript
6
star
100

99-ocaml-problems

6
star