Notion 기반으로의 홈페이지 개편

기존에 사용하였던 WordPress 기반의 홈페이지는 디자인은 유려한 편이었으나 최적화는 안중에도 없었던 탓에 PageSpeed 점수가 바닥을 기어다니는 것을 볼 수 있었다.

이로 인해 대안을 살피던 와중에 다른 사람들이 Notion을 기반으로 하는 홈페이지를 만드는 것을 보고 이를 사용하기로 결정하였고, 곧 작업에 착수하게 되었다.

개인적으로 사용하는 홈페이지에 Super, oopy.io 등의 유료 서비스를 사용하는 것은 부담이 되었기에 처음에는 Fruition을 사용하려고 했으나, 사용자화 측면에서 별로였고 무슨 이유에서인지 검색 엔진이 홈페이지 정보를 수집하지 못하는 것을 보고 다른 대안을 찾아보게 되었다.

이후 수소문 끝에 transitive-bullshit의 nextjs-notion-starter-kit을 발견하였고, 이를 기반으로 홈페이지를 개편하게 되었다.

기본적인 사용법은 다음과 같다.

• Github에 로그인하고 transitive-bullshit/nextjs-notion-starter-kit 레포지토리에 방문, 우측 상단 Fork 단추를 눌러 레포지토리를 포크한다.
• Git과 Node.js가 설치된 PC에서 git clone으로 레포지토리를 받는다.
• 최상위 디렉토리에 위치한 site.config.ts의 값을 적절히 수정한다.
• 터미널을 통해 디렉토리를 프로젝트 경로로 이동시킨 후, npm i를 통해 디펜던시를 설치한다.
• npm run dev를 통해 로컬 환경에서 테스트한 후, npm run deploy를 통해 Vercel로 배포한다.
  • 또는 build.yml을 적당히 편집하여 Github Actions를 통해 프로덕션 배포를 자동화할 수도 있다.

개편 후 60점대였던 PageSpeed 점수가 Desktop 기준 99점까지 올라와 만족하고 있다.