무료로 정적 웹페이지를 배포하는 방법: GitHub와 Netlify 활용

오늘은 무료로 정적 웹페이지를 배포하는 방법에 대해 알아보겠습니다.

 

Github와 netlify를 이용합니다.

 

https://github.com/

GitHub: Let’s build from here

https://www.netlify.com/

Scale & Ship Faster with a Composable Web Architecture | Netlify

 

---

 

먼저 github에 html 파일을 비롯한 소스를 업로드해야 합니다.

 

새로운(혹은 기존의) repository에 업로드를 하는데, 첫 화면에 표시될 html 파일의 이름은 무조건 index.html이어야 합니다. netlify에서 index.html 파일을 기본 페이지로 인식하기 때문입니다.

웹페이지를 이룰 소스를 업로드한 github repository

사진처럼 repo 안에 바로 index.html이 있어야 합니다.

 

첫 페이지에 index.html이 아닌 다른 이름의 html 파일을 사용하고 싶거나, 폴더 안의 파일을 사용하고 싶다면

index.html에 들어가자 마자 다른 페이지로 리다이렉트 되는 기능을 구현하면 됩니다.

https://youngmap.tistory.com/163

Web URL 리다이렉트 (Redirect) 2가지 구현 방법 [meta / Javascript]

 

github에서 할 일은 끝났습니다. 이제 netlify로 넘어가 보겠습니다.

---

 

netlify 회원가입 화면

계정이 없다면 가입해줍시다. 어떤 계정을 사용해도 무방합니다.

 

가입을 완료했다면 Team overview나 Sites에서 Add new site를 찾고, Import an existing project를 클릭합니다.

(가입 직후 바로 해당 페이지로 넘어갈 수도 있습니다. 또한, 처음 만들 때는 버튼 이름이 다를 수도 있습니다.)

 

 

 

이제 업로드한 github repository를 연결할 차례입니다.

 

 

(처음 연결할 때 모든 repo를 연결할지, 지정한 repo만 연결해 둘지를 정할 수 있는데, 계속 새로운 사이트를 업로드할 예정이시라면 모든 repo 연결로 지정해야 편합니다)

 

2. Select repository에서 연결할 repo를 선택하면 됩니다.

 

 

마지막 3단계입니다. 팀을 선택하고 사이트 이름을 지정하면 됩니다. 

여기서 사이트 이름은 URL을 만드는 데 사용됩니다. https://site_name.netlify.app 형태로 기본 URL이 만들어집니다.

브랜치는 github에 업로드하시는 걸로 선택하면 됩니다.

 

아래에 나오는 Build setting은 추가적인 목적이 있는 게 아니라면 설정할 필요 없습니다.

 

작성을 완료했다면 맨 아래 Deploy 버튼을 눌러줍니다.

 

---

 

완성입니다!

 

 

위 사진과 같은 화면을 볼 수 있다면 문제없이 웹사이트가 생성된 것입니다.

링크로 들어가서 잘 만들어졌는지 확인해봅시다.

 

웹사이트의 내용을 변경하고 싶다면 github repo에 업로드된 파일들을 변경하면 됩니다. 그러면 수 초 내로 웹사이트 내용이 수정됩니다.

 

궁금한 점은 댓글에 질문해 주세요.