Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: btholt/next-course-starter
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: main
Choose a base ref
...
head repository: FrontendMasters/dev-prod-2
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: main
Choose a head ref
  • 9 commits
  • 37 files changed
  • 2 contributors

Commits on Dec 5, 2024

  1. Copy the full SHA
    308df99 View commit details
  2. course.json and lessons

    dtauer committed Dec 5, 2024
    Copy the full SHA
    63eb297 View commit details
  3. public assets, config

    dtauer committed Dec 5, 2024
    Copy the full SHA
    bdb1452 View commit details
  4. fixed links, updated icon

    dtauer committed Dec 5, 2024
    Copy the full SHA
    302779d View commit details
  5. icons

    dtauer committed Dec 5, 2024
    Copy the full SHA
    6a5351b View commit details
  6. updated readme

    dtauer committed Dec 5, 2024
    Copy the full SHA
    83f1005 View commit details
  7. final edits

    dtauer committed Dec 5, 2024
    Copy the full SHA
    9ce0e77 View commit details

Commits on Dec 7, 2024

  1. fixed link

    dtauer authored Dec 7, 2024

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    ee88ac5 View commit details

Commits on Mar 11, 2025

  1. fixed typo

    dtauer authored Mar 11, 2025

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    0bc60a9 View commit details
Showing with 3,612 additions and 227 deletions.
  1. +3 −0 .github/FUNDING.yml
  2. +6 −143 README.md
  3. +22 −12 course.json
  4. +23 −11 data/course.js
  5. +139 −0 lessons/01-intro/A-intro.md
  6. +0 −18 lessons/01-the-first-section/A-intro.md
  7. +0 −5 lessons/02-a-second-section/A-first-lesson.md
  8. +0 −13 lessons/02-a-second-section/B-second-lesson.md
  9. +0 −3 lessons/02-a-second-section/meta.json
  10. +60 −0 lessons/02-your-env/A-your-env.md
  11. +602 −0 lessons/02-your-env/B-ansible.md
  12. +542 −0 lessons/02-your-env/C-roll-your-own.md
  13. +94 −0 lessons/02-your-env/D-neovim.md
  14. +273 −0 lessons/02-your-env/E-wait.md
  15. +192 −0 lessons/03-navigation/A-window.md
  16. +763 −0 lessons/03-navigation/B-tmux.md
  17. +0 −6 lessons/03-thoughts-on-js-and-css/A-css.md
  18. +0 −5 lessons/03-thoughts-on-js-and-css/B-javascript.md
  19. +0 −6 lessons/03-thoughts-on-js-and-css/C-npm.md
  20. +0 −4 lessons/03-thoughts-on-js-and-css/meta.json
  21. +64 −0 lessons/04-tools/A-intro.md
  22. +239 −0 lessons/04-tools/B-jq.md
  23. +185 −0 lessons/04-tools/C-unix.md
  24. +275 −0 lessons/04-tools/D-neovim.md
  25. +55 −0 lessons/05-terminal/A-intro.md
  26. +74 −0 lessons/06-outro/A-outro.md
  27. +1 −1 package-lock.json
  28. BIN public/images/00-no-cycles.png
  29. BIN public/images/BRAND-WHearts.png
  30. BIN public/images/apple-touch-icon.png
  31. BIN public/images/author.jpg
  32. BIN public/images/course-icon.png
  33. BIN public/images/course-icon.webp
  34. BIN public/images/favicon-16x16.png
  35. BIN public/images/favicon-32x32.png
  36. BIN public/images/favicon.ico
  37. BIN public/images/social-share-cover.jpg
3 changes: 3 additions & 0 deletions .github/FUNDING.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# These are supported funding model platforms

