HTML을 링크로작은 웹사이트 실습실 배포 설정 바로 보기

FROM YOUR FOLDER TO THE WEB

내가 만든 HTML,
친구에게 링크로.

Codex로 페이지를 만들고, GitHub에 저장하고,
Cloudflare Pages로 공개해 보자.

지금 보고 있는 안내서도 똑같은 방식으로 올릴 수 있는 HTML 사이트다.

전체 흐름부터 보기
내 컴퓨터 / dist
H
index.html글과 페이지 구조
C
styles.css색, 글꼴, 배치
J
script.js버튼과 작은 동작
GitHub → Cloudflare
배포 후 받을 주소의 예시내사이트.pages.dev

THE BIG PICTURE

이 네 칸만 이해하면 된다.

  1. 01

    내 폴더 + Codex

    HTML을 만들고
    내 화면에서 확인한다.

    만들기
  2. 02

    Git

    파일의 변경 이력을
    내 컴퓨터에 기록한다.

    commit = 이력 저장
  3. 03

    GitHub

    그 이력을 인터넷의
    저장소로 올린다.

    push = 업로드
  4. 04

    Cloudflare Pages

    저장소의 웹 파일을
    공개 주소로 제공한다.

    deploy = 배포
01

GET READY

시작 전 준비

GitHub 계정, Cloudflare 계정, 그리고 사이트를 담을 새 폴더가 필요하다. 자세한 방법은 codex한테 물어보자.

이번에 쓰는 것

  • Codex: HTML 작성과 오류 수정
  • Git: 변경 이력 저장
  • GitHub + Cloudflare: 보관과 공개
“정적 사이트”란?

미리 만든 HTML·CSS·JS를 방문자의 브라우저에 보내는 사이트. 그런 이유로, 다른 사람들이 글을 작성하거나, 새로 수정하는 것이 불가능하다.

Git이 설치되어 있는지 모르겠다면

Codex에 “이 컴퓨터에서 git --version으로 Git 설치 여부만 확인해 줘. 없으면 설치 방법을 안내해 줘.”라고 요청하면 된다.

02

MAKE IT LOCAL

웹 사이트 페이지 만들기

주제나 디자인, 원하는 기능을 codex한테 요청하면 된다. HTML형식으로 웹사이트를 만들어 달라고 하자.

요청 예시문
이 전용 폴더에 한국어 정적 사이트를 만들어 줘.
주제는 “Codex로 HTML을 만들고 GitHub와 Cloudflare Pages로 공개하는 법”이야.
처음 배우는 친구가 따라 할 수 있게 쉽게 설명해 줘.

HTML·CSS·JavaScript만 사용하고, 모바일에서도 읽기 편하게 해 줘.
웹 파일은 dist/ 안에, 사용 안내는 README.md에 작성해 줘.
외부 API, 로그인 기능, 분석 추적 도구는 필요 없어.
로컬에서 확인하고 오류를 점검해 줘.
Git 커밋, 외부 업로드와 공개 배포는 파일 목록을 보여준 뒤 내 승인을 받아.
html-to-cloudflare/
├── dist/              ← 여기에 든 파일이 웹에 공개됨, 이게 중요.
│   ├── index.html     ← 첫 화면
│   ├── styles.css
│   ├── script.js
│   └── favicon.svg
├── README.md          ← 사용 설명
└── .gitignore         ← Git에서 제외할 파일 규칙, 몰라도 된다.

배포전에 dist/index.html을 브라우저로 열어도 볼 수 있다. Codex에 “로컬 미리보기를 열어 줘”라고 부탁해도 된다.

localhost란?

localhost는 “지금 이 컴퓨터”를 뜻한다. 이 상태에서는 다른 사람한테 그 주소를 보내도 내 페이지로 연결되지 않는다. 공개 주소는 4단계에서 만들자.

03

SAVE & SEND

GitHub에 파일을 보관하자.

