웹페이지 배포하기

1. 웹페이지 배포하기

1.1 배포(Publish)의 중요성

1.2 배포 옵션

1.2.1 자체 서버

직접 서버를 구축하고 관리

• 제어력 높으나 관리가 복잡 (서버 유지보수, 보안 등)
• Apache나 Nginx 같은 웹 서버 소프트웨어 사용

1.2.2 클라우드 서비스

이미 구축되어있는 서버를 일정기간, 원하는 만큼 빌려서 사용

• 확장성과 관리 편의성이 뛰어나지만 비용이 들 수 있음
• Amazon AWS, Microsoft Azure, Google Cloud 같은 클라우드 서비스 이용

1.2.3 정적 사이트 호스팅

미리 만들어진 정적 웹 페이지를 호스팅하는 서비스

• 설정이 간단하고 대부분의 경우 무료로 사용 가능
• 동적인 기능 (데이터베이스 연동, 서버 측 로직 등)에는 제한이 있을 수 있음
• GitHub Pages, Netlify, Vercel 등과 같은 호스팅 서비스를 사용

2. GitHub Pages

GitHub에서 제공하는 무료 정적 사이트 호스팅 서비스

• 프로젝트의 README, 문서, 또는 개인 웹사이트를 간단하게 배포 가능
• 설정이 매우 쉽고, 커스텀 도메인 연결도 가능 (=내가 원하는 이름의 주소)
• GitHub 저장소 (Repository)와 직접 연동
  • 코드 변경사항을 쉽게 웹에 반영할 수 있음

2.1 GitHub Pages 설정하기

1) GitHub에 로그인 (또는 가입)
2) GitHub에 새로운 저장소 (Repository) 생성
3) GitHub에 새로운 저장소 정보 입력
4) Public 저장소 클릭
5) 페이지 하단의 Create repository 버튼 클릭
6) Uploading an existing file 클릭하여 HTML, CSS 파일을 저장소에 업로드
7) Commit 메시지 입력
8) Commit changes 버튼 클릭하여 업로드 완료
9) GitHub Pages 상단 메뉴에서 Settings 버튼 클릭
10) 왼쪽 패널에서 Pages 메뉴 클릭
11) Branch 옵션을 기본값(None)으로 선택
12) main 브랜치 선택
13) Save 버튼 클릭하여 저장

GitHub를 통해 배포한 웹사이트의 도메인을 따로 지정하지 않는다면 아래와 같이 생긴 URL로 접근이 가능하다.

https://[github-username].github.io/[repository-name]/

만약 html의 파일 이름이 index.html이 아니라면 배포한 URL 뒤에 html 파일의 이름 또한 명시해줘야 해당 페이지로 접근이 가능하다.

예를 들어, HTML 파일 이름이 example.html이라면 아래와 같이 HTML 파일을 명시해야한다.

https://[github-username].github.io/[repository-name]/example.html