Github pages receiving 404 errors when fetching using JavaScript to load html

Error Images.
I have been recently working on my website however, ever since I started using JavaScript to try to inherit the navbar and the footer to every page, I would get a 404 error.

When the page loads, it suppose to load in the Navbar.html and the Footer.html that are from the components folder. The JavaScript or scripts.js would fetch the Navbar.html and Footer however it returns with an error.

ErrorLog

components/footer.html:1 
        
        
       Failed to load resource: the server responded with a status of 404 ()
scripts.js:13 Error: Error: Failed to load footer
    at scripts.js:5:19
(anonymous) @ scripts.js:13


components/navbar.html:1 
        
        
       Failed to load resource: the server responded with a status of 404 ()
scripts.js:28 Error: Error: Failed to load navbar
    at scripts.js:20:19
(anonymous) @ scripts.js:28

// script.js
// Load footer from footer.html
fetch('../../components/footer.html')
    .then(response => {
        if (!response.ok) {
            throw new Error('Failed to load footer');
        }
        return response.text();
    })
    .then(data => {
        document.getElementById('footer-placeholder').innerHTML = data;
    })
    .catch(error => {
        console.error('Error:', error);
    });

// Load navbar from navbar.html
fetch('../../components/navbar.html')
    .then(response => {
        if (!response.ok) {
            throw new Error('Failed to load navbar');
        }
        return response.text();
    })
    .then(data => {
        document.getElementById('navbar-placeholder').innerHTML = data;
    })
    .catch(error => {
        console.error('Error:', error);
    });

// index.html within body tag
<body>
    <div class="container mt-5">
        <!-- Navbar will be placed here -->
        <div class="navbar-placeholder"></div>
    
        <!-- Footer will be loaded here -->
        <div id="footer-placeholder"></div>
    </div>
    // Scripts
    <script src="./assets/js/scripts.js"></script>
</body>

Portfolio-Website/
├── .gitattributes
├── .gitignore
├── index.html
├── README.md
├── .git/
├── .vs/
├── assets/
│   ├── css/
│   │   └── style.css
│   ├── images/
│   │   ├── Graduate/
│   │   │   └── graduate.png
│   │   ├── movielist/
│   │   │   └── movielist.png
│   │   └── resume/
│   │       └── IMG_1301.jpg
│   └── js/
│       └── scripts.js
├── components/
│   ├── footer.html
│   └── navbar.html
├── pages/
│   ├── about.html
│   ├── contact.html
│   ├── graduation-invite.html
│   ├── movie-ranking.html
│   └── resume.html

Repository: https://github.com/Francefernance12/Portfolio-Website.git

Website: https://francefernance12.github.io/Portfolio-Website/

I tried to change the relative paths in various ways, use error handling in the JS file by using the website developer tools, and I even use AI chatgpt to check if my Javascript code was correct. It resulted in the same fetching error. I am not sure if its the problem with github pages hosting or if its due to my codes.

You need to sign in to view this answers

Related Post