Why is gh-pages not recognizing the project directory while looking for resources?

Question

Why is gh-pages not recognizing the project directory while looking for resources?

I've encountered an issue with my website that functions perfectly fine locally but when deployed on gh-pages, it results in several 404 errors while attempting to retrieve resources. One such example is a line of CSS for setting the background:

background: #fff url(/assets/images/bg.jpg) repeat top left;

The specific 404 error message I receive is this:

github.io/assets/images/bg.jpg

Instead, the correct path should be:

github.io/myProject/assets/images/bg.jpg

Any suggestions on how to resolve this issue and make it work correctly?

javascript html css resources github-pages

Answer 1

Answer №1

It seems that the issue lies in your local setup where the assets folder is located in the same directory as the file.

For example, if your local path appears like this: file:///index.html and your assets folder is a sibling to index.html, it works because the / leads to the root of the directory, which is file:///, allowing it to find the assets folder locally.

However, on GitHub, your repository might be named my-project. Within my-project, you have an index.html file and an assets folder. When you use /assets/, the beginning directory is now github.io, causing it to look for the assets folder there, which does not exist.

Solution: Avoid adding / before assets. As long as the assets are in the same directory as the code, it should work correctly.

Additionally, consider reviewing relative paths to gain a better understanding:

Answer 2

It seems that the issue lies in your local setup where the assets folder is located in the same directory as the file.

For example, if your local path appears like this: file:///index.html and your assets folder is a sibling to index.html, it works because the / leads to the root of the directory, which is file:///, allowing it to find the assets folder locally.

However, on GitHub, your repository might be named my-project. Within my-project, you have an index.html file and an assets folder. When you use /assets/, the beginning directory is now github.io, causing it to look for the assets folder there, which does not exist.

Solution: Avoid adding / before assets. As long as the assets are in the same directory as the code, it should work correctly.

Additionally, consider reviewing relative paths to gain a better understanding:

Answer 3

Answer №2

Although gh-pages are typically created by Jekyll, you can harness its power to simplify the development process.

To do this, simply create a _config.yml file at the root with the following content:

baseurl: myPortfolio/

Now, whenever you need to reference a resource, just use

{{site.baseurl}}assets/images/bg.jpg

, which will automatically convert to myPortfolio/assets/images/bg.jpg.

Answer 4

Although gh-pages are typically created by Jekyll, you can harness its power to simplify the development process.

To do this, simply create a _config.yml file at the root with the following content:

baseurl: myPortfolio/

Now, whenever you need to reference a resource, just use

{{site.baseurl}}assets/images/bg.jpg

, which will automatically convert to myPortfolio/assets/images/bg.jpg.

Why is gh-pages not recognizing the project directory while looking for resources?

Answer №1

Answer №2

Similar questions

Build a brand new root component in Vue JS

Best practices for referencing attributes created with the data method in a Vue component

What is the CSS/HTML code to position text at the bottom of an image overlay in a card design?

What is the proper way to integrate three.js (a third-party library) into the view controller of an SAPUI5 application

Cannot load JavaScript in Ajax tabs

What is the best approach to execute the jquery script exclusively on mobile devices?

When viewing Google maps in full screen mode, the image suddenly vanishes

PHP query will execute even in the absence of clicking the button

Update the default arrow icon in the expand/collapse navigation bar

JavaScript Error: Unable to execute getJsonData due to function not found

Converting a string to an array in React when updating the state

Generating nested arrays using Vue.js

The jQuery animation concludes before its anticipated completion

Designing a sleek border for form input fields

Jest unit tests are failing due to an error stating that VUE_APP_CONFIG is not defined

I'm curious, in which environment does SvelteKit, Next.js, and Nuxt.js code execute? Also, is it possible to create HTTP request handlers within

Transforming instance of a Class into Json format for WebService

What is the art of spinning a div?

Tips for utilizing background-position and background-size in CSS while also positioning an image at a specific location

Apply the jQuery method to select elements with index 3, 4, 5, 6, or 7, then add