How to access your GitHub project files from CDN (jsdelivr) automatically

Are you using GitHub for hosting your projects?

Do you also copy or clone the repository to another service so as the files can be served by CDN (for example css or js files)?

Would your world be better if you wouldn’t have to do that and you could just link to your files from GitHub directly?

Well, you can!


Hi guys 👋 !

Today I found out about really great integration between GitHub and JSDelivr.

What those two have in common is that by changing the hostname in a github link, for example:

https://raw.githubusercontent.com/hanakivan/mce-css-style/master/01-vars.css

to a hostname of the CDN service JSDelivr:

https://cdn.jsdelivr.net/gh/hanakivan/mce-css-style/01-vars.css

…your files are available from the CDN just like so 😊.

How does it work

The process of accessing your GitHub files from JSDelivr CDN is as follows:

  1. Find a raw version of your file on GitHub, for example: http://raw.githubusercontent.com/hanakivan/mce-css-style/master/01-vars.css
  2. Replace http://raw.githubusercontent.com/ for https://cdn.jsdelivr.net/gh/ (don’t forget the suffix /gh/!)
  3. Remove “master” from the link, because JSDelivr recignizes that automatically

What about browser caching?

That’s very good question.

Provided that you’d include a link like this one on your website:

https://cdn.jsdelivr.net/gh/hanakivan/mce-css-style/01-vars.css

…it would get cached and when you update the file on GitHub, it would not get updated.

That’s where git tags come into play.

So when you tag a commit and push it, you can easily modify the JSDelivr link to load your file from exact tag, for example:

https://cdn.jsdelivr.net/gh/hanakivan/mce-css-style@1.0.0/01-vars.css

Just notice that @1.0.0 after the repository name.

Final thoughts

What do you guys think about this? 🤔 Have you known about this GitHub feature? 🤔 Or have you already used it?

Of course, this approach will definitely NOT work on larger projects where there needs to be a system in place as far as the source files are concerned, but for personal projects I think this is a very good choice!

Let me know in the comments, what do you guys think! 🤘

Until next time, 🤓

Yours in coding,

Ivan

Credits for emoji in the featured image: pinterest.com/pin/478929741602641099/