How to deploy React App to GitHub Pages - Caveman Style 🌋 🔥🦴

#webdev #github #react #staticwebapps

Like a good caveman you have to do everything by hand and with as little automation as possible.

Create the New Repo

Create the repo on your GitHub Account

Create a public repo named <user-name.github.io>

Configure the GitHub Pages to Deploy From Branch

Go to Settings tab:

On the left side menu choose Pages

In the building and deploy options choose Deploy from branch and select the branch you want to use.

Now your have configured everything by hand to make your GitHub Pages Site able to receive files for deploy.

Create a your React App Static Website

You my have it finished already and don't need to create. I used vite and pnpm and choose a typescript template. So it would look like:

pnpm create vite

Well, do your thing react and push it to GitHub.

It may involve:

git add .
git commit -m "react app first commit"
git remote add origin git@github.com:<user>/<repo>.git
git push -u origin main

Be the Caveman

In the configured branch you only need the files generated by React's build, and your App will be live at https://.github.io/. The root of your branch should look like this:

To generate the files use:

pnpm run build

or whatever is your package manager.

Then delete all files except the dist folder(be careful if you don't have a backup in another branch you can lose everything), copy dist folder's content to the root folder and delete dist folder. You can do it by hand or use a script since we're not going to remain caveman forever, and I want to start automating things in the next posts:

find . -mindepth 1 -maxdepth 1 ! -name 'dist' ! -name '.git' -exec rm -rf {} +
cp -r dist/* .
rm -r dist

Commit and push to the configured branch.

Not Caveman Forever

The process I just showed is error prone and cumbersome. In another post I will discuss how I automated it, for those impatient here is the code of the automation https://github.com/uxjp/uxjp.github.io/pull/5/files.