개발

[개발] GitHub Pages를 활용한 웹사이트 무료 배포

weweGH 2025. 8. 10. 17:00
반응형

웹사이트 무료 배포
웹사이트 무료 배포


GitHub Pages를 활용한 무료 웹사이트 무료 배포


들어가며


GitHub Pages는 GitHub에서 제공하는 무료 웹사이트 호스팅 서비스입니다. 레포지토리의 HTML, CSS, JavaScript 파일을 이용하여 웹사이트를 자동으로 빌드하고 배포할 수 있습니다. 개인 포트폴리오, 블로그, 오픈소스 프로젝트의 문서 등으로 활용할 수 있고, 개인 소유의 도메인 연결도 가능합니다.

이 글에서는 GitHub Pages를 활용하여 배포하는 방법을 소개합니다.



레포지토리 생성


먼저, 깃허브에 레포지토리를 public으로 생성합니다. 포스팅을 위해 임시로 레포지토리를 생성했습니다.

레포지토리 생성
레포지토리 생성


해당 레포지토리에 배포할 html, css, javascript 파일을 추가합니다.

파일 추가
파일 추가


테스트를 위한 HTML, CSS, JavaScript 파일을 첨부합니다. 다음 파일들을 활용하여 실습해보세요:)

app.js
0.00MB
index.css
0.00MB
index.html
0.00MB


Pages 설정


레포지토리 화면에서 우측 상단의 Settings를 클릭합니다.

Settings
Settings


좌측 메뉴 중 Pages를 클릭합니다.

Pages
Pages


Source는 특정 브랜치의 파일을 직접 배포하는 'Deply from a branch'를 선택하고, Branch는 배포할 소스 브랜치인 'main'을 선택합니다. Save를 클릭하여 저장합니다.

Pages 설정
Pages 설정


설정 후 화면 상단에 다음과 같은 안내 메시지가 나타나면 성공입니다. Public 저장소는 모든 파일이 공개되므로 개인정보 유출에 주의하세요.

배포 성공
배포 성공

반응형

배포 확인


해당 레포지토리의 Pages 메뉴에서 생성된 URL을 확인할 수 있습니다. 안내 메시지를 확인할 수 없다면 브라우저를 새로고침해주세요.

배포 확인
배포 확인


레포지토리 상단의 메뉴 중 Actions에서도 배포된 URL을 확인할 수 있습니다.

배포 확인2
배포 확인2


반응형