본문 바로가기
Developer/Etc

Netlify 를 이용한 누구나 쉽게할 수 있는 웹 사이트 호스팅 사용법!

by 김씩씩 2020. 10. 19.

Netlify 를 이용한 누구나 쉽게할 수 있는 웹 사이트 호스팅 사용법!

 

Web Hosting을 할 수 있는 방법, 그리고 웹 호스팅을 할 수 있도록 제공하는 곳은 정말 너무도 많습니다.

그중에서 Netlify 를 사용해서 호스팅 하는 방법을 알려드리도록 하겠습니다.

Netlify는 정적인 웹 사이트를 호스팅하는데 누구나 사용하기 쉽도록 UI가 정말 편하게 되어있습니다.

긴 말보다 바로 사진과 함께 설명을 보시면 얼마나 쉽고 간단한지 아실겁니다!

 

먼저 Netlify 홈페이지로 들어갑니다.

https://www.netlify.com

Netlify 홈페이지에서 우측 상단에 Sign up 버튼을 눌러 회원가입을 합니다.

이미 회원이신 분들은 Log in 버튼으로 로그인하시면 되겠습니다!

 

원하는 방법으로 회원가입 하시면 되겠습니다.

GitHub로 가입하여 연동하는 것도 지원합니다.

GitHub 연동하여 호스팅하는 방법은 다음에 포스팅하는것으로 하고

Email로 가입하는 것을 예로 보여드리도록 하겠습니다!

 

Email로 가입하기를 선택하신 뒤,

자신의 Email입력하고, 비밀번호를 입력하고 Sign up 버튼을 클릭합니다.

단, 비밀번호를 입력하실 때, 비밀번호는 10자 이상이어야하며 간단한 비밀번호로는 회원가입이 되지 않습니다.

어지간히 복잡해야 하는 것 같으니 크롬 비밀번호 자동 생성을 추천드립니다!

 

Email비밀번호 입력을 마친 뒤, Sign up 버튼을 클릭하시면 위와 같이 입력한 Email로 인증 메일을 보냈다는 페이지를 볼 수 있습니다.

이제 자신의 이메일로 들어가시면,

 

위와 같이 인증 메일이 와있습니다.

Verify email을 클릭하여 인증합니다.

 

이메일 인증을 마치면 netlify로 이동 됩니다.

 

처음 들어왔을 때 나타나는 가이드 창을 닫으면 위와 같은 화면을 보실 수 있는데요.

여기서 이제 호스팅할 웹 문서를 업로드 하시면 바로 deploy 됩니다.

업로드 하는 방법은 정말 너무 간단합니다!

 

사진처럼 Html 문서가 담긴 폴더를 netlify 사이트에 그대로 드래그만 해주시면 됩니다!

 

폴더를 드래그하는 것 만으로 Deploy 시켜주면, 위와같은 페이지를 보실 수 있습니다.

아래에 Production deploys에 Publish 된 목록이 보이고, 위 상단에 Publish 된 여러분의 Web Site 도메인이 생겨났습니다.

Web Site 도메인을 클릭 해보시면,

 

위와 같이 자신의 웹 문서가 잘 Publish 된 것을 확인하실 수 있습니다!

이렇게 정말 간단하고 쉬운 방법으로 자신은 웹 사이트를 호스팅 하실 수 있습니다!

 

 

※ 추가로 netlify에서 자동으로 생성해준 도메인을 변경하는 방법을 알려드리도록 하겠습니다!

자신의 Site overview에서 Site settings 버튼을 클릭합니다.

 

Site detailsSite informationChange site name 버튼을 클릭합니다.

 

Change site name 창이 뜨면,

원하는 site name을 입력한 뒤, Save 버튼을 클릭합니다.

당연히 중복되는 이름이 있다면 저장되지 않습니다!

 

Save 하시면 위와 같이 변경한 Site Name으로 모두 변경됩니다.

도메인도 SiteName.netlify.app 으로 변경됩니다.

 

위와 같이 잘 변경된 것을 확인하실 수 있습니다.

당연한 말이지만 .com, .co.kr 과 같은 도메인은 구입하셔서 연결하셔야 합니다!

netlify.app 으로 끝나는 앞의 이름만 변경가능합니다!

 

웹 사이트를 업데이트 하는 방법은  Site overview에서 Production deploys를 클릭하여 들어간 페이지에서,

처음 Deploy 했던 방법과 똑같이 HTML 문서가 있는 폴더를 드래그 하여 Publish 시키시면 됩니다!

또한, 새롭게 Publish 한 기록이 모두 남아서 사이트에서 전 단계로 롤백 시키는 것도 버튼 클릭 하나만으로 롤백도 정말 쉽게 가능합니다!

 

이상으로 Netlify 사용 방법 설명을 마치도록 하겠습니다.

 

 

제 글에 잘못된 정보, 더 좋은 방법 혹은 정보, 

궁금하신 점, 요청 사항 등이 있으시다면 언제든지 말씀해 주세요!

 

감사합니다.


댓글