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

Create a new public GitHub repository.

Edit next.config.js to match your GitHub repository name.

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

Push the starter code to the main branch.
Run the deploy script (e.g. npm run deploy) to create the gh-pages branch.
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
Make a change.
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:

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