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

Question

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: http://stackoverflow.com/questions/17341122/how-to-link-and-execute-external-javascript-file-from-github — AuthorProxy, Sep 23 '13 at 18:23
Possible duplicate of [Link and execute external JavaScript file hosted on GitHub](http://stackoverflow.com/questions/17341122/link-and-execute-external-javascript-file-hosted-on-github) — Troy Alford, Feb 11 '17 at 06:15

score 78 · Answer 1 · edited Apr 19 '18 at 19:40

78

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

Benefits:

Lets you link to specific commits, as well as auto-get the latest (aka master)
Incurs no damage from high traffic volumes; RawGit asks that it's dev.rawgit.com links be only used during development, where as GitCDN give you access to the latest version, without the danger of the servers exploding
Give you the option of auto minifying your HTML, CSS and JavaScript, or serving it as written (https://min.gitcdn.link).
Adds compression (GZip)
Adds all the correct headers (Content-Type, cache-control, e-tag, etc)

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

edited Apr 19 '18 at 19:40

Michael Kühnel

139
2
10

answered Jun 26 '15 at 06:40

Shane Gadsby

1,220
1
11
19

2

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 05 '17 at 08:03
2

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

@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 '18 at 18:54
If looking for LAST COMMIT CDN deployer, this is the best option. – colxi May 04 '18 at 00:16
9

I'm getting an Internal Server Error when I try this. – tresf Oct 31 '19 at 21:30
@ShaneGadsby does it still work? nothing happens when I paste a raw link into the input on the page. – mindplay.dk Apr 02 '22 at 16:14

score 39 · Answer 2 · edited Mar 12 '19 at 08:50

39

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.

However, according to the rawgithub website it will be shutting down at the end of October 2019.

edited Mar 12 '19 at 08:50

Raymond

356
4
19

answered Sep 23 '13 at 18:25

AuthorProxy

7,725
3
25
35

9

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

I believe that rawgithub.coma nd rawgit.com are the same service, that has been renamed :) – Shane Gadsby Jun 26 '15 at 05:23
It appears that rawgit has issues with Chrome? https://snag.gy/VknHNQ.jpg – danielh Jul 18 '18 at 21:50
24

As of October 8, 2018, RawGit (aka rawgithub) is in a sunset phase. Look elsewhere. – Poulsbo Oct 21 '18 at 18:07

score 15 · Answer 3 · edited Mar 02 '16 at 17:11

15

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.

edited Mar 02 '16 at 17:11

Brad Koch

17,848
18
106
133

answered Jan 15 '13 at 00:16

Benjamin Intal

2,534
1
23
25

2

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

score 13 · Answer 4 · edited Mar 13 '19 at 07:33

13

Add a 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.io/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 account is "username").

edited Mar 13 '19 at 07:33

Raymond

356
4
19

answered Mar 18 '13 at 18:05

jekewa

251
3
5

score 13 · Answer 5 · answered Jun 26 '14 at 08:34

13

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.

answered Jun 26 '14 at 08:34

Nitesh

1,205
4
16
25

14

"RawGit has reached the end of its useful life" - October 8, 2018 – showdev Mar 10 '19 at 08:21

Sista Fiolen · Answer 6 · 2018-09-08T11:44:09.527

11

GitHub Pages: https://yourusername.github.io/script.js
GitHub repo raw files: 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.

edited Sep 08 '18 at 11:44

answered May 30 '18 at 07:26

Sista Fiolen

441
6
8

3

“*raw files are not*” Any source for that? – Franklin Yu Jun 22 '19 at 23:30
It's not perfect, but it works like a charm! Thanks! – Patrick José Pereira Mar 27 '20 at 13:25

score 10 · Answer 7 · answered Aug 30 '20 at 12:02

10

For those who ended up in this post and just want to get the raw link from an image in GitHub:

If it is the case of an image, you can just add '?raw=true' at the end of the link to the file. E.g. Original link: https://github.com/githubusername/repo_name/blob/master/20160309_212617-1.png

Raw link: https://github.com/githubusername/repo_name/blob/master/20160309_212617-1.png?raw=true

answered Aug 30 '20 at 12:02

jvel07

820
8
13

There are no Access-Control-Allow-Origin headers though.... so it's not very useful. – Douglas Gaskell Nov 12 '21 at 01:27

score 7 · Answer 8 · edited Jul 11 '20 at 13:22

Use jsdelivr.com

Copied directly from https://www.jsdelivr.com/?docs=gh:

load any GitHub release, commit, or branch
note: we recommend using npm for projects that support it

https://cdn.jsdelivr.net/gh/user/repo@version/file

load jQuery v3.2.1

https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js

use a version range instead of a specific version

https://cdn.jsdelivr.net/gh/jquery/jquery@3.2/dist/jquery.min.js

https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js

omit the version completely to get the latest one

you should NOT use this in production

https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js

add ".min" to any JS/CSS file to get a minified version

if one doesn't exist, we'll generate it for you

https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/src/core.min.js

add / at the end to get a directory listing

https://cdn.jsdelivr.net/gh/jquery/jquery/

score 1 · Answer 9 · answered Jul 10 '14 at 13:26

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.

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".

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

LOL kinda hacky but its the solution I went with LOL... was wanting to use https://cdn.jsdelivr.net/ BUT its not great for development when you're making a bunch of changes because of the CDN caching ... anyway thanks for the quick script! — Banning, Apr 13 '20 at 14:42

score -1 · Answer 10 · answered Aug 17 '18 at 08:04

-1

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.

answered Aug 17 '18 at 08:04

KHAYRI R.R. WOULFE

105
1
5

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

10 Answers10

Linked

Related