logo
menu

Github CDN 무료 사용법 (feat.CSS)

2022. 06. 22.

  • #클라우드

개발을 공부할 때 간단한 기능들을 구현하면서 학습하는 방법을 선호한다. 예를 들어 리덕스를 학습할 때 기본 개념 및 간단한 실습을 하고 자력으로 카운터 또는 TODO-LIST 웹 서비스를 구현하면서 해당 기술을 습득한다.
이 과정마다 스타일 관련 코드를 작성하는 것이 귀찮기도 하고 구현할 때 마다 약간씩 달라져서 불편한 점이 있었다.
그래서 스타일 관련 기능들을 한 번 딱 정의해서 앞으로 관련 기능들을 구현할 때 적용하고자, 공통 스타일(style.css) 을 정의해서 사용하고자 한다.
이때 간단한 CSS 파일을 사용하려고 CDN 서버를 사용하는 것을 불 필요하다고 생각하여 이것 저것 찾아보니 무료로 CDN 기능을 사용하는 방법이 있어 적용한 것을 공유하고자 한다.
 

무료 CDN 사용하기

  1. jsdeliver CDN 서버스 이용
  1. raw githack 서비스 이용
두 가지 모두 github 에 올린 파일을 이용하여 CDN 기능을 사용할 수 있게 해주는 서비스이다.
 
자세한 설명을 하기 전에 사용할 CSS 파일을 해당 github 에서 확인할 수 있다.
  • 사용자명: kimseunggyu
  • 레포지토리명: github-cdn-repo
  • 파일경로 style.css
 

1. jsdelivr CDN 사용 방법

jsdelivr CDN 사용하는 방법은 매우 간단하다.
주어진 형식에 맞춰서 해당 정보를 대체하면 CDN 서비스를 이용할 수 있다.
하지만, 기본적으로 12시간 동안 캐시되므로 변경 사항이 바로 적용되지 않음에 주의 해야 한다.
형식
https://cdn.jsdelivr.net/gh/[사용자명]/[레포지토리명]/[파일경로]
실제 사용
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/kimseunggyu/github-cdn-repo/style.css"
/>

2. raw githack 을 이용하여 CDN 사용하기

해당 사이트 https://raw.githack.com/ 에 접속해서 CDN 에 올리고자 하는 파일의 URL 을 입력하면 CDN 주소로 변한다.
notion image
실제 사용
<link
  rel="stylesheet"
  href="https://raw.githack.com/KIMSEUNGGYU/github-cdn-repo/main/style.css"
/>
github 에 올라가 있는 파일의 주소를 입력하고 변환된 URL 주소를 이용하여 CDN 서비스를 이용하여 사용할 수 있다.
 
저자의 경우에는 Use this URL for development 모드를 연습용으로 사용하고 이후에 잘 정의가 되면 Use this URL in production 이나 jsdelivr CDN 을 사용하고자 한다.
 

reference