Skip to content

시작하기

2sky edited this page Nov 1, 2022 · 14 revisions

레포 클론 후 site.config.ts 만 수정하시면 바로 이용하실 수 있습니다.
아래 단계들을 따라와주세요 :)

❗️ 노션의 복제 기능을 사용시 이상하게 불러와지는 현상이 있습니다.
블로그로 사용하는 노션 페이지는 복제된 페이지가 아닌 직접 페이지를 만들어야합니다.

1. 커스텀한 소스 다운로드 받기

커스텀된 소스는 아래 링크를 확인해주세요.
릴리즈에서 소스를 다운 받으신 후 설정파일(site.config.ts)을 수정하면 바로 이용하실 수 있습니다.

GitHub - 2skydev/blog

2. 기본적인 사용방법

커스텀한 블로그 템플릿은 아래의 오픈소스 기반이므로 해당 깃허브 README.md에서 사용방법을 확인해주세요.

GitHub - transitive-bullshit/nextjs-notion-starter-kit - setup

3. 노션 데이터베이스 보기 형태 일치시키기

글 목록이 디자인에 맞게 나오려면 데이터베이스의 보기 형태가 저와 같은 형태 및 속성 순서가 맞아야합니다.
되도록 아래 링크에서 보이는것과 같이 형태와 속성의 순서가 일치하게 만들어주세요.

Notion - blog template

4. 기본으로 구성되어 있는 파일들 교체 및 제거

다운받으신 코드는 이미 제가 사용중인 블로그 소스이므로 필요없는 파일 및 교체해야 되는 이미지 파일들이 있습니다. 항목은 아래와 같습니다.

  1. naver-site-verification 파일 제거: /public/naverXXXXXXXXXXX.html
  2. 프로필 사진 변경: public/favicon-128x128.png, public/favicon-192x192.png, public/favicon.ico, public/favicon.png
  3. 로딩 효과 변경: public/loading.gif, components/PageLoading.tsx
  4. site.config.ts 변경: rootNotionPageId, name, domain, author, description, defaultPageIcon, navigationLinks, enableComment

5. Notion API 키 발급 & 환경 변수 설정

OG Image (social-image)와 댓글 기능은 Notion API를 사용합니다. 아래 문서 링크로 이동해 키 발급을 진행해주세요.

2skydev wiki - Notion API 키 발급 & 환경 변수 설정