저장소(repository)는 이 사이트의 파일과 변경 이력을 보관하는 공간이다. 다른 프로젝트와 섞이지 않게 하나를 새로 만든다.

  1. GitHub의 New repository를 연다.
  2. 이름을 정한다. 예: html-to-cloudflare. 공개 안내서라도 저장소 자체는 Private로 시작해도 된다.
  3. 이미 만든 로컬 파일을 올릴 것이므로 README·.gitignore·license 자동 생성은 선택하지 않는다.
  4. Create repository를 누르고, 만들어진 저장소 URL을 Codex에 알려 준다.

화면 항목 참고: GitHub 공식 저장소 생성 안내 ↗

검토 후 업로드를 요청할 때
이 사이트 전용 폴더의 dist/ 웹 파일, README.md, .gitignore만
GitHub의 [내 저장소 URL]에 올리고 싶어.
먼저 Git 상태와 정확한 파일 목록, 개인정보·비밀키 포함 여부를 확인해 줘.
기존 저장소나 다른 프로젝트는 건드리지 마.
확인 결과를 보여주면 내가 초기화·커밋·remote 연결·push를 승인할게.
인증이 필요하면 내가 직접 로그인하도록 안내해 줘.
save파일 자체를 저장
commit그 변경을 Git 이력에 기록
pushGitHub에 이력을 업로드
실제로 어떤 Git 명령을 쓰는 걸까?

아래는 다른 저장소 안이 아닌 새 전용 폴더에서 쓰는 예시다. YOUR_NAME과 저장소 이름을 실제 값으로 바꾼다. 기존 Git 저장소라면 초기화·remote 추가부터 실행하지 말고 현재 상태를 먼저 확인한다.

git init -b main
git status
git add -- dist/index.html dist/styles.css dist/script.js dist/favicon.svg README.md .gitignore
git diff --cached --stat
git diff --cached
git commit -m "feat: add static hosting guide"
git remote add origin https://github.com/YOUR_NAME/html-to-cloudflare.git
git push -u origin main

사용자 이름·이메일 또는 인증 오류가 나오면 그 메시지를 Codex에 보여 주면 된다. 브라우저 로그인과 터미널의 Git 인증은 별개일 수 있다. 비밀번호나 토큰은 채팅이나 코드에 붙여 넣지 않는다.

04

PUT IT ON THE WEB

Cloudflare와 연결하자.

여기서부터 공개 웹사이트가 만들어진다. Cloudflare가 GitHub에서 파일을 가져가고, 방문자에게 그 파일을 전달한다.

  1. Cloudflare 대시보드에서 Workers & Pages → Create application → Pages로 이동한다.
  2. Connect to Git 또는 Import an existing Git repository를 선택하고 GitHub를 연결한다. UI 표현은 바뀔 수 있다.
  3. 권한 설정에서는 가능하면 Only select repositories로 이번 저장소만 허용한다.
  4. 저장소를 선택하고 아래 값을 입력한 뒤 Save and Deploy로 배포한다.
이 예제에 사용할 설정Pages · Git 연동
Framework preset사이트 제작 도구
None
Production branch공개할 Git 브랜치
main
Build command변환 작업 없이 종료
exit 0
Build output directory공개할 웹 파일 폴더
dist
Root directory저장소 최상위에서 시작
기본값 / 비워 두기
Environment variables환경 변수
추가하지 않음

정적 HTML 설정 ↗ · Git 연동 안내 ↗ · 저장소 접근 권한 ↗

Private 저장소 ≠ 비공개 사이트

저장소를 비공개로 해도 이 방식의 Pages 사이트는 기본적으로 공개된다. dist/에는 친구에게 공개해도 되는 내용만 넣자. 비밀키·개인정보·미공개 연구자료는 포함하지 않는다.

무료로 가능한 범위는 어디까지?

