CODEWITHSUNDEEP
javascriptcssgitgoogle-chromegithub
stackers
stackers

Reputation: 3279

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

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);

Upvotes: 4

Views: 8763

Answers (3)

dutchsociety
dutchsociety

Reputation: 583

Lawl, you put it in a link that is connected with your personal account, this link isn't public. (try to put your link into the browser. Make sure to configure your project as public.

Also, make sure to check this similar post: How to link my CSS to my HTML in a github hosted site

Upvotes: -2

Francisco A. Cerda
Francisco A. Cerda

Reputation: 124

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);

Upvotes: 1

Majonez.exe
Majonez.exe

Reputation: 432

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

Upvotes: 9

Related Questions