Git

GitHub Pages로 정적 웹사이트 배포하기

jonbeo 2025. 4. 19. 13:26



GitHub 로고 이미지
GitHub 로고 이미지

 

 

 


✅ GitHub Pages로 정적 웹사이트 배포하기

 

– 깃허브 저장소만 있으면 누구나 무료로 나만의 웹사이트 만들 수 있어요!

 

 

✨ 들어가며

 

웹사이트 만들고 싶은데 서버가 없다고요?
도메인, 호스팅? 그런 거 몰라도 괜찮아요!
GitHub Pages를 사용하면, 코드만 올려도
✨ 전 세계 어디서나 접속 가능한 웹사이트를 만들 수 있어요.

오늘은 HTML 한 장만 있어도 바로 배포할 수 있는 방법을
정말 쉽고 부드~럽게 알려드릴게요 😊

 

 

🛠️ 1. GitHub 저장소 만들기 (정적 페이지용)

  1. GitHub 접속 후 로그인
  2. 새 저장소 만들기 (예: my-first-website)
  3. 필수 설정:
    • 저장소 이름이 yourusername.github.io 라면 → 자동으로 도메인 생성
    • 또는 그냥 아무 이름이나 만들고, Pages 설정에서 커스터마이징 가능

New repository 페이지 화면 일부
New repository 페이지 화면 일부

 

 

 

🛠️ 2. HTML 파일 준비하고 업로드

<!-- index.html 예시 -->
<!DOCTYPE html>
<html>
<head>
  <title>나의 첫 웹사이트</title>
</head>
<body>
  <h1>환영합니다!</h1>
  <p>이 페이지는 GitHub Pages로 배포되었습니다 🎉</p>
</body>
</html>

이 파일을 index.html로 저장한 뒤, 저장소에 업로드해 주세요!

 

 

  • GitHub 웹사이트에서 직접 파일 업로드도 가능
  • 또는 로컬에서 push 사용 (git 사용한 경우)

Git Hub 파일생성 화면 일부
Git Hub 파일생성 화면 일부

 

 

 

🛠️ 3. GitHub Pages 설정하기

  1. 저장소 메인 페이지 → Settings 클릭
  2. 좌측 메뉴에서 Pages 선택
  3. Source 항목에서 main 브랜치 선택 + / (root) 지정
  4. Save 버튼 클릭

설정이 완료되면, 상단에 URL이 표시됩니다!
보통은 https://yourusername.github.io/저장소이름/

 

GitHub Pages 화면 일부
GitHub Pages 화면 일부

 

 

 

🖥️ 4. 접속해 보기!

 

1~2분 내로 GitHub이 자동으로 사이트를 생성해 줘요.
방금 나온 URL로 접속해보세요!

와우! 인터넷에 내 사이트가 생겼습니다 😍
정말 코딩 한 줄 없이 전 세계에 공개 완료!

 

 

🧹 5. 나만의 사이트로 꾸미기 (선택)

  • CSS, 이미지, JavaScript 추가 가능
  • Jekyll이라는 템플릿도 사용 가능
  • 커스터마이징해서 블로그도 만들 수 있어요!

GitHub Pages는 정적 사이트용이기 때문에
DB나 서버 로직은 필요 없는 콘텐츠에 적합해요.

 

 

🏁 마무리하며

처음엔 “이게 된다고?” 싶은 기능이지만,
해보면 너무 간단하고 유용해서 깜짝 놀랄 거예요 😄

포트폴리오, 소개 페이지, 텍스트 기반 블로그, 심지어 프로젝트 설명서까지!
모두 GitHub Pages로 멋지게 만들 수 있어요.