Static Site Generators 선택하기

블로그를 작성하기 위한 사이트를 만들고 싶었다. 그를 위해선 동적을 사용할 필요가 없고 빠르게 로드되기 때문에 정적 사이트를 구축해보고자 한다. 기존에는 그냥 유튜브에서 다들 Jekyll로 만드는 법을 알려주기에 그 방법밖에 없는 줄 알고 사용했다. 그러다가 문득 React를 배웠는데 왜 Liquid 문법으로 하고 있는거야… 싶어서 React로 할 수 있는 방법이 없나 찾아봤다. 그랬더니 세상에…! 선택지가 굉장히 많았었다.

다양한 라이브러리나 프레임워크가 존재한다.

• Next.js : React
• Gatsby : React
• Nuxt : Vue
• Eleventy : Liquid, Javascript, Markdown 등
• Astro : React, Vue, Svelte 등
• Jekyll : Ruby, Liquid
• Hugo : Go
• VuePress : Vue

정말 많은데 일단 React를 공부했기 때문에 템플릿이 React나 HTML, Markdown, JS인 것만 추려보겠다. 템플릿은 여기서 참고했다.

• Next.js
  • 플러그인 라이브러리가 없음
  • SSR이 필요하면 구현 가능
• Gatsby
  • 플러그인 라이브러리가 있음
  • GraphQL 기반이므로 학습해야 함
• Astro
  • 다양한 템플릿 언어로 작성할 수 있음
  • next, gatsby에 비해 적은 코드를 제공하기에 빠름
  • Astro islands으로 성능이 좋음
• Eleventy
  • 유용한 플러그인 세트가 포함되어 있음
  • 다양한 템플릿 언어로 작성할 수 있음
  • Jekyll의 JS 대안으로 소개된 SSG로 발전했기에 Liquid에 의존하여 Jekyll과 유사함

Next.js와 Gatsby도 좋지만 블로그 글에 좀 더 신경쓰고 싶어 콘텐츠 중심인 Astro와 Eleventy를 고민했다. 둘 다 속도도 빠르고 사용하기 편하다는 장점이 있었으나 개인적으로 가독성면에서 Astro 문서가 더 좋았기에 Astro를 선택했다.