GitHub Pages
무료 호스팅 3종으로 배포하기
해결하는 문제
만든 HTML을 휴대폰이나 다른 사람에게 HTTPS 주소로 열어 주고 싶다.
GitHub Pages, Netlify, Vercel에 HTML 폴더를 올려 무료 HTTPS 주소를 받습니다. 카메라·센서 기능은 HTTPS여야 동작합니다.
서버 의존도
서버 없이 브라우저 기본 기능만 씁니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것HTML 폴더
브라우저가 하는 일호스팅 서비스에 업로드
나오는 것HTTPS 주소와 QR
쓰는 브라우저 기술
HTTPS정적 파일 호스팅
라이브러리와 모델
외부 라이브러리 없이 브라우저 기본 기능만 씁니다.
바꿀 수 있는 옵션
- GitHub Pages: 저장소와 함께 관리 (.nojekyll 필요할 때 있음)
- Netlify: 폴더 끌어다 놓기
- Vercel: 서버 함수까지 확장
자주 막히는 곳
- GitHub Pages는 .md 파일을 변환하므로 원본 제공에는 .nojekyll이 필요하다
- 무료 요금제는 사용량 한도가 있다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- AI가 만든 도구를 바로 공유하는 흐름
웹 서비스
- 수강생 결과물 전시
피지컬 AI
- 기기 제어 페이지를 휴대폰에서 열기
넓히는 방법
- 내 도메인 연결 (browser-rediscovered.cdsa.kr)
- 책 QR과 영구 주소 연결
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
이 HTML 폴더를 Netlify에 올려 HTTPS 주소를 받는 방법을 비개발자 기준으로 단계별로 알려줘.
같은 분류의 능력
10 통신·네트워크에 속한 다른 능력입니다.
무료로 보는 것
한 줄 설명, 미리보기 영상, 제한형 데모
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md