[사이트] 서버 비용 0원! 깃허브와 베르셀(Vercel)로 평생 무료 웹사이트 만들기

 

안녕하세요 무택입니다 :)

오늘은 내 지갑을 지키면서 나만의 웹사이트를 운영하는 방법을 공유하려고 합니다.

 

보통 간단한 웹사이트나 포트폴리오를 만들려고 하면 가장 먼저 '호스팅(Hosting)'과 '서버 비용'을 걱정하게 됩니다. 카페24나 가비아 같은 곳에서 유료 호스팅을 구매해야 할지, AWS 같은 복잡한 클라우드를 써야 할지 막막하셨을 텐데요.

 

결론부터 말씀드리면, 간단한 웹사이트나 블로그는 돈을 낼 필요가 전혀 없습니다.

 

바로 개발자들의 필수품인 깃허브(GitHub)와 차세대 배포 플랫폼인 베르셀(Vercel)을 조합하면 되는데요. 이 두 가지를 활용하면 다음과 같은 엄청난 장점이 있습니다.

1. 비용 0원: 개인 프로젝트 수준에서는 평생 무료에 가깝습니다.
2. 초고속 배포: 코드를 수정하고 저장하면 사이트가 자동으로 업데이트됩니다.
3. 글로벌 CDN: 전 세계 어디서 접속해도 속도가 빠릅니다.
4. HTTPS 보안: 자물쇠 표시(SSL) 보안 인증서가 자동으로 적용됩니다.

"나는 코딩을 잘 모르는데?" 하시는 분들도 괜찮습니다. 복잡한 명령어나 서버 세팅 없이, 클릭 몇 번으로 웹사이트를 인터넷 세상에 띄우는 방법을 차근차근 알려드리겠습니다.

 

깃허브와 베르셀을 이용해 무료 웹사이트 만들기

준비물 : HTML, CSS 등 구현할 웹페이지의 코드 파일

 

1. 먼저 깃허브 계정이 있어야 합니다. 깃허브 계정이 없다면 만들고 로그인해 주세요.

 

 

2. 우측 상단의 +버튼을 누른 후 'New repository'를 눌러줍니다. 코드파일을 올릴 준비를 하는 거예요.

 

3. 'Repository name'에 입력한 정보는 프로젝트의 기본 도메인 주소에 들어갑니다. 프로젝트명이라던가 사람들한테 보여주고 싶은 이름을 넣어주세요.

 

'Description'에는 사이트 설명을 넣어도 좋고 비워놔도 괜찮습니다.

 

공개 범위는 Public으로 해야 무료로 사용할 수 있기 때문에 무료로 설정하고 하단의 만들기 버튼을 눌러줍시다.

 

4. 그러면 나오는 다음 화면에서 'uploading an existing tile'을 눌러주세요.

 

5. 이곳에 본인이 갖고 있는 코드 파일을 넣고 하단의 버튼을 눌러주세요. 그러면 1차로 깃허브에 본인의 파일을 업로드됩니다. 이제 Vercel에서 사이트로 접속할 수 있도록 만들어 줍시다.

 

 

6. 먼저 Vercel사이트에서 로그인을 해야 하는데 로그인을 깃허브랑 연동해서 로그인하면 관리하기가 더 수월해집니다.

 

 

7. 로그인을 했다면 'Add New' 버튼 누르고 'Project'를 눌러주세요.

 

8. 왼쪽에 나오는 Import에서 방금 깃허브에 올린 프로젝트를 선택해서 'Import'버튼을 눌러주세요.

 

9. 다른 옵션은 딱히 건드릴 필요 없이 'Deploy'를 누르면 몇 분 정도 로딩이 되다가 완료되었다는 문구가 뜹니다. 그러면 아래처럼 깃허브에서 본인이 만든 사이트에 들어갈 수 있고 위 주소를 이용해 공유할 수 있습니다.

 

자, 이렇게 해서 호스팅 비용 한 푼 들이지 않고 나만의 웹사이트가 뚝딱 만들어졌습니다.

 

과정이 생각보다 훨씬 간단하지 않나요? 이제 여러분의 컴퓨터 속에만 있던 HTML/CSS 파일들이 인터넷을 통해 전 세계 누구에게나 보여질 수 있게 되었습니다.

 

오늘 소개한 Vercel 방식의 가장 큰 매력은 '유지 보수의 편리함'입니다. 앞으로 사이트 내용을 수정하고 싶다면, 복잡한 FTP 프로그램을 켤 필요 없이 그저 수정한 파일을 깃허브에 올리기만(Push) 하세요. 나머지는 베르셀이 알아서 척척 업데이트해 줄 겁니다.

 

---

만약 개인 도메인을 구매해서 연결하고 싶다면?

[사이트] Vercel 배포 사이트 개인 도메인 연결하기 (호스팅kr/DNS 설정)