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

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

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.

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.

Image for post

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.

  1. 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.
  2. 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.

ui open-source cdn github javascript-tips

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

An Open-Source Book About the Open Source World

Open source today is a word that often include a lot of things, such as open knowledge (Wikimedia projects), open hardware (Arduino, Raspberry Pi), open formats (ODT/ODS/ODP) and so on.

GitHub Arctic Code Vault: Overview

Are you an Arctic Code Vault Contributor or have seen someone posting about it and don't know what it is. So let's take a look at what is an Arctic Code Vault Contributor and who are the ones who gets this batch.

Did Google Open Sourcing Kubernetes Backfired?

With Google not owning the trademarks or control for Kubernetes, it also provided a competitive edge to AWS, Microsoft, IBM etc.

16 Open Source Projects With Source Code

Here's 16 open source projects with source code. I have video tutorial for all of these on my youtube channel. Download projects from this link: https://www....

My First Open Source Contribution

How I got involved in open source, and how you can too. My First Open Source Contribution. Open source is a great way to get real-world software development experience from the comfort of your home. The open-source community is very helpful and encourages new developers to take part in their organizations. You gain exposure, test your skills, gain knowledge, and bond with the community to produce quality code that helps people around the world. You write code that benefits the user community.