나만의 무료 웹사이트 제작 4부 – 배포(feat. Netlify)

1, 2, 3부에 이어 드디어 미완성이지만 우리가 실험적으로 제작한 웹사이트를 netlify(넬리파이)로 온라인 상에 배포하는 작업을 해보겠습니다. 포스팅을 위해 한 단계식 캡쳐를 하면서 작업을 하다가 실수를 하나 하는 바람에 여러분과 공유할게 많아졌습니다.

자, 이제 우리 인생에서 처음으로 인터넷에 내가 만든 웹사이트를 올리는 작업을 시작해 볼까요? 그것도 시간만 들이면 되고 따로 비용을 지출하지 않아도 되는 그런 이상적인? 툴들을 이용해서요!

넬리파이 가입하기

우선, 현재 사용 중인 브라우저 다른 탭에 GitHub 로그인을 해둡니다. 웹사이트 무료 배포 서비스를 제공하는 넬리파이 홈페이지에 접속해서 ‘Sign up‘ 가입절차를 진행합니다. ‘Sign up with GitHub‘를 클릭하면 자동으로 인식해서 인증 절차를 진행합니다.

이후, 각종 요구사항(계획, 용도, 역할 등)이 많은데 크게 신경쓰지 마시고 선택하시고, team 이름도 적당히 정해서 넣으시고, 마지막으로 ‘Continue to deploy‘를 클릭합니다. 그리고 계속 깃허브로 진행하시면 됩니다.(‘Deploy with GitHub‘ 클릭, ‘Authorize Netlify‘ 클릭)

뭐 해야 하는게 많긴 한데 무료이니 꾹 참고 킵고잉 합니다. 이미 만들었던 깃허브 저장소 선택해서 넬리파이를 설치하고, 우리의 프로젝트(제 경우는 quarto website)를 deploy 합니다. 몇 번의 클릭을 하다보면 deploy success 창이 뜨는데 ‘Get started‘를 클릭합니다.

사이트 이름(Site name) 변경하기

좌측 상단 ‘Site overview‘를 클릭하면 아주 긴 웹사이트 주소(https:// ~~~~~~~.netlify.app)가 보일 겁니다. 넬리파이에서 자동으로 생성해 준 우리의 웹사이트 주소입니다. 그런데 보기가 썩 좋지 않으니 바꿔 주겠습니다.

아래 그림 같이 ‘Site configuration‘ > ‘Site details‘ > ‘Change site name‘ 순으로 클릭하고, ‘Site name‘에 원하는 이름 입력(저의 경우 it-playground) 후 ‘Save‘ 하면 원하는 주소로 바뀝니다. 저의 경우 최종적으로 it-playground.netlify.app 이렇게 됩니다.

이제 핸드폰이나 PC 브라우저에 바뀐 주소를 입력해서 확인해 봅니다. 짜짠~! Page Not Found!(어~ 안되는데? 뭐야~ 이거~ ) 잠깐만요~ ‘뭐가 문제지??? 뭘 빼먹었지???’ (한번에 안된 이유는 나중에 다른 걸로 다시 하면서 체크해 보겠습니다.ㅜㅜ)

자! 그럼 원점에서 다시 시작해 봅시다. RStudio를 이용해서 quarto로 작업을 하고 렌더링해서 생기는 html 파일 등 웹사이트 구성 파일은 _site라는 폴더(index.html 등)에 있습니다. 결국 저 폴더 내에 있는 파일들이 netlify와 함께 작동되도록 뭔가 설정을 해줘야 할 것 같은 느낌이 오죠? 아래 그림에서 깃허브 원격저장소 내 _site 폴더 보이시죠?

넬리파이 설정 폭파

자, 다시 netlify로 돌아가서 Site configuration > Danger zone > Delete this site 순으로 클릭해서 사이트 이름을 타이핑하고 Delete 클릭합니다. 우리의 실험적 웹사이트가 만들자 마자 폭파되는 마술이 펼쳐집니다.(원래 이 바닥이.. 이렇게 실패를 하면서 실력이 늘어납니다~ )

홀라당 다 날려먹고 Team overview를 클릭하면 아래 그림과 같이 ‘import from Git‘ 보이실 겁니다. 그리고 다시 이전에 했던 작업(Let’s deploy your project)을 합니다. ‘Deploy with GitHub‘ > 깃허브 저장소 클릭 > Site name 입력 > Check availability 클릭해서 웹사이트 이름 사용 가능여부를 확인합니다.

이후 아래로 스크롤 해서 ‘Publish directory’에 ‘_site’를 입력합니다.(이 부분이 젤로 중요!!! 홑따옴표 ‘ 는 노 입력, ) 그리고 이제 진짜 ‘Deploy it-playground‘를 클릭해서 우리의 웹사이트를 인터넷에 띄웁니다. 넬리파이가 자동으로 이런저런 작업하는게 보이고 1~2분 후에 ‘Deploy success!’가 뜹니다. ‘View site deploy‘를 누르면 _site 폴더 내 웹사이트 구성 파일이 보이게 될 껍니다.

Deploy Success

******.netlify.com을 브라우저 주소창에 입력하고 실행하면 짜잔~! 로컬(내컴퓨터)에서만 보이던게 아래 그림처럼 웹상에서 보입니다. (이거 내가 만든 최초의 웹사이트 맞아? 와우~ 진짜 신기하네~) 아래 사진 속 애들 모습이 바로 제 마음을 대신 해주네요~ ^_^

오늘은 넬리파이에 가입을 하는 방법과 깃허브 웹사이트 구성 파일(_site 폴더)과 넬리파이를 활용하여 인터넷에 우리의 웹사이트를 띄워보았습니다. 나만의 웹사이트를 가진다는게 이렇게 쉬웠어?

이제 실험적 웹사이트 구축은 끝났으니 앞으로는 실제 이 웹사이트를 어떻게 꾸밀 수 있는지, 그리고 어떻게 업데이트를 하는지 한번 살펴 보도록 하겠습니다.

IT기술 활용으로 삶을 풍요롭게 해드리는 Life2.0: IT Playground 테리였습니다.

‘secondlife.lol’의 모든 콘텐츠는 저작권법의 보호를 받습니다. 무단 전재와 복사, 배포 등을 금합니다.