GitHub Pages 트래픽 절감

게으른냥이템플릿개발 2025. 3. 15.

자바스크립트, CSS, 이미지 등 리소스 파일은 CDN (콘텐츠 전송 네트워크)에 넣어두고, 텍스트 기반의 HTML 웹페이지만 GitHub Pages에서 서비스하려는 계획이군요. 이 방법은 여러 가지 장점을 제공하며, 효율적인 웹사이트 운영 전략이 될 수 있습니다.

장점:

GitHub Pages 트래픽 절감: GitHub Pages는 트래픽 제한이 있을 수 있습니다. 자바스크립트, CSS, 이미지 등 용량이 큰 파일들을 CDN에 넣어두면 GitHub Pages의 트래픽을 절감할 수 있습니다.
웹사이트 로딩 속도 향상: CDN은 전 세계 여러 곳에 서버를 분산시켜 놓기 때문에, 사용자에게 가장 가까운 서버에서 콘텐츠를 전송하여 웹사이트 로딩 속도를 향상시킬 수 있습니다.
CDN 캐싱 활용: CDN은 캐싱 기능을 제공하므로, 정적인 리소스 파일들을 캐싱하여 웹사이트 성능을 향상시킬 수 있습니다.
GitHub Pages 용량 절감: GitHub Pages 저장소의 용량 제한을 피할 수 있습니다. 이미지 등의 대용량 파일들을 CDN에 보관하면 GitHub Pages 저장소의 용량을 절감할 수 있습니다.
유지보수 용이성: CDN에 저장된 리소스 파일들을 변경하면, 모든 웹페이지에 자동으로 적용되므로 유지보수가 용이합니다.

구현 방법:

CDN 선택: Cloudflare, Amazon CloudFront, Fastly 등 다양한 CDN 서비스 중에서 하나를 선택합니다. 각 CDN 서비스는 요금, 기능, 성능 등이 다르므로, 자신의 웹사이트에 맞는 CDN 서비스를 선택해야 합니다.
CDN 설정: CDN 서비스에 가입하고, 웹사이트의 도메인을 등록하고, CDN 설정을 완료합니다. CDN 설정 방법은 CDN 서비스마다 다르므로, 해당 CDN 서비스의 설명서를 참조해야 합니다.
리소스 파일 업로드: 자바스크립트, CSS, 이미지 등 리소스 파일들을 CDN에 업로드합니다. CDN은 파일 업로드 방법을 제공하며, 업로드된 파일의 URL을 생성합니다.
HTML 웹페이지 수정: GitHub Pages에 있는 HTML 웹페이지에서 자바스크립트, CSS, 이미지 파일의 URL을 CDN에서 제공하는 URL로 변경합니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My Website</title>
  <!-- CDN에서 CSS 파일 로드 -->
  <link rel="stylesheet" href="https://mycdn.example.com/style.css">
</head>
<body>
  <h1>Hello, world!</h1>
  <!-- CDN에서 이미지 파일 로드 -->
  <img src="https://mycdn.example.com/image.jpg" alt="My Image">
  <!-- CDN에서 JavaScript 파일 로드 -->
  <script src="https://mycdn.example.com/script.js"></script>
</body>
</html>

Use code with caution.Html

GitHub Pages 배포: 수정된 HTML 웹페이지를 GitHub Pages에 배포합니다.

팁:

CDN 캐싱 설정: CDN 캐싱 설정을 적절하게 조절하여 웹사이트 성능을 최적화할 수 있습니다.
SSL/TLS 인증서: CDN에서 SSL/TLS 인증서를 발급받아 웹사이트의 보안성을 높일 수 있습니다.
버전 관리: CDN에 저장된 리소스 파일들을 업데이트할 때, 캐싱 문제

'자바스크립트' 카테고리의 다른 글

Git이 현재 디렉터리를 저장소로 인식하는지 확인 (0)	2025.03.18
[티스토리 블로그 스킨 제작 가이드 강의 12] 카테고리 (0)	2025.03.16
테스트 글 (0)	2025.03.14
ㅅㄷㄴㅅ (0)	2025.03.13
확장 프로그램 개발 시 사용 가능한 기본 권한 목록과 각 권한 (0)	2025.03.13

GitHub Pages 트래픽 절감

'자바스크립트' 카테고리의 다른 글

티스토리툴바