CSS not loading for GitHub pages

Question

I have a site published with GitHub pages:

https://safelyswift.github.io/Swizzle/

I want to use docs/css/style.css in my index.html file. I have tried using the full url, GitHub raw url, and shortened url but none of them work.

ie: I have tried many variations on this line:

<link rel="stylesheet" href="https://github.com/SafelySwift/Swizzle/blob/master/docs/css/style.css">

<link rel="stylesheet" href="/Swizzle/docs/css/style.css">

<link rel="stylesheet" href="https://raw.githubusercontent.com/SafelySwift/Swizzle/master/docs/css/style.css">

but none work.

Getting error:

Did not parse stylesheet at 'https://github.com/SafelySwift/Swizzle/blob/master/docs/css/style.css' because non CSS MIME types are not allowed in strict mode.

in Safari debug console.

you linked directly to the source viewer page, not to the content. — Daniel A. White
– Daniel A. White, Commented Jan 12, 2019 at 3:22
there is no file present on safelyswift.github.io/Swizzle/docs/css/style.css ... i am getting a 404 error — Akber Iqbal
– Akber Iqbal, Commented Jan 12, 2019 at 3:47

ironmonkus · Accepted Answer · 2019-01-12 03:32:22Z

2

Try: <link rel="stylesheet" href="css/style.css">

answered Jan 12, 2019 at 3:32

ironmonkus

211 bronze badge

Sign up to request clarification or add additional context in comments.

3 Comments

entangled_photon Over a year ago

Great! I wonder why that fixed it. Is it because GitHub prefixes it with https://github.com/SafelySwift/Swizzle/blob/master/docs/?

ironmonkus Over a year ago

@NoobTW answered this pretty well. It's based off of what your root is or where all your files live in your repository. If there are no folders in the repository, then the path is the filename. If there is a folder and the file is in it, then it's folder/filename. Glad I could help.

entangled_photon Over a year ago

I commented before @NoobTW answerd.

NoobTW · Accepted Answer · 2019-01-12 03:58:32Z

1

You should link to css/style.css, which is short of https://safelyswift.github.io/Swizzle/css/style.css because the root directory of your GitHub Page is /docs.

The reason "https://github.com/SafelySwift/Swizzle/blob/master/docs/css/style.css" not work is because this link actually goes to the GitHub code preview page. It's not a valid CSS file but an HTML page with lots of GitHub functions(preview, commit log, history, etc.) But "https://safelyswift.github.io/Swizzle/css/style.css" is served by GitHub Page, so this link contains only pure CSS file which is valid.

To see the difference between these files. Just navigate these link with your browser, and right-click your page to see the source code. You can see what your browser sees there.

edited Jan 12, 2019 at 3:58

answered Jan 12, 2019 at 3:53

NoobTW

2,6242 gold badges27 silver badges46 bronze badges

Collectives™ on Stack Overflow

CSS not loading for GitHub pages

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related