1

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.

Autumn Jing Green
  • 15
  • 3
  • one thing, you can only deploy a repo to GitHub pages if its name is something like this [username].github.io – Sameer Waseem Feb 23 '23 at 07:50
  • @SameerWaseem The repository is deployed via Github Pages successfully from what I can tell. 'Page' section of settings indicates that it is live and is hosted in the format you mention. – Autumn Jing Green Feb 23 '23 at 07:57
  • Where are you loading the three.js library from? `import * as THREE from 'three';` doesn't point anywhere, since `three` doesn't exist in your repository. – Mahan Lamee Feb 23 '23 at 08:14
  • The docs suggest something like this: `import * as THREE from 'https://unpkg.com/three/build/three.module.js';` – Mahan Lamee Feb 23 '23 at 08:16
  • Also btw, I am not receiving a 404 on your entire website, only the canvas part is broken. [Here is the URL to the deployment](https://autumngreenbean.github.io/portfolio/) – Mahan Lamee Feb 23 '23 at 08:18
  • @MahanLamee Aha! That makes complete sense. I have made changes to the index in both branches, but the canvas is still failing to show. However, as you mention there is no longer a 404 error which is great. – Autumn Jing Green Feb 23 '23 at 18:47

1 Answers1

0

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!

Jessa Challa
  • 11
  • 2