4

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.

Import Accelerate
  • 457
  • 3
  • 13

2 Answers2

2

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

ironmonkus
  • 21
  • 1
  • Great! I wonder why that fixed it. Is it because GitHub prefixes it with `https://github.com/SafelySwift/Swizzle/blob/master/docs/`? – Import Accelerate Jan 12 '19 at 03:58
  • 1
    @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. – ironmonkus Jan 12 '19 at 05:34
  • I commented before @NoobTW answerd. – Import Accelerate Jan 12 '19 at 05:42
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.

NoobTW
  • 2,466
  • 2
  • 24
  • 42