{"id":1294,"date":"2023-07-09T00:13:28","date_gmt":"2023-07-08T17:13:28","guid":{"rendered":"https:\/\/dev.artru.eu.org\/?p=1294"},"modified":"2023-10-27T14:37:57","modified_gmt":"2023-10-27T07:37:57","slug":"su-dung-github-lam-cdn-cho-website","status":"publish","type":"post","link":"https:\/\/artru.net\/en\/su-dung-github-lam-cdn-cho-website\/","title":{"rendered":"Use GitHub as a CDN for your website"},"content":{"rendered":"

What is CDN?<\/h2>\n\n\n\n

CDN (Content Delivery Network) is a content delivery network that helps speed up website loading by storing static files such as images, CSS, JavaScript, fonts, videos... on servers. near the user's location.<\/p>\n\n\n\n

By using a CDN, you can minimize user wait times, reduce load on the origin server, save bandwidth, and improve user experience.<\/p>\n\n\n\n

However, not everyone has the ability to use professional CDN services, especially those who are just starting out or on a tight budget.<\/p>\n\n\n\n

So is there any way to use a free and simple CDN for your website? The answer is "yes", that is to use GitHub as a CDN for the website.<\/p>\n\n\n\n

GitHub is a popular Git source code hosting service that allows you to create and manage public or private repositories for software projects. You can use GitHub to host your website's static files and use other free CDN services to deliver content from GitHub to your website.<\/p>\n\n\n\n

In this article, I will introduce you to 2 free CDN services from GitHub that you can use for your website, namely jsDelivr and raw.githack.<\/p>\n\n\n\n

jsDelivr<\/h2>\n\n\n\n

jsDelivr is a free, fast and stable open source CDN service that supports CDN for open source software on npm and GitHub.<\/p>\n\n\n\n

jsDelivr is backed by the big 4 CDNs: Cloudflare, Fastly, Bunny and Quantil, has more than 750 global access points, supports automatic load balancing, is faster than most other CDNs and works flawlessly. even in China.<\/p>\n\n\n\n

To use jsDelivr, you need to copy the link of the file on GitHub which looks like this:<\/p>\n\n\n\n

https://github.com\/twbs\/bootstrap\/blob\/v4-dev\/dist\/css\/bootstrap.min.css<\/code><\/pre>\n\n\n\n
Then, go to the jsDelivr homepage \u2192 the \u201cTools\u201d tool in the header \u2192 select convert from \u201cGitHub\u201d or from whatever source you have.<\/p>\n\n\n
\n
\"Migrating
Migrating from GitHub to jsDelivr<\/figcaption><\/figure>\n<\/div>\n\n\n
Paste the file url from GitHub that you obtained above in the input box and it will convert to the jsDelivr url.<\/p>\n\n\n\n
https://cdn.jsdelivr.net\/gh\/twbs\/bootstrap@v4-dev\/dist\/css\/bootstrap.min.css<\/code><\/pre>\n\n\n\n
You can use this CDN link in the tag <link><\/code> or <script><\/code> on the website to load content from jsDelivr. You can use other features of jsDelivr like minification, concatenation, version aliasing, SRI hashing... to optimize the content.<\/p>\n\n\n\n
See more documentation of jsDelivr here: jsdelivr-features<\/a>.<\/p>\n\n\n\n
raw.githack<\/h2>\n\n\n\n
raw.githack is also a free CDN service that allows you to distribute files directly from public repositories on GitHub and GitLab. raw.githack uses the Cloudflare network to ensure high performance and reliability of your content.<\/p>\n\n\n\n
To use raw.githack you need a link of the GitHub file for example:<\/p>\n\n\n\n
https://github.com\/jquery\/jquery\/blob\/main\/src\/core.js<\/code><\/pre>\n\n\n\n
You just need to visit the website of raw.githack<\/a> and paste the GitHub link in the input box to get the CDN link from raw.githack.<\/p>\n\n\n\n
We will get 2 results.<\/p>\n\n\n
\n
\"Convert
Convert GitHub to raw.githack<\/figcaption><\/figure>\n<\/div>\n\n\n
1. Use for main website.<\/strong><\/p>\n\n\n\n
    \n
  • There is no traffic limit. Files are served via CloudFlare's CDN.<\/li>\n\n\n\n
  • Files can be compressed automatically to .min files if you add ?min=1<\/code> at the end of the query parameter.<\/li>\n<\/ul>\n\n\n\n
    https://rawcdn.githack.com\/jquery\/jquery\/4a13266efd262a92f05d86b71d715885de103e6d\/src\/core.js<\/code><\/pre>\n\n\n\n
    2. Use in development environment<\/strong><\/p>\n\n\n\n
    https://raw.githack.com\/jquery\/jquery\/main\/src\/core.js<\/code><\/pre>\n\n\n\n
    New changes you push will be reflected within minutes.<\/p>\n\n\n\n
    Conclude<\/h2>\n\n\n\n
    By using these services, you can simply and effectively leverage GitHub as a CDN for your website.<\/p>\n\n\n\n
    However, you should also note that these free CDN services do not guarantee the stability and safety of your content, so you should think carefully before using them for important or commercial websites. .<\/p>\n\n\n\n
    If you have any questions about how to use GitHub as a CDN for your website, please leave a comment below. Good luck! \ud83d\ude0a<\/p>","protected":false},"excerpt":{"rendered":"
    CDN l\u00e0 g\u00ec? CDN (Content Delivery Network) l\u00e0 m\u1ed9t m\u1ea1ng l\u01b0\u1edbi ph\u00e2n ph\u1ed1i n\u1ed9i dung, gi\u00fap t\u0103ng t\u1ed1c \u0111\u1ed9 t\u1ea3i trang web b\u1eb1ng c\u00e1ch l\u01b0u tr\u1eef c\u00e1c t\u1ec7p tin t\u0129nh (static files) nh\u01b0 h\u00ecnh \u1ea3nh, CSS, JavaScript, font, video\u2026 tr\u00ean c\u00e1c m\u00e1y ch\u1ee7 g\u1ea7n v\u1ecb tr\u00ed c\u1ee7a ng\u01b0\u1eddi d\u00f9ng. B\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng CDN, b\u1ea1n […]<\/p>\n","protected":false},"author":1,"featured_media":1338,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-1294","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website"],"_links":{"self":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts\/1294","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/comments?post=1294"}],"version-history":[{"count":0,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts\/1294\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/media\/1338"}],"wp:attachment":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/media?parent=1294"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/categories?post=1294"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/tags?post=1294"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}