How to link files directly from Github (raw.github.com)

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP



How to link files directly from Github (raw.github.com)



Are we allowed to link files directly from Github ?


<link rel="stylesheet" href="https://raw.github.com/username/project/master/style.css"/>
<script src="https://raw.github.com/username/project/master/script.js"></script>



I know this is allowed on Google Code. This way I don't have to worry about updating a local file.





You can see question analog with good answers here: stackoverflow.com/questions/17341122/…
– AuthorProxy
Sep 23 '13 at 18:23





Possible duplicate of Link and execute external JavaScript file hosted on GitHub
– Troy Alford
Feb 11 '17 at 6:15




9 Answers
9



Thanks for all the up and downvotes. This answer is old. Very old. It's basically from the internet's middle ages so stop voting on it. It makes me unhappy and grumpy. I won't change the answer anyway. Just look a bit further down the page to see answers that are less old but also outdated. Give them some love too. The closer to the bottom you get the more accurate an answer you can expect for your question today.



of course, why not? It's even update save unless someone changes history in git and forces a push.





Incorrect answer. When you request certain types of files (like JavaScript, CSS, or HTML) from GitHub, it serves them with a Content-Type header set to text/plain. As a result, most modern browsers won't actually interpret these files as JavaScript, CSS, or HTML and will instead just display them as text. GitHub does this because serving raw files from a git repo is inefficient and they want to discourage people from using their GitHub repos for static file hosting.
– colxi
May 3 at 23:20






Sure, but then this answer is from 2012. Some answers should be retired.
– three
May 4 at 6:07



You can use external server rawgithub.com. Just remove a dot between words 'raw' and 'github' https://raw.github.com/.. => https://rawgithub.com/ and use it. More info you find in this question.


rawgithub.com





There is also rawgit.com for serving raw files. RawGit serves raw files directly from GitHub with proper Content-Type headers.
– sentenza
Oct 6 '14 at 17:10






I believe that rawgithub.coma nd rawgit.com are the same service, that has been renamed :)
– Shane Gadsby
Jun 26 '15 at 5:23





It appears that rawgit has issues with Chrome? snag.gy/VknHNQ.jpg
– danielh
Jul 18 at 21:50



The great service RawGit was already mentioned, but I'll throw another into the ring: GitCDN.link



Benefits:



Full disclosure, I'm a project maintainer at GitCDN.link





This is just what I was looking for -- thanks a lot for the service. Suggestion: instead of requiring the raw URL, you should make it work with the regular URL as well (similar to rawgit).
– thdoan
Apr 5 '17 at 8:03






@10basetom: Great suggestion! I'll add it to the roadmap!
– Shane Gadsby
Apr 7 '17 at 7:12





@ShaneGadsby Thank you so much. Because of setting the correct headers it forces to download a file which was my desired behavior. I had no other chance to force the download because GitHub even strip the download attribute when using HTML anchor elements.
– Michael Kühnel
Apr 19 at 18:54



download





If looking for LAST COMMIT CDN deployer, this is the best option.
– colxi
May 4 at 0:16



You need carry out the following steps



Get the raw url of the file from github. Which is something like https://raw.githubusercontent.com/username/folder/example.css



Visit http://rawgit.com/. Paste the git url above in the input box. It will generate two url's, one for development and other for production purpose.



Copy any one of them and you are done.



The file will act as a CDN. You can also use gist urls.



You can link directly to raw files, but it's best not to do it since the raw files always get sent with a plain/text header and can cause loading problems.





prevents loading in jsfiddle
– jack
Aug 25 '13 at 17:04



Branch your project using the name "gh-pages" and then you'll (shortly after branching) be able to use a direct URL such as https://username.github.com/project/master/style.css (using your URL, and assuming "style.css" is a file in the "master" folder in the root of your "project" repository...and that your Github accoutn is "username").



After searching for this same functionality, I ended up writing my own PHP script to act as a proxy. The trouble I kept running into is even when you get the RAW version/link from Github and link to it in your own page, the header sent over was 'text/plain' and Chrome was not executing my JavaScript file from Github. I also didn't like the other links posted for using third party services because of the obvious security/tampering issues possible.


PHP


Github


Chrome


JavaScript


Github



So using this script, I can pass over the RAW link from Github, have the script set the correct headers, and then output the file as if it were coming from my own server. This script can also be used with a secure application to pull in non-secure scripts without throwing SSL errors warning of "Non-secure links used".


Github


SSL



Linking:



<script src="proxy.php?link=https://raw.githubusercontent.com/UserName/repo/master/my_script.js"></script>



proxy.php


<?php
###################################################################################################################
#
# This script can take two URL variables
#
# "type"
# OPTIONAL
# STRING
# Sets the type of file that is output
#
# "link"
# REQUIRED
# STRING
# The link to grab and output through this proxy script
#
###################################################################################################################



# First we need to set the headers for the output file
# So check to see if the type is specified first and if so, then set according to what is being requested
if(isset($_GET['type']) && $_GET['type'] != '')
switch($_GET['type'])
case 'css':
header('Content-Type: text/css');
break;

case 'js':
header('Content-Type: text/javascript');
break;

case 'json':
header('Content-Type: application/json');
break;

case 'rss':
header('Content-Type: application/rss+xml; charset=ISO-8859-1');
break;

case 'xml':
header('Content-Type: text/xml');
break;

default:
header('Content-Type: text/plain');
break;


# Otherwise, try and determine what file type should be output by the file extension from the link
else
# See if we can find a file type in the link specified and set the headers accordingly

# If css file extension is found, then set the headers to css format
if(strstr($_GET['link'], '.css') != FALSE)
header('Content-Type: text/css');

# If javascript file extension is found, then set the headers to javascript format
elseif(strstr($_GET['link'], '.js') != FALSE)
header('Content-Type: text/javascript');

# If json file extension is found, then set the headers to json format
elseif(strstr($_GET['link'], '.json') != FALSE)
header('Content-Type: application/json');

# If rss file extension is found, then set the headers to rss format
elseif(strstr($_GET['link'], '.rss') != FALSE)
header('Content-Type: application/rss+xml; charset=ISO-8859-1');

# If css xml extension is found, then set the headers to xml format
elseif(strstr($_GET['link'], '.xml') != FALSE)
header('Content-Type: text/xml');

# If we still haven't found a suitable file extension, then just set the headers to plain text format
else
header('Content-Type: text/plain');



# Now get the contents of our page we're wanting
$contents = file_get_contents($_GET['link']);

# And finally, spit everything out
echo $contents;
?>



If your webserver has active allow_url_include, GitHub serving the files as raw plain/text is not a problem since you can include the file first in a PHP script and modify its Headers to the proper MIME type.



GitHub Pages: https://yourusername.github.io/script.js

GitHub repo raw files: https://github.com/yourusername/yourusername.github.io/blob/master/script.js


https://yourusername.github.io/script.js


https://github.com/yourusername/yourusername.github.io/blob/master/script.js



Use GitHub Pages, DO NOT use raw files.



Reason:
GitHub Pages are based on CDN, raw files are not. Accessing raw files will directly hit on GitHub servers and increase server load.






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Popular posts from this blog

make 2 or more post in bootsrap

Store custom data using WC_Cart add_to_cart() method in Woocommerce 3

Firebase Auth - with Email and Password - Check user already registered