Today we will learn how to use CDN to serve CSS and JavaScript files. We are going to use JsDeliver as it is a free CDN for the open-source project and easy to use.
|
| How to Use CDN |
JsDeliver supports nmp, ESM, GitHUb and WordPress. But they do recommend using npm for projects that support it. In this tutorial, we are going to learn how to use GitHub with JsDeliver.
JsDeliver's basic URL structure looks like below.
https://cdn.jsdelivr.net/gh/user/repo@version/file
Here is how we can use JsDeliver to serve out CSS/JavaScript files.
Get the Raw File URL:
- Navigate to your CSS file in the GitHub repository.
- Click on the Raw button to view the raw version of the file.
-
Copy the URL from the address bar of your browser. It should look something
like
https://raw.githubusercontent.com/username/repository/main/styles.pure.css.
Construct the CDN URL:
Replace github_username, repository_name, and
file_path with your GitHub details and file path:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/github_username/repository_name/file_path">
For example:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yourgithubusername/yourrepositoryname/styles.pure.css">
Comments
Post a Comment