[WEB] Notion 기반 블로그 만들기 2

[WEB] Notion 기반 블로그 만들기 2

태그
web
js
생성 일시
Jan 27, 2024 05:04 AM
최종 편집 일시
Last updated February 2, 2024
Date
  1. 왜 노션인가?
  1. 기본 구성
  1. 배포
  1. 기타 기능 추가

서론

한달 전에 작성한 이전 글에서 “블로그”의 본질을 가장 잘 살릴 방법이 Notion 기반 블로그라고 생각해 이를 이용해 블로그를 구축하기로 정했다. 그렇다면 이를 어떻게 만들까? 이번 글에서는 localhost에서 작동하는 블로그를 구축한다.
notion image

사용할 템플릿

정말 여러가지의 템플릿이 존제한다. 이 포스트 에서는 blgo.jeje.work를 구축하는데 사용한
nextjs-notion-starter-kit
transitive-bullshitUpdated Jun 6, 2025
를 사용할 것이다.
nextjs-notion-starter-kit
transitive-bullshitUpdated Jun 6, 2025
React와 Next.js에 대한 선행 지식이 있다면 더욱 원활하게 진행할 수 있습니다.

템플릿 받기

위 깃허브 레포에서 포크를 받는다.

notion image

notion image
jeje-code-note-eng
jjh4450Updated Apr 28, 2024
본 포스트에서는 현재 블로그의 영문 버전을 만드는 과정을 예제로 탑재합니다.

편집기에서 포크한 레포를 연다.

notion image
 

yarn설치

yarn이란? 자바스크립트 프로젝트를 위한 패키지 관리자이다. 페이스북에서 개발했으며, npm에 비해 빠른 속도와 더 안정적인 패키지 설치를 지원한다고 한다.
node(all version)
npm install --global yarn
OR
node(≥v16.9.0, v14.19.0 and have an understanding of corepack)
corepack enable (안되면 관리자 권한으로 실행)
위의 버전은 구버전 공식 doc의 설치 방식이며 그 아래는 최신 버전 doc의 방식이다. 필자는 후자의 방식으로 진행했다. 만약 문제가 있을 경우 전자를 사용해도 전혀 문제없다. (참고문헌 1번 참조)
 

필요 패키지 설치

yarn install
반드시 yarn.lock파일과 동일한 경로에서 명령을 실행해야 한다. 그렇지 않다면 오류가 발생한다.
 

실행을 해보자!

yarn run dev
notion image
본 프로젝트는 next.js를 사용하며, 위 명령어는 yarn과 관련 없는 next.js프로젝트를 실행하는 명령어 입니다.
위와 같이 나타난다. 이제 내가 원하는 노션 페이지를 구축할 차례다.

노션 구성

notion image

템플릿에 적용하기

노션 페이지를 적절한 위치에 구성한다.

notion image
 

노션 페이지를 publish 해준다.

notion image
우측상단 Share → Publish → Publish버튼 클릭
 

생성된 링크를 복사해 브라우저에서 열어본다.

notion image
노션의 자체 기능으로 생성된 블로그가 보인다. 하지만 우리는 커스텀을 더 자유롭게 하고 싶다.
 
  • 위 이미지에서 가려진 뒷부분이 있다. 저걸 복사하자.
notion image
 
  • 위에 해당되는 부분을 site.config.ts 파일의 rootNotionPageId에 붙여 넣는다.
notion image
 
  • 그런 다음 새로고침을 한다면 아래와 같이 정상적인 페이지가 노출된다!
notion image

꾸미기

notion image
이제, 다시 노션으로 가서 기본적인 구성을 해보자.
이하의 내용은 다음 템플릿을 참고했으며, 아래 템플릿을 이용해 바로 적용해도 좋습니다.
Next.js Notion Starter Kit Template
Next.js Notion Starter Kit Template
(starter kit 개발자가 추천하는 노션 템플릿)
slug 추가 항목은 반드시 정독하기 바랍니다.

Gallery view 를 추가한다.

notion image
 

새로운 database를 만들어 준다.

notion image
노션을 CMS로 쓰면 움짤 올리기도 편합니다!
 

기본 페이지를 지운뒤 새로운 페이지를 추가한다.

notion image
 

간단하게 내용을 구성한다.

notion image

