How to host your repository JS/CSS on Open Source CDN “jsDelivr”

Published in

Javarevisited

2 min readOct 6, 2020

A couple of years back i was searching for an completely free & opensource cdn service but i couldn’t find any at that point of time & I ended up using Netlify (Another alternative was Hostry).

But then this idea struck “what if there was a cdn service which could use Github as CDN”. Most developers use Github as their code repository, keeping all their UI assets like fonts , js , css , images etc. Fast forward today, my quest ended on CDN delivery service called as jsDelivr.

jsDelivr open source cdn over github assets

jsDelivr CDN over GitHub Assets

jsDelivr does exactly what many of us need, provides a opensource cdn over github assets. Let look into it in detail.

Here’s how it works.

jsDelivr CDN service’s 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, consider my sample project Github-As-CDN , the JavaScript file(dummy-js-file.js) is located in the /dist directory.

<html>
...
...
<script src="https://cdn.jsdelivr.net/gh/root0109/github-cdn/dist/dummy-js-file.js"></script>
...
...
</html>

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.

Load the latest version

<script src="https://cdn.jsdelivr.net/gh/root0109/github-cdn/dist/dummy-js-file.js"></script>

Load with Major Version only

<script src="https://cdn.jsdelivr.net/gh/root0109/github-cdn@2/dist/dummy-js-file.js"></script>

Load with Major.Minor Version

<script src="https://cdn.jsdelivr.net/gh/root0109/github-cdn@2.1/dist/dummy-js-file.js"></script>

Load Exact version

<script src="https://cdn.jsdelivr.net/gh/root0109/github-cdn@1.0.0/dist/dummy-js-file.js"></script>

Load minified version

Add “.min” to any JS/CSS file to get a minified version — if one doesn’t exist, it will be automatically generated for you.

Questions ? Suggestions ? Comments ?

What’s next? Follow me on Medium to be the first to read my stories.