이 예제는 HTML·CSS·JS 같은 정적 파일만 제공하며 Functions나 유료 API를 사용하지 않는다. 공식 문서 기준 정적 파일 요청은 무료이며, Free 플랜의 빌드는 월 500회 한도다. 기본 pages.dev 주소를 쓰면 별도 도메인을 살 필요도 없다.

이후 유료 상품·사용자 도메인·서버 기능을 추가하면 비용 조건을 다시 확인한다. “Cloudflare의 모든 기능이 무료”라는 뜻은 아니다.

2026-10-30 확인: 정적 파일 요금 ↗ · Free 플랜 한도 ↗

Upload / Direct Upload를 골라도 될까?

그 방법도 있지만, 이번 실습은 GitHub 수정 사항을 자동 배포하도록 Git 연동을 선택한다. Direct Upload로 만든 프로젝트는 나중에 Git 연동으로 전환할 수 없으므로, 방식을 바꾸려면 새 프로젝트가 필요하다.

공식 Direct Upload 안내 ↗

05

SHARE & ITERATE

링크를 보내고, 한 줄 고쳐 보자.

Cloudflare가 보여 준 https://프로젝트명.pages.dev를 열어 본다. 휴대폰에서도 글과 버튼이 잘 보이는지 확인하고, 친구에게 이 링크를 보내면 된다.

Codex로 수정로컬에서 확인commit + push자동 재배포

예를 들어 제목 한 줄을 바꿔 보자. 파일을 저장하기만 하면 내 컴퓨터만 바뀐다. GitHub로 push하고 Cloudflare 배포가 성공해야 공개 사이트도 바뀐다.

두 번째 수정부터 사용할 요청문
이 사이트의 제목을 [원하는 제목]으로 바꿔 줘.
로컬 미리보기와 모바일 화면을 점검하고 변경 파일을 보여 줘.
내 승인 후 이번 수정만 커밋하고 기존 GitHub main에 push해 줘.
Cloudflare의 자동 배포가 성공했는지와 공개 URL을 확인해 줘.
내 컴퓨터가 서버가 되는 건 아니다.

공개된 파일은 Cloudflare가 제공한다. 배포 후에는 로컬 미리보기 서버를 종료해도 되고 노트북을 꺼도 된다.

WHEN SOMETHING GOES WRONG

막히면 이것부터 보자.

사이트를 열면 404가 나온다

GitHub에 dist/index.html이 있는지, Cloudflare의 Build output directory가 dist인지 확인한다. Index.html처럼 대소문자가 달라도 문제가 될 수 있다.

글은 보이는데 색과 배치가 깨졌다

CSS 파일도 GitHub에 올렸는지 확인한다. 이 예제에서는 HTML과 같은 폴더의 ./styles.css를 읽는다. 내 컴퓨터의 절대 경로가 들어가면 다른 컴퓨터에서는 열리지 않는다.

수정했는데 사이트가 그대로다

commit에서 끝내지 않고 push까지 했는지 확인한다. 그다음 Cloudflare Deployments에서 최신 커밋의 성공 여부를 확인하고 페이지를 새로 고친다.

Cloudflare에서 내 저장소가 보이지 않는다

로그인한 GitHub 계정과 선택한 저장소 권한을 확인한다. GitHub의 Cloudflare Workers & Pages 앱에 이번 저장소 접근을 허용해야 한다. 다른 저장소 권한은 불필요하게 넓히지 않는다.

명령어를 전부 외워야 할까?

아니다. “무엇이 내 컴퓨터에서 바뀌고, 무엇이 외부로 올라가는지”를 알면 된다. Codex에 작업과 확인을 부탁하고, 커밋·업로드·공개 범위를 보고 승인하면 된다.

ONE SENTENCE TO REMEMBER

Codex가 만들고, Git이 기록하고,
GitHub가 보관하고, Cloudflare가 보여 준다.

이제 “HTML 파일”을 “누구나 열 수 있는 링크”로 바꿀 수 있다.

요청문 다시 보기