SSG(Static Site Generator)란?
정적 사이트 생성기로 번역할 수 있는 SSG는 누가 접속하든 항상 동일한 내용을 보여주는 웹사이트를 만드는데 최적화된 방법이다. 그래서 제품 카탈로그나 개인 블로그처럼 컨텐츠의 변경이 자주 일어나지 않는 비교적 소규모 웹사이트를 제작할 때 매우 유용하다. 대표적인 정적 사이트 생성 도구로는 Gatsby Hugo Jekyll Hexo 등이 있다.
SSG로 생성되는 웹사이트는 모든 웹페이지를 미리 만들어놓고 요청이 들어오면 만들어 놓은 웹페이지를 그대로 응답만 해준다. 따라서 서버와 클라이언트 측 모두 랜더링을 위해서 할 일이 별로 없기 때문에 속도가 매우 빠르다. 게다가 CDN(Content Delivery Network)을 활용하면 미리 만들어 놓은 웹페이지를 유저와 지리적으로 최대한 가까운 곳에 캐싱(catching)해놓을 수 있다.
SPA와 SSG, 그리고 SSR에서 참조하였다.
정적 사이트를 만들기 위한 프레임워크들은 다음과 같다
- Jekyll
- 루비 기반
- 가장 보편적이고 인기많은 정적 사이트 제작 프레임워크
- 문서가 많아지면 빌드하는데 5분이상이 소요될 수 있음
- 다양한 테마
- Hexo
- 자바스크립트(Node.js) 기반
- 한글 레퍼런스 꽤 많음
- 다양한 테마
- Hugo
- Golang 기반
- 매우 빠른 빌드속도
- 잘 정리된 문서화
- 사용할만한 테마는 부족
jekyll를 통한 github.io 만들기
이렇게 여러 프레임워크를 살펴본 후 가장 보편적인 Jekyll를 통해 github.io을 제작하기로 결정했다. 그리고 가장 먼저 jekyllthemes를 통해 테마를 결정하였다.
내가 선택한 테마는 tale이며 fork를 한 후 repository이름을 깃아이디.github.io로 변경하였다. 그 후 README.md를 참고하여 파일을 수정하였다.
그렇게 블로그가 완성되었나 싶었지만... 구글 검색이 되지 않는 중대한 문제점을 발견하였다!!
구글 검색 노출시키기
google search console을 통해 구글 검색 결과에 내 포스터를 노출시킬 수 있다.
구체적인 내용은 [Blog][Jekyll][Github io] 구글 검색 노출 시키기에서 확인할 수 있다. 다만 사이트맵의 경우 해당 블로그의 내용을 참고해도 계속 오류가 발생했다. 이에 따라 sitemap에서 내 사이트의 사이트맵을 생성한 후 repository 루트폴더에 추가하였다.
그 후 site:boyon99.github.io를 구글 검색 엔진에 검색하니 다음과 같이 내 블로그의 게시글이 검색된 것을 확인할 수 있었다.
후기
처음에는 이렇게 생성한 블로그를 통해 코딩에 관한 글들을 올릴려고 했었다. 그렇지만 내가 직접 블로그의 디자인과 기능을 결정할 수 있다는 부분에서는 매력적이지만 단절된 느낌과 번거로움이 느껴져서 결국 velog로 이동하게 되었다.
그래도 이렇게 github.io를 통해 만든 블로그를 잠시마나 운영하며 SSG에 대해 깊이 이해할 수 있던 시간이었다.
다음은 내 깃허브 블로그 주소이다.
