Deploying to GitHub Pages

This example supports deloying a statically exported Next.js application to GitHub Pages.

The out directory should not be ignored by version control.

How to use

Execute create-next-app with npm, yarn, pnpm, or bun to bootstrap the example:

npx create-next-app --example github-pages nextjs-github-pages
# or
yarn create next-app --example github-pages nextjs-github-pages
# or
pnpm create next-app --example github-pages nextjs-github-pages
# or
bun create next-app --example github-pages nextjs-github-pages

Deploy to GitHub Pages

1. Create a new public GitHub repository.
2. Edit next.config.js to match your GitHub repository name.

   const nextConfig = {
     output: 'export',
     basePath: '/<github-project-name>',
     images: { unoptimized: true },
   };

3. Push the starter code to the main branch.
4. Run the deploy script (e.g. npm run deploy) to create the gh-pages branch.
5. On GitHub, go to the repo Settings (cf. https://github.com/<github-user-name>/<github-project-name>/settings/pages)
   • Pages > Branch
   • Choose gh-pages as the branch with the /root folder
   • Hit Save
6. Make a change.
7. Run the deploy script again to push the changes to GitHub Pages.

Congratulations! You should have a URL like:

https://<github-user-name>.github.io/<github-project-name>/

Development

Dependencies

npm, yarn, pnpm, or bun are all acceptable package managers. Please choose one package manager:

• npm
• yarn
• pnpm
• bun

Setup

• Fork the Thunderplains repo.
• Clone the forked repo

  # clone the forked repo (replace <github-user-name> with your github username)
  git clone https://github.com/<github-user-name>/thunderplains-2023.git
  cd thunderplains-2023/

• Choosing one package manager from above, run one of these commands to setup the project's dependencies

  npm install
  # or
  yarn install
  # or
  pnpm install
  # or
  bun install

Running the development server

• Run the development server

  npm run dev
  # or
  yarn dev
  # or
  pnpm dev
  # or
  bun run dev

• Open http://localhost:3000 with your browser to see the rendered page