How to turn any GitHub repo into a CDN Using jsDeliver

How to turn any GitHub repo into a CDN

Last week I discovered jsDeliver, a service that let’s you turn any GitHub repository into a CDN.

Example :- https://cdn.jsdelivr.net/gh/SH20RAJ/BlondBtun@latest/blondbtun.css

Recommendation :- Always Use @latest in URL to get the latest version and file.

(Hat tip to Sarah Dayan, aka Frontstuff, for this one.)

Here’s how it works.

The base URL is https://cdn.jsdelivr.net/gh/{username}/{repo}/, where you replace {username} with the GitHub username and {repo} with the repository name for the project.
Append that URL with the path to the file you want to access in the project. For example, for my Atomic XHR plugin, the JavaScript file is located in the /dist directory. You’d use this. html <script src="https://cdn.jsdelivr.net/gh/cferdinandi/atomic/dist/atomic.js"></script>

You can also take advantage of semantic versioning by adding @{version-number} to the repository name. You can target major, minor, and patch releases as desired.

<!-- Always get the latest version -->
<!-- Not recommended for production sites! -->
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/atomic/dist/atomic.js"></script>

<!-- Get minor updates and patch fixes within a major version -->
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/atomic@4/dist/atomic.js"></script>

<!-- Get patch fixes within a minor version -->
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/atomic@4.0/dist/atomic.js"></script>

<!-- Get a specific version -->
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/atomic@4.0.0/dist/atomic.js"></script>

I’ve already added instructions on this to Atomic, Validate, and Smooth Scroll, and will be updating the docs for my other plugins as well.

But where this really shines is for use with other peoples’ OSS projects when a CDN isn’t provided but you need a quick and easy way to load the code into your site.

jsDelivr also supports NPM and WordPress.

// 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