0

In localhost, my HTML connects to my CSS file and can read my images but not on GitHub pages.

Why? Am I referencing it wrong for GitHub pages?

<link rel="stylesheet" type="text/css" href="/css/loan_sharks_page.css">
<img src="/assets/img/LS_icon.png" width="300" height="300" />

I have also tried:

<link rel="stylesheet" type="text/css" href="./css/loan_sharks_page.css">
    <img src="./assets/img/LS_icon.png" width="300" height="300" />

And I have tried:

<link rel="stylesheet" type="text/css" href="css/loan_sharks_page.css">
        <img src="assets/img/LS_icon.png" width="300" height="300" />

Each time I pushed to GitHub, I waited an hour cause I know GitHub pages sometimes takes a while. All of these work on localhost but not on Github pages.

Christian
  • 2,721
  • 3
  • 21
  • 36
Aria West
  • 79
  • 5
  • 1
    Does this answer your question? [GitHub pages and relative paths](https://stackoverflow.com/questions/16316311/github-pages-and-relative-paths) Also note that path names are case sensitive, – Yogi Apr 04 '22 at 00:30

4 Answers4

0

I think the problem is, that you can't upload a folder for images. Therefore your source for the image won't work. I put all images and HTML file at same hierarchy level and it worked fine for me. for example,

Himanshu Chaudhari
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 04 '22 at 04:09
0

type in your GitHub page URL on the browser followed by /index.html that should work.

If not check your href on your Html file & make sure it is correct.

Saheed
  • 145
  • 1
  • 9
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 04 '22 at 03:28
0

Just remove the / before the path and make sure that you have the same folder and file name. It should be working without any problem.

<link rel="stylesheet"  href="css/loan_sharks_page.css">
I_Al-thamary
  • 2,462
  • 1
  • 20
  • 33
0

My page uses this code in the layout:

<link rel="stylesheet" href="/assets/css/main.css">

Next to the index.md (meaning the same folder level) file which includes the layout I have such folder structure:

assets/css/main.css

The slash (/) in front let the page search from the base folder.

My background image (also set in the css file) uses the slash, too (/assets/images/my_background_image.jpg).

My config.yml file defines baseurl: "" - this could also be an issue with your site.

See https://github.com/cadamini/cadamini.github.io

Find some more options to solve the issue in this SO post:
GitHub pages and relative paths

Christian
  • 2,721
  • 3
  • 21
  • 36