Reviews

Notion Starter Kit 사용기

입맛에 맞춰 수정해나가며

2024-10-21

🖥️ 시작하며

이제는 마크다운 없이는 살 수 없는 몸이 되어버렸다. 그래서 원래 써오던 tistory는 아예 손을 놓은 지 오래되었고, 개발자들이 많이 쓴다던 Velog도 도전해봤지만 뭔가 맘에 들지 않았다.

Tistory + Velog

역시 가장 마음에 드는 것은 Noiton. 블록 단위라는 신기한 특징과 마크다운 기반, 그리고 디자인이 예쁘다는 것이 참 맘에 들었고 공부했던 기록들을 모두 노션에 기록하고 있었다.

최근 들어 Notion에서 자체적으로 블로그 기능을 제공하지만, 아직 구글 검색 엔진에 제대로 노출되지도 않고 부족한 부분이 많다. 물론 몇 년 안으로 진짜 노션만으로 블로그 서비스를 제공할 만큼 발전할 것 같지만.. 노션 템플릿을 기반으로, 노션에서 쓴 게시글들을 수정 없이 어떻게 블로그로 운영할까 고민하다가 역시 그러한 기능을 구현한 템플릿이 있길래 바로 사용해봤다.

Notion + Next.js blog starter kit이라는, Next.js를 이용해 리팩토링하는 템플릿인 것 같은데 디자인이 마음에 들어서 바로 적용해보았다. 이 킷을 이용한 나의 개인 블로그는 여기로 가면 구경할 수 있다.

템플릿을 사용하며 수정한 점

alt text

전체적으로 모두 마음에 들었다. 라이트모드/다크모드 지원하고, 내부 레이아웃과 디자인도 마음에 들었는데 개인적으로 몇 가지 수정했다.

sitemap.xml 생성 방식 수정

왜인지는 모르겠지만, fork해서 그대로 사용했더니 sitemap.xml이 제대로 생성되지 않는 오류가 존재했다. 그래서 기존에 존재하던 sitemap.xml.tsx 파일을 아예 삭제 후 모듈을 활용하는 방식으로 수정했다.

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "postbuild": "next-sitemap", // 추가
    "start": "next start",
    "deploy": "vercel deploy",
    "deps": "run-s deps:*",
    ...
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-react": "^7.29.4",
    "eslint-plugin-react-hooks": "^4.3.0",
    "next-sitemap": "^4.2.3", // 추가
    "npm-run-all": "^4.1.5",
    "prettier": "^2.4.1",
    "typescript": "^4.8.3"

// next-sitemap.js
module.exports = {
	siteUrl: "https://docs.reo91004.com", // 실제 도메인 주소로 변경
	generateRobotsTxt: true, // robots.txt 파일도 생성
	robotsTxtOptions: {
		policies: [
			{ userAgent: "*", allow: "/" },
			// 추가적인 정책이 필요하면 여기에 작성
		],
		sitemap: "https://docs.reo91004.com/sitemap.xml", // Sitemap 위치
	},
};

Page에서 Aside에 toc 띄우기

기본적으로 toc가 띄워지도록 되어 있지만, 페이지 내의 페이지에는 toc가 나타나지 않아 이를 수정했다.

  // 2024-09-12 수정
  // 각 카테고리 parent_id를 지정했는데, 더 좋은 방법이 있기 전까지 사용
  if (
    block?.parent_id === '{각 노션 페이지 ID}' ||
    block?.parent_id === '{각 노션 페이지 ID}'
    block?.parent_id === '{각 노션 페이지 ID}' ||
    block?.parent_id === '{각 노션 페이지 ID}' ||
    block?.parent_id === '{각 노션 페이지 ID}' ||
    block?.parent_id === '{각 노션 페이지 ID}' ||
    block?.parent_id === '{각 노션 페이지 ID}' ||
    block?.parent_id === '{각 노션 페이지 ID}'
  ) {
    isBlogPost = false;
  }

여기서 각 노션 페이지 ID 의 의미는, 카테고리에 존재하는 페이지들은 toc가 주어질 이유가 없으므로 이를 제외하기 위해 수동으로 추가했다.

// 2024-09-12 수정
// 각 카테고리 parent_id를 지정했는데, 더 좋은 방법이 있기 전까지 사용
if (
    block?.parent_id === '{각 노션 페이지 ID}' ||
) {
    isBlogPost = false;
}

이외에도 여러 가지 수정했는데, 이 템플릿의 가장 큰 문제점은 Vercel에 배포 후 블로그에 매핑된 이미지가 대략 2일 정도 지나면 만료되어 깨진다는 점이다. 이를 해결한 분들도 계시던데(구글에 쳐보면 나오긴 한다), 본인은 아직 해결을 못해서.. 그냥 생각날때마다 다시 Deploy 하는 식으로 해결하고 있다.

앞으로도 노션에 기록할 것이기 때문에 이 툴킷을 사용하긴 하겠지만, 지금 노션에서 기본적으로 제공하는 도메인과 디자인이 괜찮아서 조금 고민 중이다. 어차피 서치 콘솔에 이 툴킷이 제대로 노출되지 않기도 하고..