본문 바로가기

파일 업로드와 다운로드 그리고 배포

1. AI가 만들어준 HTML 파일

사용하고 있는 생성형 AI에게 간단한 제주 소개 웹 페이지를 html로 만들어줘. 깃허브 배포 실습중이야.라고 하면 .html 파일이 만들어집니다. 이 책은 HTML 책이 아니기 때문에 HTML을 더 설명하진 않습니다. 웹 페이지를 만들 때는 .html 파일이 필요하다는 것만 기억해주세요. 바탕화면에 그 파일을 저장해주세요. 저는 다운로드를 하였더니 파일이 index.html로 저장이 되었습니다. 만약 다른 이름으로 저장이 되었다면, index.html로 이름을 바꿔주세요. 대문 페이지는 항상 index.html로 저장하는 것으로 약속이 되어 있습니다. HTML을 더 배우고 싶다면, HTML 베이스캠프 책을 추천드립니다.

2. 깃허브에 업로드하기

AI가 만들어준 HTML 파일을 깃허브에 업로드 해보겠습니다. + 버튼을 클릭해서 Upload files를 선택합니다.

파일을 드래그 앤 드롭으로 업로드 할 수 있습니다. 파일명이 index.html인지 한 번 더 확인해주세요. Commit changes 버튼을 클릭해서 업로드를 완료합니다. 이러한 용어는 나중에 살펴보게 됩니다.

제대로 업로드가 되었다면 아래처럼 index.html 파일이 깃허브 레포지토리에 올라와 있을 것입니다.

3. 배포

이렇게 업로드된 파일을 인터넷 상에서 접속할 수 있게 하는 것을 배포라고 합니다. 모든 사람이 배포가 필요한 것은 아닙니다. 따라서 아래 내용은 누군가에게는 선택일 수 있습니다. 레파지토리를 만들 때 필수라고 생각하고 실습하지는 말아주세요. 다만 이 실습은 필수입니다.

  1. 레파지토리 화면에서 우측 상단의 Settings 클릭

  2. 왼쪽 메뉴에서 Pages 클릭

  3. Branch 항목에서 main을 선택하고 Save

  4. 보통 3분에서 길게는 20분 사이에 배포가 완료됩니다. 페이지를 새로고침하면서 주소가 뜨는지 확인합니다.

  5. 주소는 https://내이름.github.io/내레포명/으로 고정됩니다. 이 주소는 나중에 구매하여 변경할 수 있습니다.

언제 GitHub Pages를 쓰나

  • 이력서·포트폴리오 페이지처럼 한 번 만들고 거의 안 바꿀 사이트
  • HTML/CSS/JS만 있는 작은 사이트

언제 잘 안 쓰나

  • 로그인이나 DB 조회처럼 서버에서 처리해야 하는 기능이 있는 앱

4. 실습

레포지토리를 만드는 것, 그리고 배포하는 것까지 꼭 3번 해보세요.

파일 업로드와 다운로드 그리고 배포 - 딱 필요한 만큼: 바이브 코딩을 위한 깃허브(GitHub) | 위니버시티