Using jsDelivr on your website

Adding images to your website can be done in many ways. You can access locally stored images for your website, or you can use some form of Content Delivery Network (CDN).

When I was deciding on what to use for my website, I was initially unsure since I assumed the standard way was utilizing local files. As I looked into it more, I decided that a CDN was much better than local files. This would come in handy not just for hosting my own images on my site but also for a potential future forum where users share images, a CDN is best. It is also best to use a CDN if data is going to be called several times per day from different clients.

I chose jsDelivr for my website, the one you are currently browsing. It interfaces nicely with GitHub where I can easily store all the images used on this site and some I may use in the future or used in the past that I can access very easily. It is quite simple to use, if you have a repository that is public and on GitHub then you can easily access the image using the following.

<img src="https://cdn.jsdelivr.net/gh/the-jolley-boy/static-files/static/spoderweb.png" class=''>

Side note: I used jsDelivr for the js and css files that allowed me to create the code snippet above, the plugin used was Codesample that comes with TinyMCE.

jsDelivr allows you to gain access to any of your NPM and GitHub files instantly. In the case above the format is /gh/gh-username/repository/folder/../imagename.

Leave a comment:

Comments: