Use Github as a CDN to store and serve static content (JavaScript, CSS, Images) with rawgit

In this article I will be explaining how to use Github's "raw" feature coupled with rawgit to store and serve static content

Please note I assume you have some basic git knowledge

1.- Creating a Github account

Ok so first things first, in order to do this you need a Github account; so if you don't have one head up to the GitHub website and create one ; go ahead I'll wait :)

2.- Creating a Github repository

Login to your Git account and create a new repository :

Provide a name for your repo (for example static_files) :

3.- Build repository structure

We will now create a folder structure for our repository in order for us to organise the files, for example :

• css
• js
• img

So now go ahead and clone your git repository from either the command line or with your favorite tool

git clone

1	git clone https://github.com/xxxx/static_files.git

Once the repository is cloned; go ahead and create the 3 folders mentioned above

create folders

1 2 3 4

cd static_files mkdir css mkdir js mkdir img

Ok so Git does not allow you to commit empty folders, so now in order to commit our folder structure we have to add at least 1 file to each one of the folders; at this point either :

• copy your existing files to their respective folder based on their type (images, javascript, etc.)
• create your content files in the respective folders (i.e. custom javascript, css etc.)
• create placeholder files in each of the folders (for example: touch js/.gitkeep ; touch css/.gitkeep; touch img/.gitkeep)

git initial commit

1 2 3

git add * git commit -a -m "initial commit" git push

4.- Obtain files URLs and serve them

Go back to your GitHub account and open the repository then navigate to a file you want to serve, then click on the "raw" button:

After clicking on the raw button you should be redirected to a "raw" page

Copy the url in the browser (it should start with raw.githubusercontent.com) and head up to http://rawgit.com paste the url in the main input

Below you get 2 CDN urls that you can use either for production or development

5.- Include the files in your website

Repeat step 4 with all the files you want to serve and include them in your website

cdn include

1	<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/ufasoli/staticfiles/master/css/blog/theme.css"">

Finally please also note that as stated in their website that rawgit : is a free service, so there are no uptime or support guarantees.