Embed script với Github và jsDelivr

altalt

Hey, welcome back

Hôm nay mình sẽ chia sẻ 1 với các bạn 1 cách đơn giản để embed script vào trang với GithubjsDelivr

Problem

Muốn thêm 1 tính năng vào trang mà không cần phải động vào đống script sẵn có của trang vì quá phức tạp để config, cần thay đổi và remove 1 cách dễ dàng vì tính năng này chỉ cần trong 1 khoảng thời gian nhất định.

Nếu bạn cũng có nhu cầu như trên, thì đây là 1 cách đơn giản mà mình nghĩ bạn nên làm.

Solution

  • Host script của bạn trên Github (có thể bao gồm cả style)

Chỉ cần tạo 1 public repository trên Github, push script và style của bạn lên đó. (Nhớ để public thì mới có thể embed được nhé)

  • Sử dụng jsDelivr làm CDN cho script của bạn

Giới thiệu qua: jsDelivr là 1 tool đơn giản dùng làm CDN cho bất kì 1 npm package, Github repo hay WordPress plugin nào của bạn

Cách sử dụng có ngay ở trên homepage của jsDelivr, mình note lại cách sử dụng với Github repo như sau:

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

Đây là cấu trúc của 1 script/style URL host qua jsDelivr cho bất kì 1 file nào trên Github:

  • {user}: username của bạn hoặc Organization trên Github
  • {repo}: tên repository
  • {directory}: tên folder, cái này optional vì file của bạn có thể để ở ngoài cùng của repo luôn
  • {file}: filename, *.js hoặc *.css

Ví dụ:

Đây là 1 public repo của mình: Minimog badges Mình host 2 file trên này, 1 file Javascript và 1 file CSS

minimog-badges-repominimog-badges-repo

Như vậy URL host qua jsDelivr cho 2 file này sẽ là:

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

và:

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

Bây giờ chỉ cần embed vào page của bạn với thẻ link:

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

và thẻ script:

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

Là đã có 2 file host trên Github chạy trong page của bạn rồi

Tips

  • Caching

Nếu các bạn để ý thì sẽ nhận ra mình đánh version ở trên filename main-v3.jsstyle-v1.css. Tại sao cần thêm version này?

Câu trả lời chính là vì jsDelivr có cache resource của bạn, điều này tốt để resource load nhanh hơn, nhưng khi bạn thay đổi thì cache sẽ không được clear ngay lập tức, kết quả là vẫn load code cũ

Để purge cache thì cần phải mail cho jsDelivr, khá bất tiện. Nên cách đơn giản mình nghĩ ra là đánh version ngay trên filename. Khi bạn thay đổi thì hãy tạo file mới với tên chứa version mới. Vd: main-v4.js hoặc style-v2.css, và sửa link embed là sẽ có code mới luôn, không cần đợi clear cache nữa.

  • Minify

Nếu code của bạn không minify, chỉ cần thêm .min vào URL của file, jsDelivr sẽ generate 1 version được minify cho file gốc của bạn

Ví dụ:

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

Kết bài

Hi vọng tutorial nhỏ này có thể giúp ích cho bạn!

Happy sharing