Referencing a .css file in github repo as stylesheet in a .html file

Question

I've got a repository on github with a .css file in it. Is there any way to have github serve this file in a way that I can consume it in a web page?

In other words, I'd like to be able to reference this source file at github directly, from an HTML file on my local computer or a live domain. Something like:

<link rel="stylesheet"
      type="text/css"
      href="http://github.com/foouser/barproject/master/xenu-is-my-lover.css"
/>

I've tried including a<link> to the "raw" source file (http://raw.github.com...), but github serves its Content-Type as text/plain, and consequently, Chrome and FF are not adding its content as CSS styles to the page—the file's data is being discarded and a warning is shown in the debugger consoles of the browsers.

possible duplicate of Link and execute external JavaScript file hosted on GitHub — Troy Alford
– Troy Alford, Commented Oct 24, 2014 at 20:43
(try this) You can create a folder/file.css and serve it from GitHub pages. Just follow the correct path from the URL and get the file when referencing it from your local html file. — carloswm85
– carloswm85, Commented Nov 27, 2021 at 18:00

Kushagra Gour · Accepted Answer · 2018-12-28 16:17:42Z

66

Important: rawgit.com is shutting down. Read more about other alternatives here - https://rawgit.com/

Found something really cool. You get the raw link as: http://raw.github.com/...

Simply fetch the files from rawgit.com (or cdn.rawgit.com) instead of raw.github.com and DONE!

UPDATE:

You can also use raw.githack.com if you want to serves raw files directly from Bitbucket or GitLab

edited Dec 28, 2018 at 16:17

answered Feb 13, 2013 at 20:33

Kushagra Gour

4,9932 gold badges24 silver badges26 bronze badges

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

4 Comments

Kevin M Over a year ago

Just what I needed to serve the proper MIME type!

ricksmt Over a year ago

Keep in mind that you should not use rawgithub for production code.

Mark Carpenter Jr Over a year ago

Mind Blown. Private gists and repo's don't work. just as an FYI

V. Rubinetti Over a year ago

JsDelivr does this apparently! Example: cdn.jsdelivr.net/gh/StylishThemes/Syntax-Themes/pygments/… from this GitHub file. This service seems to have been around for a long time, and widely used.

Tekkub · Accepted Answer · 2011-10-17 07:56:51Z

16

GitHub repos aren't web hosting, you should push that stuff up to a service specifically designed to serve files, like pages.github.com.

answered Oct 17, 2011 at 7:56

Tekkub

31.9k2 gold badges33 silver badges20 bronze badges

1 Comment

32423hjh32423 Over a year ago

I don't think this is true. You can host static files on github, granted web hosting is better but it can work on github pages.

Squirrl · Accepted Answer · 2019-03-08 00:00:22Z

9

Check out https://gitcdn.link/ . Seems to work well.

Rawgit.com has shut down.

answered Mar 8, 2019 at 0:00

Squirrl

4,9649 gold badges51 silver badges88 bronze badges

2 Comments

sdbbs Over a year ago

Does not like this works either; there is a front page, but About etc do not resolve ("Cannot GET /about"), and when you try to paste a link, you get nothing in the text field?

V. Rubinetti Over a year ago

This seems to be abandoned too unfortunately. Might be due to Heroku removing its free tier and removing inactive accounts.

TylerH · Accepted Answer · 2023-11-15 21:49:27Z

2

First Visit RawGit as suggested earlier
Next copy your file path from github into the RawGit box
RawGit will automatically produce two refrences to your web page
The Development and Production refrence
refrence the development link in your webpage if you are still developing
save/upload then reload your webpage
if there was no change it means your browser has saved your former refrence
clear your browser data then reload

edited Nov 15, 2023 at 21:49

TylerH

21.3k84 gold badges84 silver badges121 bronze badges

answered Aug 16, 2014 at 13:46

Toye_Brainz

1007 bronze badges

Comments

TBG · Accepted Answer · 2024-11-22 14:20:32Z

https://raw.githack.com/ works perfectly well, for free, and now supports GitHub (with Gist), Bitbucket, GitLab, sourcehut. It also provides you two URLs, one for dev and one for prod (with caching, Cloudflare & stuff)

Explanations on why it doesn't work from Github out of the box and what does GitHack (from their FAQ)

When you request a file from source control hosting services, they are usually served (in the case of JavaScript, HTML, CSS, and some other file types) with a Content-Type of text/plain. As a result, most modern browsers won't actually interpret it as JavaScript, HTML, or CSS.

They do this because serving raw files from a git repo is relatively inefficient, so they want to discourage people from using their repos for static file hosting.

raw.githack.com acts as a caching proxy, forwarding requests to the corresponding service, caching the responses either for a short time (in the case of development URLs) or permanently (in the case of CDN URLs), and relaying them to your browser with the correct Content-Type headers.

The caching layer ensures that minimal load is placed on each service, and you get quick and easy static file hosting right from a repo. Everyone's happy!

Collectives™ on Stack Overflow

Referencing a .css file in github repo as stylesheet in a .html file

5 Answers 5

4 Comments

1 Comment

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related