반응형
🌐 GitHub Pages로 정적 웹사이트 배포하기
– 내 프로젝트, 세상 밖으로 공개해봐요!
🎯 들어가며
GitHub에 올려둔 내 프로젝트,
"이걸 웹사이트로 딱! 공개할 수 없을까?"
물론 가능하죠!
바로 GitHub Pages 기능을 쓰면 됩니다.
이 기능은 개발자가 만든 정적 웹페이지(HTML, CSS, JS)를
무료로 인터넷에 배포할 수 있도록 도와주는 GitHub의 꿀기능이에요! 🍯
🧩 1. GitHub Pages란?
- GitHub 저장소의 콘텐츠를 웹사이트처럼 보여주는 기능
- 정적 웹사이트 배포에 특화됨 (HTML/CSS/JS)
- .github.io 도메인으로 제공됨 (예: https://username.github.io/)
📝 정적 페이지란?
- 서버에서 동작하는 코드 없이
- 단순히 보여주는 HTML, CSS, JS 파일로 구성된 사이트
🧱 2. GitHub Pages 설정하기
1. GitHub에서 배포할 저장소 열기
2. 상단 탭에서 Settings 클릭
→ 왼쪽 메뉴에서 Pages 선택
3. Source 섹션에서 배포할 브랜치와 폴더 선택
- Branch: 보통 main
- Folder: /root 또는 /docs 선택
→ Save 클릭!
4. 잠시 기다리면 .github.io 주소 생성됨
→ 설정 상단에서 확인 가능
🌍 3. 실제로 웹페이지 띄워보기
이제 index.html 파일을 프로젝트 루트 또는 docs 폴더에 넣으면 돼요!
예시 index.html:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>나의 첫 GitHub 웹페이지</title>
</head>
<body>
<h1>환영합니다!</h1>
<p>이 웹사이트는 GitHub Pages로 만들어졌어요!</p>
</body>
</html>
→ Push 하면,
👉 https://username.github.io/저장소이름/ 에서 바로 확인 가능!
💡 자주 묻는 질문 (FAQ)
Q. 변경사항이 반영되지 않아요!
- GitHub Pages는 반영까지 시간이 조금 걸릴 수 있어요 (최대 몇 분)
- 브라우저 캐시 삭제 후 새로고침 해보세요
Q. 도메인 이름 바꿀 수 있나요?
- 네! CNAME 파일을 이용하면 사용자 지정 도메인도 연결할 수 있어요
🎉 마무리하며
이제 나만의 웹사이트를 무료로
전 세계에 공개할 수 있어요! 🌍✨
초보자도 쉽게 할 수 있는 GitHub Pages로
포트폴리오, 프로젝트 소개, 기술 블로그까지
다양하게 활용해보세요!
반응형
'Git' 카테고리의 다른 글
| 협업에서 유용한 GitHub 기능들 (0) | 2025.05.10 |
|---|---|
| .gitignore 파일이란? (0) | 2025.05.09 |
| GitHub Desktop으로 Pull Request 보내기와 충돌 해결하기 (0) | 2025.05.02 |
| GitHub Desktop으로 커밋과 푸시, 브랜치 만들기까지 (1) | 2025.04.30 |
| GitHub Desktop으로 저장소 만들기와 복제하기 (0) | 2025.04.28 |