1. 정적사이트 생성기 소개

 

요새 nextjs, gatsbyjs, hugo, jekyll 등 정적사이트 생성기를 이용하며 블로그를 많이 만들고 있습니다.

 

https://www.staticgen.com

 

위 링크에서 현재 인기있는 정적사이트 생성기에 대한 현황을 알 수 있습니다.

 

정적사이트의 장점은, 과거의 LAMP, LEMP로 대변되었던 웹사이트의 틀을 벗어나서 엄청나게 가볍고 빠르다는 점입니다.

 

그리고 보통 마크다운을 이용하여 문서를 생성 후 정적사이트 생성기를 통해 원하는 형태로 가공하여 보여줄 수 있습니다. 즉 하나의 소스로 여러 형태로 보여주는 API를 이용할 수 있습니다.

 

이는 한정된 방식으로 밖에 보여줄 수 없는 예전 사이트와는 접근 방법 자체가 다른 형태라고 볼 수 있습니다.

 

그래서 저도 ghost라는 nodejs로 돌아가는 플랫폼을 사용하여 운영하다가 gatsby로 넘어간 https://blog.wsgvet.com 사이트도 있습니다.

 

 

 

 

2. github를 통한 파일 관리

 

이제 정적사이트로 사이트를 만들 생각을 하셨다면 해당 파일을 관리하는 방법도 기존과는 다르게 생각해야 합니다.

 

기존에는 서버에 파일을 올리고 FTP나 SSH로 접근하여 직접 파일을 수정하였다면, 정적사이트에서는 집 컴퓨터나 외부에서 마크다운 문서를 생성 후 깃허브에 파일을 올려 저장하는 방식을 선택하는 것이 좋습니다.

 

물론 깃허브 이외에 Gitlab, Bitbucket으로 관리해도 됩니다.

 

깃허브를 이용할 경우 장점은 파일 저장공간이 무료라는 점입니다.

 

물론 기업형으로 쓰려면 과금을 하는게 좋겠지만, 개인사이트의 경우 무료로 충분한 공간을 제공해줍니다.

 

또한 이력관리가 가능하고, branch 생성을 통해 실제 어떻게 적용될지 미리 테스트해본 후 실제 사이트에 적용하는 것도 가능하구요.

 

이제 저장공간은 깃허브로 정하는 것으로 합니다. 더이상 서버에 파일을 보관하지 않아도 됩니다!

 

 

 

3. Vercel을 통한 배포

 

이제 사이트에 필요한 파일을 생성 후 깃허브에 저장까지 했습니다. 그러면 그 파일들을 실제로 사용자들이 볼 수 있게 빌드해서 뿌려줘야겠죠?

 

기존 사이트들은 서버에서 직접 구동해서 전세계에 뿌려줬는데요. 이렇게되면 서버의 CPU, RAM, SSD 등등 구입 및 관리해야 할 것이 매우 많고, 주기적으로 업데이트도 해줘야하고, 보안에도 신경써야 되고 비용도 많이 들죠.

 

이제 세상이 바뀌었습니다. 이런 서버도 필요없어졌습니다.

 

깃허브의 저장소에 있는 파일들을 받아서, 스스로 빌드한 뒤 전세계 CDN에 무료로 뿌려주는 서비스가 등장했기 때문입니다.

 

먼저 알려진 서비스로는 https://www.netlify.com 가 있습니다.

 

무료로 다 뿌려줍니다! 물론 기업용으로는 돈을 내야하지만 개인블로그 용도에서는 무료입니다.

 

하지만 Netlify의 단점은 CDN 서버가 우리나라에 있지 않다는 점입니다. CDN서버가 캐나다, 독일, 미국에 가까이 있어 우리나라에서는 TTFB가 300ms 정도로 약간 느린 편입니다. 

 

그래서 Vercel을 추천드립니다. Next js를 개발하고 있는 Vercel도 개인 취미용 사이트에게는 돈을 받지 않습니다. 완전 대인배입니다. 트래픽 비용도, 데이터 저장 비용도 받지 않습니다. 

 

그리고 결정적으로 CDN 서버가 우리나라, 캐나다, 미국 쪽에 특화되어 있습니다. 물론 유럽쪽 사용자가 많다면 독일 쪽에도 CDN 서버가 있어서 활성화됩니다. 제가 테스트해본 결과, 남아공을 제외한 거의 모든 나라에서 쉽게 접속이 되었습니다. 

 

Vercel은 우리나라에서 접속시 TTFB가 30~40ms로 서울에 위치한 CDN 서비스로는 최상급의 경험을 하게 해줍니다. 클라우드플레어는 국내 CDN 서버 비용이 비싸다며 엔터프라이즈급 이상의 과금유저에게만 서울 CDN 서버를 제공하는 것으로 알려져 있습니다.

 

참고로 어떤 서비스를 이용할 것인지 선택에 도움이 되는 글을 링크해드립니다.

 

https://taeny.dev/javascript/nextjs-with-deployment-platform/ 

 

무료 버전에서 어떤 제한사항이 있는지 쉽게 확인할 수 있습니다.

 

 

4. 깃허브 및 Vercel 가입하기

 

먼저 깃허브에 가입합니다. https://github.com

 

그리고 깃허브 계정으로 Vercel에 가입하여 연동합니다.

 

https://vercel.com/signup

 

위 링크에서 바로 연동할 수 있습니다.

 

이제 모든 준비는 끝났습니다. 

 

다음 글에는 Gatsby js 테마를 선택하여 자신의 홈페이지를 5분 안에 만드는 방법에 대해 알려드리겠습니다.

 

 

5. 참조링크

 

https://medium.com/javascript-in-plain-english/why-you-should-consider-using-a-static-site-generator-2eaff669259

 

https://www.netlify.com/jamstack/

 

https://jamstack.org/

 

[출처] https://www.wsgvet.com/staticsite/1