바이브코딩 워크쓰루 1-2 깃허브 올리고 배포하기

GitHub | Cloudflare Pages | Cloudflare 가입

시작 전에 꼭 읽어주세요

이 글은 바이브코딩 워크쓰루 시리즈1의 두 번째 글입니다.

이전 글 [1-1.

기초 과목 0-3. 깃허브 가입하고 레포 만들기와 0-4. Cloudflare Pages 무료 배포 내용을 복습해두시면 좋습니다.

1-1에서 자기소개 웹페이지를 만들었습니다. 내 컴퓨터의 브라우저에서 잘 보입니다. 하지만 이 상태로는 나만 볼 수 있습니다. 친구에게 “내 웹페이지 한번 봐봐”라고 할 수 없습니다. 주소를 공유할 수 없기 때문입니다.

이번 글에서 두 가지 일을 합니다. 첫째, 만든 코드를 GitHub에 올립니다(푸쉬). 둘째, Cloudflare Pages로 배포해서 인터넷의 누구나 접속할 수 있는 주소를 만듭니다. 기초 과목에서 배운 개념인 빌드, 푸쉬, 배포를 직접 해보는 시간입니다.

GitHub에 레포지토리 만들기

위의 Settings 메뉴를 통해서 레포지토리-레포의 공개를 설정할 수 있습니다. public 공개, private 비공개

먼저 코드를 올릴 공간을 GitHub에 만듭니다.

1단계 GitHub에 로그인합니다. 오른쪽 상단의 + 버튼을 클릭하고 New repository 를 선택합니다. 구글 계정이 있다면 한번 딸깍으로 가입 및 로그인이 가능합니다.

2단계 Repository name에 my-first-website를 입력합니다. 영어로 작성하고 공백 대신 하이픈(-)을 사용합니다.

3단계 레포지토리 페이지에서 상단의 setting을 누르고 가장 하단으로 스크롤해서 Public(공개)을 선택합니다. Cloudflare Pages 무료 플랜에서 비공개 레포지토리도 연결할 수 있지만, 학습 단계에서는 공개로 하는 것이 편합니다.

4단계 “Add a README file”에 체크하지 않습니다 . 이미 로컬에 파일이 있으므로 빈 레포지토리로 만들어야 합니다. README를 추가하면 나중에 충돌이 생길 수 있습니다.

5단계 Create repository 를 클릭합니다. 빈 레포지토리가 생성되면서 “Quick setup” 안내 화면이 나타납니다. 이 화면을 닫지 마세요. 곧 사용할 명령어가 여기에 있습니다.

로컬 코드를 GitHub에 올리기

VS Code 터미널에서 명령어를 입력해서 코드를 GitHub에 올리겠습니다. AI에게 물어보면서 진행해도 되고, 아래 단계를 그대로 따라 해도 됩니다.

6단계 VS Code에서 my-first-website 폴더가 열려있는지 확인합니다. 터미널을 엽니다(Ctrl+` 또는 상단 메뉴 → 터미널 → 새 터미널).

7단계 터미널에 다음 명령어를 한 줄씩 입력하고 엔터를 누릅니다. 각 명령어가 무엇을 하는지도 설명합니다.

git init

이 명령어는 현재 폴더를 Git이 관리하는 폴더로 만듭니다. “이 폴더의 변경 이력을 추적하겠다”고 선언하는 것입니다.

git add .

점(.)은 “현재 폴더의 모든 파일”을 의미합니다. 이 명령어는 모든 파일을 “올릴 준비” 상태로 만듭니다. 택배로 비유하면 물건을 박스에 담는 단계입니다.

git commit -m “첫 번째 커밋: 자기소개 페이지”

담은 물건에 라벨을 붙이는 단계입니다. -m 뒤의 따옴표 안에 있는 메시지가 “이 버전에서 뭘 했는지” 설명하는 라벨입니다. 나중에 이 메시지를 보고 어떤 변경이었는지 알 수 있습니다.

8단계 GitHub의 “Quick setup” 화면에 있는 명령어 두 줄을 복사해서 터미널에 붙여넣습니다. 대략 이런 형태입니다.

git remote add origin https://github.com/여러분의아이디/my-first-website.git

git push -u origin main

첫 번째 줄은 “GitHub의 이 레포지토리와 연결하겠다”는 명령이고, 두 번째 줄은 “코드를 GitHub에 올린다(푸쉬)“는 명령입니다. 처음 푸쉬할 때 GitHub 로그인을 요청할 수 있습니다. 브라우저 창이 열리면 로그인하고 권한을 허용합니다.

9단계 GitHub 레포지토리 페이지를 새로고침합니다. index.html 파일이 보이면 성공입니다. 내 컴퓨터에 있던 코드가 이제 인터넷의 GitHub 서버에도 저장된 것입니다.

Cloudflare Pages로 배포하기

코드가 GitHub에 올라갔으니, 이제 이것을 웹사이트로 공개합니다.

10단계 Cloudflare 대시보드에 로그인합니다. 구글 계정을 통해 회원가입과 로그인이 가능합니다.

11단계 왼쪽 메뉴에서 Workers & Pages 를 클릭합니다. Create 버튼을 클릭하고 Pages 탭을 선택합니다.

12단계 Connect to Git 을 클릭합니다. GitHub 계정 연결을 처음 하는 경우 권한 승인 화면이 나타납니다. 허용합니다.

13단계 레포지토리 목록에서 my-first-website를 선택하고 Begin setup 을 클릭합니다.

14단계 빌드 설정 화면이 나타납니다. 우리가 만든 것은 HTML 파일 하나뿐인 단순한 구조이므로 설정이 간단합니다.

• Framework preset: None 을 선택합니다

• Build command: 비워둡니다(입력하지 않습니다)

• Build output directory: 비워두거나 / 를 입력합니다

HTML 파일 하나를 그대로 올리는 것이므로 빌드 과정이 필요 없습니다. 빌드 명령어와 출력 디렉토리를 비워두면 Cloudflare가 레포지토리의 파일을 그대로 웹사이트로 만듭니다.

15단계 Save and Deploy 를 클릭합니다. 배포가 시작되고, 1분 정도 기다리면 완료됩니다.

Pages를 만들기 위해서는 위의 메뉴에서 하단의 조그맣게 써있는 Get started를 눌러야 합니다. 진행을 하다 막히는 부분이 있다면 그 부분을 캡쳐해서 본인의 AI 대화창에 그림 파일을 넣고 어떻게 해야하는지 진행 상황을 문의해보세요. AI는 이미지를 읽는 능력이 있습니다. 아래의 글을 참고하세요.

AI와 대화하는 법 - 챗gpt 입력 형태 총정리 | AI코리아24

내 웹사이트 주소 확인하기

위의 화면에서 Git repository를 선택하고 자신이 만든 깃허브의 레포를 선택하고 Begin setup버튼을 누르면 클라우드프레어 페이지가 생성이 됩니다.

배포가 완료되면 Visit site 버튼이 나타납니다. 클릭하면 여러분의 자기소개 페이지가 실제 인터넷 주소로 열립니다.

주소는 my-first-website.pages.dev 형태입니다. 이 주소를 카카오톡, 문자, 이메일로 보내면 누구든 여러분의 자기소개 페이지를 볼 수 있습니다. 무료이고, HTTPS(보안 접속)도 자동으로 적용되어 있습니다.

AI에게 말로 요청해서 만든 웹페이지가, 전 세계 어디서든 접속할 수 있는 진짜 웹사이트가 되었습니다. 이번 강의를 위해 생성한 깃허브 레포 이름은 lecture, 그리고 클라우드플레어 페이지에 배포한 후 아래의 url이 생성됐습니다.

https://lecture-23v.pages.dev/

수정하고 다시 배포하기

웹사이트를 수정하고 싶으면 이 과정만 반복하면 됩니다.

16단계 VS Code에서 index.html 파일을 수정합니다. AI에게 수정을 요청해서 새 코드를 받아도 되고, 직접 텍스트를 수정해도 됩니다.

17단계 터미널에 다음 명령어를 순서대로 입력합니다.

git add .

git commit -m “프로필 사진 추가”

git push

Cloudflare Pages가 GitHub의 변경을 자동으로 감지해서, 1분 내에 웹사이트에 반영합니다. 별도의 배포 작업이 필요 없습니다.

이 흐름을 기억해두세요. 코드 수정 → git add → git commit → git push → 자동 배포 . 이것이 앞으로 이 시리즈 전체에서 반복하게 될 워크플로우입니다.

흔한 문제와 해결

처음 진행하다 보면 몇 가지 문제를 만날 수 있습니다.

git push에서 에러가 나는 경우 가 있습니다. “failed to push some refs”라는 메시지가 뜨면, GitHub 레포지토리를 만들 때 README 파일을 함께 생성한 것이 원인일 수 있습니다. 이 경우 터미널에 git pull --rebase origin main을 입력한 후 다시 git push를 시도합니다.

Cloudflare 배포에서 에러가 나는 경우 가 있습니다. Build output directory 설정이 잘못된 경우가 대부분입니다. 우리처럼 빌드 과정 없이 HTML 파일을 그대로 올리는 경우에는 Build output directory를 비워두거나 /로 설정해야 합니다.

사이트에 접속했는데 빈 화면이 나오는 경우 가 있습니다. 파일 이름이 정확히 index.html인지 확인합니다. 대소문자도 구분하므로 Index.html이나 INDEX.html이 아닌 index.html이어야 합니다.

에러 메시지가 나오면 당황하지 말고, 그 메시지를 그대로 복사해서 AI에게 붙여넣으세요. “이 에러가 뭐야? 어떻게 해결해?”라고 물으면 대부분 해결책을 알려줍니다.

정리

1-1에서 만든 자기소개 페이지를 GitHub에 올리고, Cloudflare Pages로 배포해서 인터넷에 공개했습니다. 전체 과정을 정리하면 Git 초기화 → 커밋 → 푸쉬 → Cloudflare Pages 연결 → 자동 배포입니다. 이후 수정은 코드 수정 → 커밋 → 푸쉬만 하면 자동으로 반영됩니다.

지금은 my-first-website.pages.dev라는 Cloudflare가 준 주소를 사용하고 있습니다. 다음 글에서 이 주소를 “내이름.com” 같은 나만의 도메인으로 바꾸는 방법을 알아보겠습니다.

다음 글 예고

1-3. 도메인 연결하고 내 주소 갖기 — pages.dev 대신 나만의 도메인을 연결합니다. 시리즈1을 마무리합니다.

#GitHub #CloudflarePages #배포 #바이브코딩 #웹사이트공개 #푸쉬 #워크쓰루 #무료호스팅

🎵 바이브코딩 워크쓰루 내비게이션

순서	제목	링크
0-1	코딩용 AI 뭘 써야 할까	바로가기
0-2	VS Code와 터미널, 왜 쓰는가	바로가기
0-3	깃허브 가입하고 레포 만들기	바로가기
0-4	Cloudflare Pages 무료 배포	바로가기
1-1	AI 대화로 자기소개 페이지 만들기	바로가기
1-2	깃허브 올리고 배포하기	지금 읽은 글
1-3	도메인 연결하고 내 주소 갖기	바로가기