404 Error using Github Pages and Three.js

Question

I am failing to deploy a simple website using Github Pages and the three.js library. There is successful functionality running the local repository in its' base state.

Once attempting to deploy via Github Pages, I am thrown a 404 error after following what I found to be the most common workflow -

1. create a /dist folder,
2. place the necessary files in it, (index.html, styles.css, main.js, assets, etc.)
3. deploy within a secondary branch 'gh-pages'.

I have redirected .js and .css references in the index to regard this change, though I am still receiving a 404 error.

The website was created using vite.js

What are some steps I could take to help aid this problem? I have rebuilt from scratch and used several references but cannot seem to solve this issue.

Here is the repository

*Edit: I have configured the repository successfully with Github Pages and it is indicated as live.

Answer 1

I found that using gh-pages is the easiest way. Here are the steps I take:

1. In the project's terminal, run npm install gh-pages
2. Under "scripts" in your package.json, add a script for 'deploy.' Like this: "deploy": gh-pages -d dist
3. Build your project (npm run build) & make sure you have a GitHub repo.
4. Now, you can run npm run deploy in the terminal, which will set up your project in Git Hub Pages.

Running npm run deploy automatically creates a branch called gh-pages. It also automatically sets up your GitHub Pages settings to reference this branch.

Here is a Loom video of me successfully deploying a new Three.js/Vite project to GitHub pages. I go through each of the steps I listed above. You may also reference my repo here.

Hope this helps!