정적 사이트 생성기 (SSG, Static Site Generator) 로 나만의 블로그를 만들어보자

Static Site Generator

[ 목차 ]

오늘은 정적사이트 생성기 (SSG, Static Site Generator)에 대해 알아보겠습니다.

 

1. 정적사이트(SSG) 생성기란?

정적사이트 생성기는 말 그대로 정적 사이트를 생성하는 도구를 말하는데요, 정적 사이트란 항상 동일한 내용을 보여주는 사전에 빌드된 HTML, Javascript 및 CSS 코드로 구성된 사이트를 일컫는 말입니다. 이러한 웹페이지는 이미 서버 측에서 미리 렌더링된 후 브라우저에 제공되기 때문에 페이지를 더 빠르게 로드할 수 있습니다. 그래서 개인 블로그 등 컨텐츠 변화가 자주 일어나지 않는 소규모 웹사이트 제작시 많이 이용되고 있습니다. 대표적인 도구로는 Jekyll, Gatsby, Hugo 등이 있습니다.

 

  이것만 알면 뭔가 부족한거 같아서 몇가지 개념을 좀 더 알아보겠습니다. 정적 사이트 생성기가 있으면 동적 사이트 생성기도 있을까요? 비슷한 의미로 쓰이는 SSR이라는 개념이 있습니다. SSR은 Server Side Rendering의 약자인데 말 그대로 클라이언트로부터 요청이 들어오면(들어올 때마다) 실시간으로 서버에서 웹페이지를 만들어내는 기술입니다. 대표적으로는 React 기반의 Next.js와 Vue.js 기반의 Nuxt.js, 그리고 Svelte 기반의 SvelteKit이 있습니다. React, Vue.js, Svelte는 SPA라고 합니다. SPA는 Single Page Application의 약자로 우리말로 하면 단일페이지 어플리케이션이 되겠습니다. 웹사이트의 전체 페이지를 하나의 페이지에 담아 클라이언트측에 내려주고, 클라이언트의 반응에 따라 동적으로 화면(데이터)을 변경하는 기술을 말합니다. SSR과는 달리 페이지를 클라이언트측에서 모두 처리하죠. 

 

 

2. 정적 사이트 생성기의 종류

정적 사이트 생성기는 아래 그림에서 보이듯이 매우 다양합니다. Next.js와 .Nuxt.js는 SSR기술이라고 설명드렸는데, 주 용도는 SSR이지만 SSG로 사용할 수도 있는 옵션(방법)을 제공합니다.

 

- React 기반: Next.js, Gatsby, Docusaurus

- Vue.js 기반: Nuxt.js, Vuepress, Gridsome

- Javascript 기반: Hexo, Docsify, Eleventy

- Go 기반 : Hugo

- Ruby on Rails 기반 : Jekyll

- Python 기반 : pelican

 

[ 정적사이트 생성기 Github Star Ranking ]

Static Site Generator

저도 SSG를 React, Vue.js 등을 공부하며 알게된 터라 Gatsby 그리고 오래전부터 쓰인 Jekyll정도 알고 있었는데, 정말 다양한 SSG가 존재하네요. 그리고 Go언어로 작성된 Hugo의 인기가 굉장한 것 같아요. 속도 하면 역시 Go언어를 따라올 만한게 별로 없을 것 같네요.

 

3. 정적 사이트 생성기 (SSG) 테마

정적사이트 생성기는 다양한 테마를 적용가능한 장점도 있습니다. 이 테마를 이용한 Starter Kit을 통째로 설치해서 쉽게 시작할 수 있죠. 다양한 SSG의 테마를 한곳에서 확인할 수 있는 사이트에 대해 알려드리려고 합니다.

 

Jamstack Themes

Jamstack Themes

위 사이트에서는 각종 정적사이트 생성기(SSG, Static Site Generator)에서 사용 가능한 테마를 보여줍니다. 해당 사이트로 이동하여 상단에 All Themes를 클릭하세요. 전체 테마 리스트를 보여줍니다. 

Static Site Generator Theme

테마의 수로는 Jekyll > Hugo > Gatsby > Next.. 순입니다. Github Start 랭킹과도 통하는게 있네요. 오래전부터 쓰이던 Jekyll이 테마가 제일 많고, Go언어의 Hugo가 역시 엄청난 인기에 힘입어 테마도 많다고 판단해야겠죠? 뒤이어 Gatsby가 나오네요. 제가 좋아하는 vue관련된 SSG (Vuepress, Gridsome)의 테마는 거의 없다고 봐도 무방하겠네요^^;; (바꿔야되나..) 다양한 테마의 github 레포지토리를 여러분의 레포지토리에 복사 (또는 Netlify에 배포하면서 동시 복사)해서 사용해보시기 바랍니다.

 

분이라면 어떤게 좋을 것 같나요? 이쁜 테마를 골라서 Netlify나 Github 등에 배포하고 나만의 멋진 블로그를 만들어보세요.^^

 

그럼 이만~~