- A NextJS starter to get you started creating educational materials using Markdown + A starter template build in Next.js for creating educational materials using Markdown.
## Get Started -1. Set up Node.js v14+ +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 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. @@ -94,14 +96,27 @@ The code blocks use [Highlight.js](https://highlightjs.org/static/demo/). By def ## 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. +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 enabled and the branch is set to gh-pages. If you're not deploying to GitHub Pages go ahead and delete the `.github` directory. +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/) @@ -113,7 +128,6 @@ If you want a custom domain, make sure you uncomment the `fqdn` field in [.githu - `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. - `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. diff --git a/next.config.js b/next.config.js index e943f4b..0ca2eb3 100644 --- a/next.config.js +++ b/next.config.js @@ -6,6 +6,7 @@ const course = JSON.parse(buffer); const BASE_URL = course?.productionBaseUrl || ""; const config = { + output: "export", basePath: BASE_URL, env: { BASE_URL, diff --git a/package.json b/package.json index ae8921b..fae88e4 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,6 @@ "scripts": { "dev": "next dev", "build": "next build && npm run csv", - "export": "next build && next export && npm run csv", "start": "next start", "csv": "node csv/index.js", "seo": "node summary/index.js" @@ -16,6 +15,7 @@ "gray-matter": "^4.0.3", "highlight.js": "^11.9.0", "marked": "^11.1.1", + "marked-highlight": "^2.1.1", "next": "^14.0.4", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/styles/courses.css b/styles/courses.css index 44e28c0..87d1e45 100644 --- a/styles/courses.css +++ b/styles/courses.css @@ -11,10 +11,7 @@ h2, h3, h4, h5, -h6, -p, -ol, -ul { +h6 { margin: 0; padding: 0; font-weight: normal; @@ -517,3 +514,20 @@ ol.sections-name .lesson-details { line-height: 24px; padding: 0px 5px; } + +code, +pre code { + padding: .5rem; +} + +code, +pre code, +pre code.hljs { + background-color: var(--emphasized-bg); + color: #000; +} + +pre code, +pre code.hljs { + display: block; +} \ No newline at end of file