#tutorial#sharing#embed#github#jsdelivr

Embedding scripts in web pages made easy with Github and jsDelivr

Published on
•
3 mins read
•
––– views
thumbnail-image
Photo by AbsolutVision on Unsplash

Hey, welcome back

Today I will share with you a simple way to embed a script into a webpage using Github and jsDelivr

Problem

You want to add a feature to a webpage without having to modify the existing scripts on the page because it's too complicated to configure, change, and remove. You only need this feature for a certain period of time.

If you have the same need, then here is a simple solution that I think you should do.

Solution

  • Host your script on Github (which can also include style).

Simply create a public repository on Github, push your script and style there. (Remember to make it public so that it can be embedded.)

jsDelivr is a simple tool used as a CDN for any npm package, Github repo or WordPress plugin.

The usage instructions are available on the homepage of jsDelivr. Here's how to use it with a Github repo:

https://cdn.jsdelivr.net/gh/{user}/{repo}/{directory}/{file}

This is the structure of a script/style URL hosted through jsDelivr for any file on Github:

  • {user}: your username or organization on Github
  • {repo}: repository name
  • {directory}: folder name (optional) because your file can be placed in the root directory of the repo
  • {file}: filename, *.js or *.css

For example:

This is one of my public repos: Minimog badges. I hosted 2 files on it, 1 Javascript file and 1 CSS file.

minimog-badges-repo

So the URL hosted through jsDelivr for these 2 files will be:

https://cdn.jsdelivr.net/gh/Insights-Labs/minimog-menu-badges/style-v1.css

and:

https://cdn.jsdelivr.net/gh/Insights-Labs/minimog-badges/main-v3.js

Now simply embed them into your page with the link tag:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Insights-Labs/minimog-menu-badges/style-v1.css">

and the script tag:

<script src="https://cdn.jsdelivr.net/gh/Insights-Labs/minimog-badges/main-v3.js" async></script>

Now the 2 files hosted on Github are running on your page.

Tips

  • Caching

If you notice, I put the version number in the filename main-v3.js and style-v1.css. Why do you need to add this version number?

The answer is because jsDelivr caches your resource. This is good for faster resource loading, but when you make changes, the cache is not cleared immediately, resulting in the old code still being loaded.

To purge the cache, you need to email jsDelivr, which is quite inconvenient. So my simple solution is to put the version number right in the filename. When you make changes, create a new file with a name containing the new version number. For example: main-v4.js or style-v2.css, and modify the embed link, and you will have the new code immediately without waiting for the cache to clear.

  • Minify

If your code is not minified, simply add .min to the URL of the file, and jsDelivr will generate a minified version for your original file.

For example:

<script src="https://cdn.jsdelivr.net/gh/Insights-Labs/minimog-badges/main-v3.min.js" async></script>

Conclusion

I hope this tutorial can be helpful to you!

Happy sharing