CODEWITHSUNDEEP
github
user979672
user979672

Reputation: 1843

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

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.

Upvotes: 39

Views: 31342

Answers (5)

TBG
TBG

Reputation: 392

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!

Upvotes: 0

Toye_Brainz
Toye_Brainz

Reputation: 100

  • 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

Upvotes: 2

Squirrl
Squirrl

Reputation: 4966

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

Rawgit.com has shut down.

Upvotes: 9

Kushagra Gour
Kushagra Gour

Reputation: 4966

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

Upvotes: 66

Tekkub
Tekkub

Reputation: 31715

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

Upvotes: 16

Related Questions