-
Set GitHub repo name in
sh ./deploy.sh
(not needed if using the root repo named<username>.github.io
) -
Run
sh ./deploy.sh
to build, export, and deploy
Prepare the initial state of the app (as a starter for other projects)
-
Create a new repo on GitHub and name it
username.github.io
Check to create the readme file to have a working repo with the green
Code
button -
Run GitHub Codespaces
-
Install
Prettier
plugin -
Adjust
VS Code
settings{ "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, "prettier.semi": false, "editor.tabSize": 2, "editor.lineHeight": 24, "terminal.integrated.lineHeight": 1.2, "terminal.integrated.letterSpacing": 1 }
-
Run installation command
npx create-next-app@latest
-
Choose the name app as
.
(current directory)
Install Tailwind CSS with Next.js - Tailwind CSS
-
Install
Tailwind CSS IntelliSense
plugin inVS Code
- this is important! -
Clean up
Next.js
default files (deleteapi
,css modules
) -
Check development preview
npm run dev
git add . && git commit -m "Set initial project state" && git push
Create the app
Reuse existing components from the repo
Deploy the project
-
Add export command to
package.json
and run it"export": "next build && next export"
-
Create a new
git-worktree
(new branch accessible inside a folder)git worktree add gh-pages
-
Ignore that new folder from the main branch
In
.gitignore
add:# github pages branch /gh-pages
-
Remove all files from
gh-pages
dir, except.git
folderfind gh-pages/ -mindepth 1 -not -name '.git' -delete
-
Copy files from
out
dir togh-pages
cp -r out/* gh-pages
-
Commit changes in
gh-pages
branch and push themcd gh-pages && git add . && git commit -m 'Deploy' && git push --set-upstream origin gh-pages
-
Chain those commands in the bash script
deploy.sh
#! /bin/bash # Install node_modules npm install # Build the Next.js app npx next build && # Export static files from the build (by default to the `out` dir) npx next export && # Create a branch `gh-pages` inside the folder git worktree add gh-pages # Delete all files inside `gh-pages` folder, except the `.git` (to preserve the worktree) find gh-pages/ -mindepth 1 -not -name '.git' -delete # Copy all files from the `out` to `gh-pages` folder cp -r out/* gh-pages/ && # Commit changes inside `gh-pages` folder/branch and push them to GitHub cd gh-pages && git add . && git commit -m 'Deploy' && git push --set-upstream origin gh-pages
-
Check the GitHub page setting
-
Remove Jekyll from the build chain by creating
.nojekyll
file ingh-pages
folder/branch(with Jekyll, underscored names won’t work, like
_next
) -
Include that in the deploy script (after deleting files in
gh-pages
)# Disable Jekyll build process (https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages#static-site-generators) touch gh-pages/.nojekyll
-
Use
GITHUB_REPO
env variable before the build script and update the deploy script:# Set the GitHub repo name and build the Next.js app GITHUB_REPO="" npx next build &&
-
Update
next.config.js
file:const nextConfig = { // ... basePath: process.env.GITHUB_REPO ? `/${process.env.GITHUB_REPO}` : "", }