Github Pages not styling my three.js page when deployed

Hello, im trying to deploy my site on GitHub Pages, however it is not adding any style to it. I recently came across this tutorial (https://www.youtube.com/watch?v=Q7AOvWpIVHU) and made a project following along with this video. When I run it on the localhost everything looks great but when I deploy it to my github pages i only see a plain html website with no styling https://petersidlauskas.github.io/mcfooly/
Does anyone know why this is happening?

How did you link your stylesheet to the Pages html?

See:
https://stackoverflow.com/questions/52003005/css-not-working-on-github-pages

Its linked correctly in the head section and should be working. Here is a link to my repository GitHub - petersidlauskas/mcfooly
the style.css is in the same main folder as the index.html and main.js

It does:

The ./grt-youtube-popup.css stylesheet is the only one you linked.
Which styles are you missing?

1 Like

This is how it looks when run with my localhost. There are a lot of 3D animations from using three.js that arent showing up

I see a file style.css in your repo. But you haven’t linked it in your index.html.

<head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="grt-youtube-popup.css">
    <title>Billy McFeely</title>
  </head>

You linked the style.css file in your JS file. But I don’t think that Github is compiling from package.json. The node modules aren’t available. So the compiling has to be done on your machine.

2 Likes

Thank you mirja, that helped with some styling, however the floating 3d graphics that I made using three.js are not showing up

Compile the app on your computer. Then link the compiled JS file in the index.html file and put it in your repo.

How do you compile the app?

Thank you

How are you currently running it on your computer?
You have this in your package.json:

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
  },

So npm run build should probably do it.

After doing npm run build I get a “dist” folder with an index.html and an assets folder in there. Do I push this folder to my github pages repository?

Yes, but make sure to put the index.html to the root of the repo and then adjust the file paths in its head.

Oh my god it worked! thank you so much! this was destroying my brain for days

1 Like