Hosting Your Scripts from GitHub to jsDelivr: A Step-by-Step Guide - Coding

Optimizing the performance and reliability of your applications is very important. One effective way to achieve this is by using a Content Delivery Network (CDN) to host and serve your scripts. jsDelivr, a free and powerful CDN, offers a seamless way to host your scripts directly from your GitHub repository.

In this article, we will guide you through the process of using jsDelivr to host your scripts, ensuring faster load times and greater global availability. Let’s get started.

What is jsDelivr?

jsDelivr is a free, open-source CDN that allows you to host and serve your scripts directly from repositories on GitHub, npm, and the theme and plugin directories for WordPress. It ensures fast load time by serving your files from a global network of servers, providing high availability and performance.

Steps To Host Scripts To jsDelivr

Step 1: Creating a Repository on GitHub and Adding a JavaScript File

Create a GitHub Repository:
- Login to your GitHub account and create a repo as usual (preferred to keep the repo public) .
- You can check a step by step guide here.
Add a JavaScript Script:
- Create a .js file and upload it to the repo.
- For now we will create a simple js file that will print “Hello World” on the console.
- We are creating a function and writing all the code inside it to avoid ant conflicts with global variables. Also we are immediately calling it as well.

JavaScript

(function() {
function printHelloWorld()
{
    console.log("Hello world from script hosted on
        github repo and deliverd through jsDelivr");
}
})();

Hosted script from github.

Step 2: Creating a CDN Link for the Script

Go to jsDelivr and create the user defined format to create the CDN link to your js flie.
For example, if your username is ‘username’, the repository name is ‘my-repo‘ and the script is in the root directory, the URl will be: https://cdn.jsdelivr.net/gh/username/my-repo@main/script.js
Replace username and my-repo with your actual GitHub username and repository name.

Step 3: Importing the js file inside HTML file

Open your HTML file.
Add the following script tag in the <head> or <body> section:

<script src=”https://cdn.jsdelivr.net/gh/username/my-repo@main/script.js” async=’true’ crossorigin=’anonymous’></script>

Here we are using crossorigin=’anonymous’ to ensure that the script is fetched without credentials (such as cookies, client-side SSL certificates, or HTTP authentication). For more details refer to this article.
Also we used asyns=’true’ to make it load parallel with other resources (like CSS and images).

Importing the script using script tag under head section

Version Control Best Practices

The jsDelivr used to cache the files on their server. So, in case you update your files, it might take up to 7 days to reflect on your HTML page. For checking the changes immediately onto your website, you can use versioning in your file. Tag each update with a different version in your github. And then you can call different versions of your files just by modifying the CDN link a little bit.

Include Version Numbers: Add version number to your filenames or commit messages (e.g. ‘script-v1.0.0.js’).
Update the CDN link: Modify the jsDelivr link to reference the new version. For example, change from’ https://cdn.jsdelivr.net/gh/username/repo/script.js‘ to ‘https://cdn.jsdelivr.net/gh/username/repo/[email protected]‘.
Maintain Backward Compatibility: Ensure that older version remain accessible if needed, but update link to your projects to use the latest version.

Reffered: https://www.geeksforgeeks.org

Web Technologies

Related
How To Use an API? The Complete Guide
Custom Transporters in NestJS
How to Perform Image Classification with ml5.js?
How to Use Moment.js with Vuejs?
Build a News Aggregator Using Next.js

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	28