How to serve an asset through jsdelivr CDN from Github.

How to serve an asset through jsdelivr CDN from Github.

Written by Karthikeyan on Nov 26th, 2021 ・ Views ・ Report Post

Karthikeyan Visit User Profile

Hello Everyone, In this post we are going to see how we can serve ui assets from github via CDN.

TLDR; CDN (content delivery network) is basically a network of servers and data centers that provides the fast delivery of content.

Today , I was learning about koa which is a node js framework. Suddenly a thought , what if I could create boilerplate code which I can use it for my future side project. I was able to scaffold a basic bolierplate using Koa and typescript.

Here is the link to the github repo if you are interested. It is still work in progress.

skarthikeyan96/node-koa-starter

Real problem began, I wanted add a banner to my readme. I designed a simple banner , but I knew one thing , I did not want to use dropbox or imgur.

Googling started , and finally my quest ended with jsDelivr . It was solving the problem which I faced.

Here are the steps , how you can also serve your files using jsDelivr

Setup your repository

https://miro.medium.com/max/700/0*oUFSu8DCC2KlHrbq.png

🤩 Our Amazing Sponsors 👇
DigitalOcean View Website
DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.
Laravel News View Website
Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.
Genesis View Website
A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components.

Add the banner file to your repository:

https://miro.medium.com/max/700/0*VC8e1wDAL7xJh_jn.png

Follow the syntax from jsDelivr to serve the asset via CDN

// load any GitHub release, commit, or branch
// note: we recommend using npm for projects that support ithttps://cdn.jsdelivr.net/gh/user/repo@version/file

Below is the example syntax

![banner](https://cdn.jsdelivr.net/gh/skarthikeyan96/node-koa-starter/banner.png)

Now add the asset url to the readme file and push the changes to github readme.

🎉🎉🎉 Problem solved

https://miro.medium.com/max/700/0*rCf_CCHUY5f1VPaG.png

Thanks for read. I hope it will be helpful for everyone. Please let me know in the comments if I have missed something.

Resources

jsDelivr — A free, fast, and reliable CDN for Open Source

Comments (0)