[SOLVED] Media resources not found on GitHub Pages

Media resources not found on GitHub Pages

I am trying to upload a React project, created with create-react-app, to github pages. After running npm run build, I uploaded the built content to github, but nothing was found. I fixed a missing ./ both in index.html (by adding <base href="./" />) anc in asset-manifest.json (all entries were like "main.js": "/static/js/main.238dbb45.js" and I changed them manually to "main.js": "./static/js/main.238dbb45.js"). I also added "start_url": "https://ilDeffo.github.io/MyProject/" to my manifest.json
Before this change, the error I had in the browser console was Failed to load resource: the server responded with a status of 404 () and the resource urls were all like /static/js/main.238dbb45.js.

This little change fixed almost everything, except for the media files: the error message is the same as before, but now the urls of media files (.png, .jpg) are like "https://ilDeffo.github.io/static/media/my_image.png" so it looks like /MyProject/ is missing in this url.

What am I missing?

My Files:
index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <base href="./" />
        <link rel="icon" href="/favicon.ico" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <meta name="theme-color" content="#000000" />
        <meta
            name="description"
            content="Web site created using create-react-app"
        />
        <link rel="apple-touch-icon" href="/logo192.png" />
        <link rel="manifest" href="/manifest.json" />
        <title>MyProject</title>
        <script defer="defer" src="/static/js/main.238dbb45.js"></script>
        <link href="/static/css/main.23037022.css" rel="stylesheet" />
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
    </body>
</html>

manifest.json

{
    "short_name": "MyProject",
    "name": "MyProject",
    "icons": [
        {
            "src": "favicon.ico",
            "sizes": "64x64 32x32 16x16",
            "type": "image/x-icon"
        },
        {
            "src": "logo192.png",
            "type": "image/png",
            "sizes": "192x192"
        },
        {
            "src": "logo512.png",
            "type": "image/png",
            "sizes": "512x512"
        }
    ],
    "start_url": "https://ilDeffo.github.io/MyProject/",
    "display": "standalone",
    "theme_color": "#000000",
    "background_color": "#ffffff"
}

assets-manifest.json

{
  "files": {
    "main.css": "./static/css/main.23037022.css",
    "main.js": "./static/js/main.238dbb45.js",
    "static/js/453.d7c8ad91.chunk.js": "./static/js/453.d7c8ad91.chunk.js",
    "static/media/my_image.jpg": "./static/media/my_image.3b164cd332d9eaf73dd0.jpg",
    "static/media/my_image2.png": "./static/media/my_image2.95a63c7274aa5a772bd0.png",
    "index.html": "./index.html",
    "main.23037022.css.map": "./static/css/main.23037022.css.map",
    "main.238dbb45.js.map": "./static/js/main.238dbb45.js.map",
    "453.d7c8ad91.chunk.js.map": "./static/js/453.d7c8ad91.chunk.js.map"
  },
  "entrypoints": [
    "./static/css/main.23037022.css",
    "./static/js/main.238dbb45.js"
  ]
}

Please feel free to ask for any additional info or piece of code.

Thanks.

EDIT Folder structure is teh following:

MyProject
|
|__ public
|   |
|   |_ favicon.ico    
|   |_ index.html 
|   |_ logo192.png
|   |_ logo512.png
|   |_ manifest.json
|   |_ robots.txt
|
|__src
|   |_ assets
|   |  |
|   |  |_my_image.png
|   |  |_my_image2.png
|   |
|   |_ css
|   |  |
|   |  |_index.css
|   |
|   |_ App.js
|   |_ index.js
|
|_ package.json

Solution

I found out that adding

"homepage": "https://ilDeffo.github.io/MyProject/"

fixed the problem