yongckim/Hugo + github 블로그 만들기 - 2

Created Wed, 17 Nov 2021 00:26:21 +0900 Modified Sat, 20 Nov 2021 20:52:04 +0900
1897 Words

github 블로그란?

Github 블로그란 Github 저장소에 저장된 html 파일과 같은 정적 웹 문서들을 Github 에서 무료로 웹에서 볼 수 있도록 호스팅 서비스를 제공해 주는 것입니다.

Github를 이용하는 사용자들은 누구나 고유의 정적 웹 사이트 1개를 가질 수 있습니다.

Github 블로그를 만들기 위해서는 신규 repository의 이름을 <Github id>.github.io 으로 만들면 됩니다.

사이트 꾸미기

Github 블로그를 만드는 것 자체는 간단했지만 막상 꾸미려고 하니 HTML/CSS에 대한 지식이 없어 블로그를 제대로 사용할 수 없었습니다.

그래서 구글링을 통해 방법을 찾아보던중 정적 웹사이트 생성기에 대한 내용을 찾게 되었고 Github 블로그를 사용할 때 많이 사용한다는 것을 알게 되었습니다.

🌐 정적 사이트 생성기?

🌐 정적 사이트?

정적 사이트 생성기에 대해 알아보기 전에 먼저 정적 사이트란 것 조차 잘 몰랐기 때문에 먼저 해당 내용을 찾아보았습니다.

정적 사이트는 정적 페이지로 이루어진 사이트를 의미한다는 것을 알게 되었습니다.

🌐 정적 페이지와 동적 페이지

그렇다면 정적 페이지는 무엇일까요?

정적 페이지란 서버에 미리 저장된 파일(HTML 파일, image 파일, JavaScript 파일)이 그대로 전달되는 웹 페이지를 의미합니다.

서버는 사용자(클라이언트)가 요청을 보내면 요청에 해당하는 웹 페이지를 보냅니다.

그래서 사용자는 서버에 저장된 파일이 변하지 않는 이상 고정된 웹 페이지를 보게 됩니다.

그렇다면 정적 페이지를 사용했을 때 장 단점은 무엇이 있을까요?

정적 페이지의 장점은 다음과 같습니다.

  • 요청에 대한 파일만 전송하면 되기 때문에 빠른 속도로 요청이 처리됩니다.

  • 단순한 파일들로만 이루어져 있어 어떤 호스팅 서버에서도 동작 가능하므로 구축하는데 드는 비용이 적습니다.

정적 페이지의 단점은 다음과 같습니다.

  • 요청받은 웹 페이지를 보내주는 것이기 때문에 서비스가 한정적입니다.

  • 웹 페이지에 기능을 추가, 수정, 삭제하는 것이 수동으로 이루어지기 때문에 관리가 힘듭니다.

이에 반해 동적 페이지는 사용자가 정보를 요청하면 해당 요청을 처리하여 가공한 결과물에 해당하는 웹 페이지를 보내게 됩니다.

사용자는 같은 페이지라도 상황, 시간, 요청 등에 따라 달라지는 웹 페이지를 보게 됩니다.

동적 페이지는 다음과 같은 장점을 가지고 있습니다.

  • 사용자로 부터 받은 요청을 다양한 정보를 조합하여 웹 페이지를 제공하기 때문에 서비스가 정적 페이지보다 다양합니다.

  • 웹 사이트 구조에 따라서 추가, 수정, 삭제를 사용자가 할 수 있기 때문에 관리가 쉽습니다.

동적 페이지는 다음과 같은 단점을 가지고 있습니다.

  • 사용자에게 웹 페이지를 전달하기 전에 처리하는 작업이 필요하기 때문에 상대적으로 느립니다.

  • 웹 서버에 이외에 추가적으로 처리를 위한 어플리케이션 서버(WAS)가 필요하기 때문에 추가 비용이 들 수 있습니다.

그렇다면 정적 페이지로 구성하는게 좋을까요? 동적 페이지로 구성하는게 좋을까요?

자주 변경되지 않는 페이지 같은 경우에는 비용과 속도 측면에서 더 뛰어난 정적페이지로 사이트를 구성하는 것이 좋습니다. 블로그 같은 경우 요청을 받아 따로 처리할 필요가 없으므로 정적 페이지로 사이트를 구성해도 충분합니다.

🔙 다시 본론으로 돌아가서 정적 사이트 생성기란?

정적 사이트 생성기란 말 그대로 정적인 웹 사이트를 생성해주는 툴입니다.

일반적으로 마크다운 파일을 읽어 HTML을 생성하는 기능을 가집니다.

워드프레스 같은 경우 서버와 데이터베이스를 이용해 사용자가 페이지를 방문할 때마다 동적으로 웹 페이지를 생성한다면 정적 생성기는 미리 HTML을 생성해 서버에서는 해당 파일을 제공하도록 하면 됩니다.

정적 사이트 생성기를 이용해 웹 사이트를 이용하면 서버나 데이터베이스를 관리해야 하는 부담이 적어지고 이미 만들어져 있는 페이지만 제공하면 되니 빠른 웹 페이지 로딩이 가능하다는 장점이 있습니다.

대표적인 정적 사이트 생성기는 Jekyll, Hugo, Gatsby 등이 있습니다.

대표적인 정적 사이트 생성기

  • Jeklly

    Ruby로 제작된 정적 사이트 생성기이며 가장 유명하고 많이 사용되는 생성기 입니다.

    장점은 많이 사용되는 만큼 테마나 플러그인 등이 제일 많이 있습니다.

    단점은 빌드할 페이지의 수가 많아질수록 기하급수적으로 빌드 속도가 느려집니다.

  • Hugo

    go로 제작된 정적 사이트 생성기이며 현재 가장 많은 스타수를 보유하고 있습니다.

    장점은 정적 사이트 생성기 중에서 가장 빠른 빌드 속도를 목표로 삼은 만큼 빌드 속도가 빠릅니다.

    단점은 한글로 되어있는 문서가 적습니다.

  • Gatsby

    React와 Graphql을 사용하는 정적페이지 생성기입니다. Gatsby JS는 가공할 정보를 GraphQL에서 가져와서 빌드 시점에 정적 페이지를 만들어 내는 방식을 가지고 있습니다.

    장점은 더 빠르고 안전한 콘텐츠 제공이 가능합니다.

    단점은 서비스가 커질수록 빌드시간이 늘어납니다.

Hugo를 선택한 이유

Hugo는 정적 사이트 생성기 중에서 가장 빠른 빌드를 목표로 삼은 만큼 빌드 속도가 매우 빠르기 때문에 선택했고 또한 Go언어에 관심이 많기 때문에 Go를 사용한다는 것에 부담이 없었습니다.

이러한 이유로 Hugo를 선택하게 되었습니다.