github: [ThePrimeagen]# Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
149 changes: 6 additions & 143 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,145 +1,8 @@
<h1 align="center">Course Website Starter Template</h1> <br>
[![Frontend Masters](https://static.frontendmasters.com/assets/brand/logos/full.png)][fem]
This repo generates the course website for the [Developer Productivity 2][course] workshop on Frontend Masters.

<p align="center">
A starter template build in Next.js for creating educational materials using Markdown.
</p>
[Please click here][website] to head to the course website.

## Get Started

1. Set up Node.js v20+
1. Clone this repo
1. Run `npm install`
1. Run `npm run dev` to start the dev server
1. Open http://localhost:3000/<your production base path as defined in course.json> in a browser

_Instructions for deploying the course website to GitHub Pages are below_

## 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.linkedin_ - Your LinkedIn public user name, just the name, not the full link. Optional
- _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. **IF THIS IS SET, YOUR / PATH WILL 404**
- _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](https://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](https://github.com/blakeembrey/change-case#titlecase) (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](https://github.com/jonschlinkert/gray-matter#readme) 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.
- _keywords_ - If you want to give individual lessons keywords for SEO purposes, write a comma separated list

🤖: now the course starter can auto-generate the description and keywords for you using ChatGPT. See below how to.

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](https://fontawesome.com/v5.15/icons). If you want [fa-hammer](https://fontawesome.com/v5.15/icons/hammer), use "hammer" as the value for icon.

## highlight.js Theme

The code blocks use [Highlight.js](https://highlightjs.org/static/demo/). 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 (classic). 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 (classic) 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](https://github.com/btholt/next-course-starter/blob/main/.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.

### GitHub Pages Instructions

These instructions assume you've followed the setup instructions above and have a cloned version of this repo locally.

1. Create a new (public) remote repository in your GitHub Account (e.g. fem-javascript-fundamentals).
1. Grant `Read and write permissions` for Workflows under Actions > General > Workflow Permissions.
1. Update the `productionBaseUrl` in the `course.json` file to match the name of the repository.
1. Push to the new repository. You should see the `Deploy NextJS Course Site` workflow run under the Actions tab.
1. Configure GitHub Pages: Settings > Pages > Deploy from a Branch. Select the `gh-pages` branch.
1. Once the `pages-build-deployment` action completes, you should see your site at `https://USERNAME.github.io/REPO_NAME`.

_Future pushes to the main branch will automatically trigger a new deployment._

## Example Sites

- [This repo itself](https://btholt.github.io/next-course-starter/)
- [Complete Intro to React v6](https://btholt.github.io/next-react-v6/)
- [Complete Intro to React v7](https://btholt.github.io/complete-intro-to-react-v7/)
- [Complete Intro to Web Dev v3](https://btholt.github.io/complete-intro-to-web-dev-v3/)

## 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 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.
- `npm run seo` – Using ChatGPT, every file that does not have a description, ChatGPT will generate a description and keywords and write them to the file. Requires you to set a valid `OPENAI_API_KEY` (which means having a paid OpenAI account) using a [.env](https://github.com/motdotla/dotenv) or just by setting it in the environment. If a description already exists, this will skip it.

## 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](referral.simpleanalytics.com/brian) (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.
[fem]: https://www.frontendmasters.com
[website]: https://frontendmasters.github.io/dev-prod-2/
[course]: https://frontendmasters.com/workshops/developer-productivity-v2/
34 changes: 22 additions & 12 deletions course.json
Original file line number Diff line number Diff line change
@@ -1,19 +1,29 @@
{
"author": {
"name": "Brian Holt",
"company": "Neon"
"name": "ThePrimeagen",
"company": "TheStartup, Try Harder™"
},
"title": "Next.js Course Starter Kit",
"subtitle": "for Frontend Masters",
"frontendMastersLink": "https://frontendmasters.com/courses/complete-react-v9/",
"title": "Developer Productivity 2",
"subtitle": "become the dev that confuses everyone else",
"frontendMastersLink": "https://frontendmasters.com/workshops/developer-productivity-v2/",
"social": {
"linkedin": "btholt",
"github": "btholt",
"twitter": "holtbt",
"bluesky": "brianholt.me"
"twitter": "theprimeagen",
"twitch": "theprimeagen",
"youtube": "theprimeagen"
},
"description": "A starter kit for making really amazing courses, optimized for Frontend Masters",
"keywords": ["your", "Google", "keywords", "here"],
"productionBaseUrl": "/next-course-starter",
"description": "a walkthrough of making your life a bit nicer by understanding how your operating system works",
"keywords": [
"ThePrimeagen",
"Live Coding",
"TypeScript",
"JavaScript",
"Git",
"Github",
"Algorithms",
"DataStructures",
"Data Structures",
"TS"
],
"productionBaseUrl": "/dev-prod-2",
"csvPath": "./out/lessons.csv"
}
34 changes: 23 additions & 11 deletions data/course.js
Original file line number Diff line number Diff line change
@@ -2,19 +2,31 @@ import config from "../course.json";

const DEFAULT_CONFIG = {
author: {
name: "An Author",
company: "An Author's Company",
name: "ThePrimeagen",
company: "TheStartup, Try Harder",
},
title: "A Superb Course",
subtitle: "That Teaches Nice Things",
frontendMastersLink: "",
description: "A nice course for nice people.",
keywords: ["a nice course", "for people", "to learn", "nice things"],
title: "Developer Productivity, v2",
subtitle: "become the dev that confuses everyone else",
frontendMastersLink:
"https://frontendmasters.com/workshops/developer-productivity-v2/",
description:
"The purpose of this course is to set the foundation for how to approach creating a highly tuned environment for your needs. This is not suppose to be prescriptive but illuminating.",
keywords: [
"ThePrimeagen",
"Live Coding",
"TypeScript",
"JavaScript",
"Golang",
"RustLang",
"Go",
"Rust",
"TS",
"JS",
],
social: {
linkedin: "btholt",
github: "btholt",
twitter: "holtbt",
bluesky: "brianholt.me",
twitter: "ThePrimeagen",
twitch: "ThePrimeagen",
youtube: "ThePrimeagen",
},
productionBaseUrl: "/",
};
139 changes: 139 additions & 0 deletions lessons/01-intro/A-intro.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
---
title: "Introduction to dev productivity"
description: "there isn't a right way, but there is my way and its pretty good"
---

## Dev Productivity

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

## WHOAMI
The name is ThePrimeagen

<a href="https://twitch.tv/ThePrimeagen">
Twitch
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 268" width="32" height="32">
<path fill="#6441A4" d="M47.181 0L0 89.616v134.559h63.719V268l57.758-43.825h43.341L256 163.311V0H47.181zm178.947 147.268l-39.596 39.596h-29.343L108.839 215.2v-39.596H63.719V29.837h162.409v117.431zM89.616 89.616h29.343v59.075H89.616V89.616zm88.3 0h29.343v59.075h-29.343V89.616z"/>
</svg>
</a>

<br>

<a href="https://youtube.com/ThePrimeTimeagen">
ThePrimeTimeagen - Hand crafted meme's and toilet
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 176 124" width="32" height="32">
<path fill="#FF0000" d="M172.267 20.22c-2.029-7.717-7.974-13.786-15.69-15.814C143.915 1.135 88 1.135 88 1.135s-55.914 0-68.576 3.271c-7.717 2.029-13.662 8.097-15.691 15.814C1.135 32.882 1.135 62 1.135 62s0 29.118 2.598 41.78c2.029 7.717 7.974 13.786 15.691 15.814C32.086 122.865 88 122.865 88 122.865s55.915 0 68.577-3.271c7.716-2.028 13.661-8.097 15.69-15.814C174.865 91.118 174.865 62 174.865 62s0-29.118-2.598-41.78zM70.711 85.573V38.427l36.106 23.573-36.106 23.573z"/>
</svg>
</a>

<br>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

## The Goal
My approach to _my environment_.

or as i like to say: there isn't a right way, but there is my way and its
pretty good. I only have one thing I optimize which is productivity.

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

## Enqueue Midwit meme
> BUT WHAT ABOUT i3-gaps, WHAT ABOUT ALL THE RICES
Honestly, I don't care. I just don't care at all. I just want to get where i
want to be in the fewest amount of keystrokes

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

## A bit of prereq
One thing that should be apparent is that i will be approaching this class from
a unix perspective.

Its not that i don't think windows is good for dev, its just I never use it for
anything but games.

### Enqueue I Don't even think of you meme

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

18 changes: 0 additions & 18 deletions lessons/01-the-first-section/A-intro.md

This file was deleted.

Loading