There are 2 ways to include JS and CSS files in our project. By the first way we are storing this js/css files in our project and second way we are including online CDN (content delivery network) files to our project so it helps to improve our project speed. But there are so many online CDN network plaforms available which are not free. We can use their existing JS/CSS files but to upload our own files is not possible because of their premium service.
So now we have one more option to host our own JS/CSS files on Google Drive. This is an open source platform for us to host unlimited files. You can follow below steps to host your file.
1. Once you login to your google drive account, you can see New button on top left corner. Just click on it and Create or Upload your JS or CSS files.
2. After your file uploaded or created, right click on the file and click on Share option.
3. This option will create one shareable link, but its restricted. So we have to make it public by clicking on Change to anyone with the link and click on done.
It will convert shareable link into public access.
4. Copy your file ID from generated shareable link you can find it in text-area.
For example this is my file id from above link : 1fblXqmO5IagNKigHkAB33N_WyOxyuo99
5. Now the final step, we have to add this file id in below provided link :
https://drive.google.com/uc?export=view&id=YOUR-FILE-ID
In my case, our CDN URL will be like this :
https://drive.google.com/uc?export=view&id=1fblXqmO5IagNKigHkAB33N_WyOxyuo99
Now we just have to add this URL to our html link and script tags Just like below :
<!--Include CSS-->
<link href="https://drive.google.com/uc?export=view&id=1fblXqmO5IagNKigHkAB33N_WyOxyuo99" rel="stylesheet">
<!--Include JS-->
<script src="https://drive.google.com/uc?export=view&id=1fblXqmO5IagNKigHkAB33N_WyOxyuo99"></script>This is how we can host our own custom JS and CSS files on google drive to work like CDN and this will also help to improve our website speed.
