GitHub Pages is experiencing difficulty locating the css and bundle files despite functioning correctly on local servers and a custom domain

Despite working flawlessly locally and on a custom domain, GitHub Pages is struggling to locate css and bundle files. I deploy from a branch.

To view the page, click here - GitHubPages page

For the project itself, visit this link - HouseLoaderPage

In order to demonstrate its functionality on a custom domain, I have created a clone of the project which can be accessed here - CustomDomain

The css files are supposed to be located at: https://annaantonovna.github.io/styles.css and https://annaantonovna.github.io/bundle.js

As a civil engineer, not a programmer, I must admit that I am quite frustrated with this issue. I have tried altering the branch to None and back again, editing the addresses in index.html for the css and bundle files without success. Various variations such as './', '../..' have also been attempted but to no avail.

UPD: After much trial and error, I discovered that specifying the project name in the path for the files in this specific format /HouseLoaderPage/styles.css and /HouseLoaderPage/bundle.js was the key solution. Using the first "/" was essential. Although it may no longer function locally, at least it now works on GitHub pages!:)

javascripthtmlcssgithubgithub-pages

Answer №1

It appears that there may be an issue with the configuration of your Github pages in the original repository.

The two repositories have different paths for index.html:

  • Original -
  • Clone -

Please note the additional HouseLoaderPage in the original link.

This discrepancy is causing issues with locating the files, as shown in the network tab of your browser:

https://i.sstatic.net/59LW3.png

The original repository is attempting to fetch files from , which do not exist.

However, does exist.

To resolve this issue, you can either:

  1. Adjust your Github pages setup so that the index path does not include HouseLoaderPage
  2. Utilize relative path imports when requesting your styles and bundles Here's an example:
<link rel="stylesheet" type="text/css" href="styles.css">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with res.redirect not working after the page has been rendered with data?

I have a basic forget password feature set up, where users can request a password change and receive an email with a token. Clicking the link in the email will redirect them to a page where they can input their new password. When I click on the email link ...

javascriptnode.jshttp-redirectexpressejs

Discover the process for breaking down JSON data into separate stages using the Express API

My API architecture is causing a problem as I try to insert it into an array called items[]. https://i.stack.imgur.com/qe802.png The setup involves a simple API built on express + mongodb. The challenge lies in figuring out how to store data from the pos ...

javascriptmongodbexpress

What is the process of sending a file to a server and storing it in a MySQL database?

Currently, I am exploring the process of enabling users to upload images of specific dimensions (468px by 60px) to a designated directory on my server, such as example.com/banners. Subsequently, the URL link to these uploaded banners will be stored in a ...

phpmysqlhtml

What is the best way to structure a data object in Javascript or VueJs?

As I work on developing a small application using VueJs, the data I receive is structured in a particular format: { "interactions":[ { "id":14, "user_id":1, "schedule":"2017-06-04 05:02:12", "typ ...

javascriptvue.jsvuejs2

GET requests will not be allowed

Having an unusual issue where the GET parameters are not being passed properly. <!DOCTYPE html> <html> <body> <?php var_dump($_GET); var_dump($_POST); ?> <form action="test.php?ds=1" m ...

phphtmlinputget

Sending an integer array to an MVC Controller

I am attempting to send an array of integers from JavaScript to an MVC controller that requires 2 parameters - an integer array and an integer value. This is needed for a Page Redirect to the View returned by the Controller Action. var dataArray = getAllI ...

javascriptjqueryasp.net-mvcarraysmodel-view-controller

Can I Select a Specific Node in React Component with Unique Behavior Upon Reuse?

Seeking advice on how to uniquely target a specific node within my react reusable component in order to perform operations on it multiple times independently. I will be rendering this reusable component several times on the same page in my App.js. Here is ...

javascriptreactjs

Distinguishing between client side rendering and server side rendering is the backbone of web development

My goal is to give users the option to request webpages from my website either directly from the server or by clicking on links, which will be managed by Backbone's router. When a user requests a webpage directly from the server, they will receive a ...

javascripthtmlbackbone.jssingle-page-application

Guide to adding customized CSS and JavaScript to a specific CMS page on Magento

I'm trying to incorporate a lightbox for video playback on a specific page of my CMS. I've placed my CSS file in JS/MY THEME/JQUERY/PLUGIN/VENOBOX/CSS/myfile.css and the JS files in JS/MY THEME/jquery/plugins/venobox/js/myfile.js, but it doesn&ap ...

javascriptcsslayoutmagento-1.9

What is the best way to select the child div within the "results" class that doesn't have any additional classes or identifiers linked to it?

I am looking to update the appearance of a div class that solely contains text. Specifically, I would like to customize the text "Afrikaans: Books by Language" by utilizing the parent class = "results" along with CSS child properties. <div class = "res ...

htmlcss

Guide on adjusting CSS in Vue

Here's the HTML element that I'm working with: <div id="scrollbar" style="background-color: #000;" v-bind:style="{ height : scrollbarheight + 'px' }" ></div> I have been attempting to adj ...

javascriptvue.js

How can I simulate the response of a VueX action using Vue-test-utils?

I am currently developing a test for a Vue component that interacts with a module store to execute an action and utilize the result from it. Since the action involves making requests to our API, I prefer not to run the test using the actual action. Instea ...

javascriptvue.jsunit-testingvuex

extracting content using cheerio

I need help extracting specific information from this HTML and storing it in an object. I only want to extract Jung Ho Kang and 5, excluding any text within the (R) and SS tags. <td id="lineup-table-top"> <b class="text-muted pad-left-10">5& ...

javascriptnode.jscheerio

Adjust the attributes of THREE.tubeGeometry

Within my Three.js scene, I currently have a tube object that I need to dynamically adjust the start and end points of. I believe this approach is more efficient than creating a new tube with updated points and removing the old one. If this is not the case ...

javascriptdynamicthree.js

What could be causing the three.PointLightHelper to fail in my script?

I am encountering an issue with the line of code scene.add(new THREE.PointLightHelper(bluePoint, 3)); in my code snippet below: var bluePoint = new THREE.PointLight(0x0033ff, 100, 500); bluePoint.position.set( 500, -500, 25 ); scene.addLight(bluePoint); s ...

javascriptthree.js

I am currently having trouble with req.query not functioning correctly within Next.js for reading query parameters

I am facing an issue while working with a REST API in Next.js 13. I have created the API, which can be accessed at http://localhost:3000/api/portfolio. However, when I try to filter the data using query parameters like http://localhost:3000/api/portfolio?s ...

javascriptreactjsnext.js

The issue I'm encountering is with adjusting the width of the "li" element. I previously faced a similar challenge with the "div" width, but managed to resolve it. My goal is to set the width of the "li" to 50%, but I'm having difficulty achieving

<ul> <li>test 1</li> <li>test 2</li> <li>test 3</li> <li>test 4</li> <li>test 5</li> <li>test 6</li> </ul> *{ margin:0; padding:0; box-sizing:border-box; ...

htmlcss

The JSON node fails to return a value after inserting data through an ajax request

I'm encountering an issue with a jQuery plugin that loads JSON data through an AJAX call and inserts it into an existing object. When I attempt to reference the newly inserted nodes, they show up as 'undefined', despite the data appearing co ...

javascriptjqueryajaxjson

Modify the Color of Chosen Anchors for Site Categories WITHOUT Using JavaScript

Is there a way to change the color of section anchors in a fixed header when selected without using JavaScript? I'm looking for a CSS-only solution that will change the color of the selected anchor and revert it back to normal when another anchor is c ...

htmlcssanchorsections

Run code after all images have been rendered in vuejs

Is there a way to execute code after all images have loaded, specifically needing to set the scroll in a specific position? Using nextTick() processes the code before the images are loaded. The mounted and created methods can't be used since the code ...

javascriptvue.jsvuejs2vue-component