안녕하세요?
SSAFY 14기 수박강아지입니다.

서론

저희 반은 학우들과 같이 공부하기 위해, 각자 맡은 부분에 대해 문제를 만들어 공유하는 방식으로 공부를 하고 있습니다.

그런데, 문제를 풀려고 하니 특정 프로그램을 설치해야 하는 번거로움이!!..
또한 이 프로그램은 Windows 전용 프로그램이라 저같은 Mac OS 유저는 사용하지 못한다는 불편함까지 있습니다.

이 불편함을 해결하고자 제가 직접 이 프로그램과 매우 유사한 웹 사이트를 만들었어요!
처음에는 HTML 파일만 배포하여 직접 본인 서버에서 구동시키는 방식이었습니다.

그런데, 이게 생각보다 많이 불편하더군요?
뭔가 에러 사항이 있을 때마다, 파일을 직접 다시 배포하고 리드미 수정하고..

그래서 생각했죠
'어차피 별다른 알고리즘이 들어가지 않은 정적인 페이지인데, 쉽게 배포할 수 있지 않을까?'

그래서 방법을 구글링해 봤고 매우 좋은 방법을 알게 되었습니다!!!

바로 Github Pages라는 걸 말이죠!!

동적 사이트를 배포하기 위해서는 AWS, Vercel, Render 등등 다른 방안을 선택해야 합니다.
Github Pages는 정적 사이트(HTML, CSS, JS, 이미지, CSV 같은 정적인 리소스)만 배포가 가능하기 때문이죠.

저는 어차피 문제를 보여주는 HTML, 정답 오답 처리를 하는 JS, 문제에 대한 정보를 저장하고 있는 CSV 파일만 갖고 있기 때문에 더할 나위 없이 Github Pages를 사용해야겠다 마음 먹었읍니다 ^^

그래서 어떻게 하냐?

서론이 너무 길었네요.
본론으로 들어가 Github Pages를 사용해 정적인 페이지를 배포하는 법을 알려드리겠읍니다.

1️⃣ Github에 배포할 Repository 생성

우선 Github에 접속해 줍니다.

접속 후에 repository New 버튼을 눌러 주세용

생성하기를 눌렀다면, Repository name을 설정하시구 Create repository를 누르시면 됩니다.

• Description은 어떤 용도의 프로젝트인지 간단히 소개하는 설명란입니다.
  필요하시면 작성하시면 돼요!
• 코드는 숨기고 배포만 하고 싶으시면 visibility를 Private으로 하셔도 상관 없습니다!

이렇게 빈 repository가 생성되었다면 생성에 성공하신 겁니다.

2️⃣ Repository Clone

이 repository에 배포할 파일들을 push 해주시면 됩니다!
push 하는 방법은 여러가지가 있는데, 저는 Github Desktop을 이용해 설명을 드리겠습니다.
(다른 방법들은 구글링 하시면 많이 나오니 참고 바랍니다.)

로컬로 돌아와 Github Desktop을 켜줍니다.

그러면 위와 같은 화면이 뜰텐데 여기서 Current Repository를 눌러 줍니다.

그리고 Add -> Clone Repository를 선택합니다.

clone할 repository를 선택하고 아래에 Local Path를 설정하시고 clone을 눌러 주시면 끝입니다.

여기까지 되셨다면 로컬에 repository를 Clone 하는 데 성공하신 겁니다! (짝짝)

3️⃣ Repository Push

파일 탐색기로 이동해 clone한 폴더로 이동해 줍니다.

이 아무것도 없는 폴더에 배포할 파일들을 추가해 줍니다.

저는 임시로 나타낼 파일을 넣어 주었습니다.

다시 Github Desktop으로 돌아와 왼쪽 아래에 Commit Message를 작성 후에 Commit 버튼을 눌러 줍니다.

Publish branch 버튼을 눌러주면 커밋 완료!

Github로 다시 돌아가 보시면 이런 식으로 파일이 업로드 된 것을 확인하실 수 있습니다!

4️⃣ 배포하기

본격적으로 내 프로젝트를 배포해볼까요?

repository 페이지 우측 상단에 있는 Settings를 눌러 줍니다.

그러면 설정 페이지로 이동 되는데, 좌측을 잘 살펴 보시면 Pages가 보일 겁니다. 클릭!

Branch 부분이 지금 None으로 돼있을 텐데, 이를 클릭해 줍니다.

main으로 클릭하신 후에

save 버튼 클릭하시면 저장 됩니다.

저장 후에 30초 가량만 기다리시면 링크가 나타나게 됩니다.

이 링크를 통해 접속하면..

짜잔 배포 성공 !!

마무리

이렇게 살면서 처음으로 제가 만든 프로젝트를 배포해보았읍니다.
배포를 한 번도 해보지 않아 막연한 두려움이 있었는데, 정적인 페이지는 이렇게 간단하게 배포가 된다는 걸 알게 되어 좋은 시간이었습니다 😄

여러분도 Github Pages를 통해 간편하게 배포 한 번 해보시는 거 추천 드려요 ‼️

---

질문과 지적은 언제든지 환영입니다 ☺️