How can I use github to host an external CSS file?

Question

I uploaded my css to github, then went to the file on the site and clicked the raw option. I tried adding it to a webpage, but chrome is giving me the following errors:

Resource interpreted as Stylesheet but transferred with MIME type text/plain: "https://raw.githubusercontent.com/me/my-repo/master/style.css".

and

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://raw.githubusercontent.com/me/my-repo/master/style.css with MIME type text/plain. See https://www.chromestatus.com/feature/5629709824032768 for more details.

What can I do to add this CSS successfully? I'm adding it with javascript too:

var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', 'https://raw.githubusercontent.com/me/my-repo/master/style.css');
document.getElementsByTagName('head')[0].appendChild(link);

Does this answer your question? How to link my CSS to my HTML in a github hosted site — dutchsociety
– dutchsociety, Commented Aug 27, 2020 at 17:19
I lost like 2 hours figuring this out as well. I had the same problem when trying to serve js files from my github repo. It turns out that raw.githubusercontent is served as 'text/plain' instead of 'application/javascript'. You can see this by checking the 'Content-Type:' response header in your browser. This was the best solution I found stackoverflow.com/a/63621133/1519464 — Alejandro Lozdziejski
– Alejandro Lozdziejski, Commented Dec 12, 2023 at 17:21

Majonez.exe · Accepted Answer · 2020-08-27 17:22:11Z

9

You can host your files on Github Pages, Just go to repo settings[1], find "Github Pages" section and set your branch[2] and click "Save". You will se the info[3]. Then you go to https://YOUR-GITHUB-USERNAME/REPO-NAME (If you have index.html or any file eg. /src/css/style.css) You can load the CSS, JS or other files on any site

<link rel="stylesheet" href="path/to/file/style.min.css">

[1]:

Settings

[2]:

Branch

[3]:

Success Info

edited Aug 27, 2020 at 17:22

answered Aug 27, 2020 at 17:16

Majonez.exe

4428 silver badges23 bronze badges

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

Comments

Francisco A. Cerda · Accepted Answer · 2020-08-27 17:26:14Z

Maybe it's a lil' complicated, because you have to get the file through Javascript, then print it into a style tag. CORB has to do with server configuration, not client.

JS Example:

var xhttp = new XMLHttpRequest();
xhttp.open("GET", "https://raw.githubusercontent.com/me/my-repo/master/style.css", true);
xhttp.onreadystatechange = function() {
  if (xhttp.readyState === 4) {
    if (xhttp.status === 200) {
      var link = document.createElement('style');
link.innerHTML=xhttp.responseText;
document.getElementsByTagName('head')[0].appendChild(link);
    }
  }
}
xhttp.send(null);

Collectives™ on Stack Overflow

How can I use github to host an external CSS file?

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related