I deployed my website but it shows blank

ahmadbakesbread · March 22, 2024, 3:21am

the url of my netlify site is: https://ahmadkanoun.netlify.app

My website works when I run it on a localhost through npm start. However when deploying the app on netlify the website does not build appropriately. I have tried getting the deploying the app from my github repository along with running a build and deploying it manually, and still no luck.

also, maybe if its smthn to do with my code and you wanna test it out for yourself, here is my github repo: GitHub - ahmadbakesbread/portfolio-site

The building of the website was successful so i don’t really get the reason why its blank.

nathanmartin · March 22, 2024, 4:01am

@ahmadbakesbread It’s no surprise that your site shows as blank, as none of the resources are loading:

Checking the URL for just one of them shows it is requesting:
https://ahmadkanoun.netlify.app/portfolio-site/static/js/main.93a182b9.js

But the file is actually at:
https://ahmadkanoun.netlify.app/static/js/main.93a182b9.js

If you run your npm run build locally, (or check your Netlify build log), you will see a message that explains why this is happening.

It will mention that the site has been produced assuming that it will be hosted in a folder of /portfolio-site/ due to the homepage value you have set in your package.json.

See here:

github.com

ahmadbakesbread/portfolio-site/blob/main/package.json#L18


      
            "@testing-library/user-event": "^13.5.0",
            "gh-pages": "^6.1.1",
            "react": "^18.2.0",
            "react-dom": "^18.2.0",
            "react-router-dom": "^5.3.4",
            "react-scripts": "^5.0.1",
            "three": "^0.162.0",
            "web-vitals": "^2.1.4"
          },
          
          "homepage": "http://ahmadbakesbread.github.io/portfolio-site",
          "scripts": {
            "start": "react-scripts start",
            "build": "react-scripts build",
            "test": "react-scripts test",
            "predeploy": "npm run build",
            "deploy": "gh-pages -d build",
            "eject": "react-scripts eject"
          },
          "eslintConfig": {
            "extends": [

Since you want to host the site from the root on Netlify, (and not as https://ahmadkanoun.netlify.app/portfolio-site/), you should just delete the entire homepage declaration from your package.json.