마케터 실무도구/HTML
GitHub Pages에 스크래치 쿠폰 HTML 올리는 방법
신마성
2025. 5. 6. 20:32
스크래치 쿠폰을 HTML로 만들어서 GitHub Pages에 올리고,
티스토리 블로그에 바로 삽입하는 방법을 알려드릴게요.
처음 한 번만 설정해두면,
그 다음부터는 파일만 바꿔서 쿠폰을 계속 운영할 수 있어서 정말 편하답니다.
1단계. 메모장으로 HTML 파일 만들기
HTML 편집기가 없어도 괜찮아요.
메모장으로 index.html 파일을 만들고, UTF-8로 저장해 주세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>스크래치 쿠폰</title>
</head>
<body>
<h1>쿠폰이 여기에 표시됩니다</h1>
</body>
</html>2단계. GitHub 저장소 만들고 파일 올리기
- GitHub에 로그인한 뒤 New repository 버튼을 클릭해요
- 저장소 이름은 예: scratch-coupon으로 정해볼게요
- 저장소가 만들어지면 상단 메뉴에서 Code 탭에 있는지 확인해 주세요
여기서 꼭 주의할 점!
GitHub Pages는 main 브랜치 기준으로 작동하기 때문에,
첫 번째 파일은 반드시 Code > Add file > Upload files에서 올려야 해요
- index.html 파일을 업로드한 다음,
- 아래쪽에 있는 Commit 버튼을 눌러 저장하면 끝이에요
3단계. GitHub Pages 설정하기
이제 올린 HTML 파일을 웹 주소로 볼 수 있도록 설정해볼게요.
- 저장소 상단 메뉴 → Settings > Pages로 들어가요
- Source는 Deploy from a branch로 설정하고
- Branch는 main, 폴더는 / (root)로 지정해 주세요
- 저장하면 잠시 뒤에 접속 가능한 주소가 생겨요
예시 주소:
<https://username.github.io/scratch-coupon/>4단계. 티스토리에 삽입하기 (iframe)
HTML 모드에서 아래 코드를 그대로 붙여넣어 주세요.
<iframe src="https://username.github.io/scratch-coupon/" width="100%" height="600" style="border:0;"></iframe>쿠폰이 글 안에 바로 보이게 되니까,
누구나 쉽게 긁어서 사용할 수 있어요.
Tip.
여러 HTML 파일도 같이 올릴 수 있어요
처음엔 index.html만 되는 줄 알았는데요,
사실은 파일명을 정확히 입력하면
scratch.html, coupon2.html 같은 파일도 모두 불러올 수 있어요.
✔ 접속 주소는 이렇게 달라져요
| 파일명 | 접속 주소 |
| index.html | https://username.github.io/scratch-coupon/ |
| scratch.html | https://username.github.io/scratch-coupon/scratch.html |
| coupon2.html | https://username.github.io/scratch-coupon/coupon2.html |
✔ 보여주는 방식도 나눠서 쓸 수 있어요
1. iframe으로 바로 보여주기
<iframe src="https://username.github.io/scratch-coupon/scratch.html"></iframe>2. 링크로 다른 쿠폰으로 이동하기
<a href="https://username.github.io/scratch-coupon/coupon2.html" target="_blank">다른 쿠폰 보기</a주소만 정확하면 index.html 외에도 전부 불러올 수 있어요
마무리 정리해요
| 하고 싶은 일 | 추천 방식 |
| 대표 쿠폰 하나 보여주기 | index.html + iframe |
| 쿠폰 여러 개 운영하고 싶을 때 | 각각 파일로 만들어서 a href 또는 iframe으로 연결하기 |
| 주소를 깔끔하게 유지하고 싶을 때 | index.html로만 연결하면 좋아요 |