다시 페이지를 확인해 본다.

notion image
서버 실행 명령어는 yarn run dev 입니다
뭔가 상태가 이상하다…

게시글에 커버 이미지를 넣는다.

notion image

Gallery view에서 미리 보여줄 항목을 Page Cover로 변경한다.

notion image
상단 설정 버튼 클릭 → Lay out → Card preview → Page Cover 선택

적용 됐는지 확인한다.

notion image

기타 설정

notion image
글의 태그/편집,생성 날짜/url slug등을 설정할 것이다.
기타 설정이지만 이 항목까지 완료하는 것을 적극 추천한다.

+ 를 눌러서 Table view를 추가한다.

notion image

편집 날짜를 추가한다.

notion image
관련된 설정은 자유롭게 하면 된다.

slug추가(중요)

slug란? 슬러그는 URL에서 페이지를 구별하는 마지막 부분이다. 예를 들어, "https://jeje.work/WEB-Notion-1"에서 슬러그는 "WEB-Notion-1"이다. 이를 사용하면, 사용자가 URL만 보고도 페이지의 내용을 짐작할 수 있다.
의외로 이 부분이 상당히 중요한데, 한국어 사용자로는 상당히 화나는 최적화(?)가 들어가 있기 때문이다. 노션의 페이지 제목 구성은 영문 제목-해시값으로 구성된다. 그런데 제목이 한국어로만 되어 있다면 어떨까? 위에서 영문 제목 부분이 없어지고 해시값만 남는다. 여기서 치명적인 문제가 발생하는데, 이 템플릿은 해시 부분을 날려버리는 최적화가 진행된다!
참고(펼쳐 보기)

The app defaults to slightly different URL paths in dev vs prod (though pasting any dev pathname into prod will work and vice-versa).
In development, it will use /nextjs-notion-blog-d1b5dcf8b9ff425b8aef5ce6f0730202 which is a slugified version of the page's title suffixed with its Notion ID. I've found that it's really useful to always have the Notion Page ID front and center during local development.
In production, it will use /nextjs-notion-blog which is a bit nicer as it gets rid of the extra ID clutter.
앱은 개발 환경과 프로덕션 환경에서 약간 다른 URL 경로를 기본적으로 사용합니다(개발 경로를 프로덕션에 붙여넣어도 작동하며, 그 반대의 경우도 마찬가지입니다.)
개발 중에는, 페이지의 제목을 슬러그화한 후에 Notion ID를 접미사로 붙인 /nextjs-notion-blog-d1b5dcf8b9ff425b8aef5ce6f0730202를 사용합니다. 로컬 개발 중에 Notion 페이지 ID를 항상 전면에 두는 것이 매우 유용하다는 것을 발견했습니다.
프로덕션에서는, 추가 ID 잡음이 없어져 좀 더 깔끔한 /nextjs-notion-blog를 사용합니다.

그렇기에 영어가 아닌 제목이 있는 글은 배포시 404에러가 발생한다. (관련 깃허브 이슈) 마음 같아서는 템플릿을 갈아엎고 싶지만, 그러면 배보다 배꼽이 더 커지기 때문에 주어진 slug 편집 기능을 사용할 것이다.
notion image
반드시 대문자 Slug야 한다. slug는 작동하지 않는다.
이제 언제든지 404에러가 뜬다면 slug 부분에 해시값을 입력하면 된다. → 추후 배포시 실습 예정
그리고 포스트 내부에 slug항목이 보이지 않도록 수정한다.
notion image
 

Gallery view 편집

마지막 단계다! Table view는 관리의 편의를 위해 추가한 내용으로, 실제 블로그에서는 반영되지 않는다. Gallery view를 편집하고 사용자들이 필요한 내용을 목록에서 바로 볼 수 있게 구성하자.
notion image

마무리

notion image
이렇게 노션을 CMS로 사용하는 블로그를, 템플릿을 통해 빠르게 구축 해봤다. 본래 vercel을 통한 배포까지 빠르게 진행하고자 했으나, 내용이 많이 길어진 관계로 다음 포스트로 넘긴다. 이제 배포까지 진행한다면 자신의 블로그를 가지게 되는 것이다!
수고하셨습니다!
질문과 피드백은 언제나 환영입니다.
참고문헌