NotionNext 문서

Appearance

Vercel에 NotionNext 배포하기 ​

이전 원문: Vercel에 NotionNext 배포하기 게시일: 2023-2-10 마지막 편집: 2026-5-2 원래 분류: 🚀 설치와 배포 태그: NotionNext, 배포 방식 요약: Vercel은 해외 Serverless 호스팅 플랫폼입니다. 개인 사용자는 거의 무료로 편리하게 사용할 수 있으며, Notion 사이트를 Vercel에 호스팅하면 서버 유지보수와 비용 문제를 직접 신경 쓰지 않아도 됩니다.

들어가기 전에 ​

이 튜토리얼을 따라 하면 Vercel에 NotionNext 블로그를 무료로 만들 수 있습니다.

❓

NotionNext는 완전 오픈소스 무료 사이트 구축 스크립트이며, Notion 노트를 실시간으로 블로그로 렌더링합니다.

Vercel은 해외 온라인 스크립트 호스팅 플랫폼입니다. 개인 사용에는 무료 버전으로도 충분하므로, 서버를 직접 구매하지 않고도 자신의 웹사이트를 만들 수 있습니다.

사이트 효과 미리보기: https://preview.tangly1024.com/. 사이트 왼쪽 아래 아이콘을 클릭하면 테마 전환을 체험할 수 있습니다.

image.png

더 많은 구축 사례를 보려면 친구 링크 페이지를 방문하세요: https://blog.tangly1024.com/links

배포 단계 ​

사이트 배포는 세 단계면 됩니다.

  1. Notion 템플릿 복사
  2. GitHub 소스 코드 fork
  3. Vercel에서 원클릭 배포

이 배포 문서는 많은 사용자가 실제로 검증했습니다. 그래도 독립 배포가 어렵다면 도움 요청을 고려할 수 있습니다.

영상 도움말 ​

전체 배포 과정을 보여 주는 1분 38초 분량의 간단한 영상이 있지만, 최종 기준은 이 문서입니다.

https://player.bilibili.com/player.html?aid=913088616&bvid=BV1fM4y1L7Qi&cid=1203316294&page=1

1. Notion 페이지 만들기 ​

템플릿 복사 ​

  1. 먼저 Notion 계정을 등록하고 로그인합니다.

  2. 아래 링크를 클릭해 템플릿을 엽니다.

Notion Blog

NotionNext로 만든 블로그입니다.

  1. 오른쪽 위의 Duplicate를 클릭해 템플릿을 복사합니다. 클릭하면 이 블로그 데이터 템플릿이 자신의 Notion 워크스페이스로 복사됩니다.

오른쪽 위의 Duplicate를 클릭해 템플릿을 복사합니다

페이지 ID 가져오기 ​

  1. Notion 페이지 오른쪽 위 메뉴에서 Share -> Published -> Share To Web 순서로 클릭해 페이지 공유를 켜고 공유 링크를 가져옵니다.
    • 아래 그림처럼 오른쪽 위 Share를 클릭하고, 팝업에서 Publish -> Share to web을 클릭합니다.

Untitled

  1. 페이지 ID를 복사합니다.

페이지 ID는 공유 링크 안에 있는 32자리 영문자와 숫자 문자열입니다.

Untitled

페이지 ID 식별 방법

페이지 ID는 Notion 공유 링크 안에 있는 연속된 32자리 영문자와 숫자입니다. 이 32자리 문자열만 복사하세요. ?v=, ?pvs=와 그 뒤 매개변수는 복사하지 않습니다.

예시 1:

https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5?v=b7eb215720224ca5827bfaa5ef82cf2d

여기서 페이지 ID는:

02ab3b8678004aa69e9e415905ef32a5

예시 2: 새 Notion 링크는 페이지 제목을 URL에 넣을 수 있습니다.

https://www.notion.so/tanghh/Today-261c36d269a74acd97682af86d7bc9a0?pvs=4

여기서 페이지 ID는:

261c36d269a74acd97682af86d7bc9a0

이 페이지 ID를 기록해 두세요. 3단계에서 환경 변수를 설정할 때 사용합니다.

2. 소스 코드 복사 ​

💡

일부 국내 이메일 서비스는 Vercel 로그인 후 계정 차단 안내가 뜰 수 있습니다. 가능하면 Hotmail, Gmail 같은 국제 이메일을 사용하는 것을 권장합니다.

  1. 먼저 GitHub 계정을 등록하고 로그인합니다.

  2. 아래 링크를 클릭하면 프로젝트를 한 번에 Fork할 수 있습니다.

Build software better, together

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

3. Vercel 배포 ​

계정 준비 ​

Vercel에 등록하고 로그인합니다. 여기서는 GitHub 계정 로그인을 권장합니다.

Untitled

Vercel 계정 등록 시 만날 수 있는 문제

등록 시 Error:This user account is blocked.Contact support@vercel.com for more information.가 표시될 수 있습니다. 이는 Vercel이 일부 국내 이메일을 지원하지 않기 때문일 수 있습니다. GitHub 계정의 기본 이메일을 Gmail로 바꾸면 해결될 수 있습니다.

다만 커뮤니티 사용자 피드백에 따르면 GitHub 기본 이메일을 Gmail로 바꾼 뒤 Vercel이 휴대폰 번호 인증을 요구하는 경우가 있습니다. 그러나 GitHub에는 휴대폰 번호 바인딩 기능이 없습니다.

따라서 처음 GitHub 계정을 만들 때부터 Gmail 같은 해외 이메일을 사용하는 것을 권장합니다.

  1. Gmail 접근 방법:
    • QQ 메일 모바일 버전은 Gmail 접근 경로를 제공하므로 등록과 사용에 활용할 수 있습니다.
    • Ghelper 같은 브라우저 확장으로 접근할 수도 있습니다. 자세한 내용은 이 글을 참고하세요: Microsoft Edge 활용
  2. 현재 GitHub 계정을 계속 사용하고 싶다면:
    • Gmail 같은 해외 이메일을 등록한 뒤 github -> avatar -> settings -> Emails에서 Add email address를 클릭하고 이메일 인증을 완료합니다. Add email address 아래의 Primary email address 옵션에서 Gmail을 기본 이메일로 설정합니다.

코드 가져오기 ​

  1. 아래 링크를 클릭해 새 프로젝트를 만듭니다.

New Project - Vercel

To deploy a new Project, import an existing Git Repository or get started with one of our Templates.

  1. 코드 저장소 목록에서 NotionNext를 선택해 가져옵니다.

2. NotionNext 프로젝트 가져오기 클릭

💡

주의: 여기서는 천천히 진행하세요. 페이지의 Deploy 버튼을 바로 누르지 말고 아래 튜토리얼을 먼저 확인합니다.

페이지 ID 설정 후 배포 ​

  1. Environment Variables를 클릭하고 이름이 NOTION_PAGE_ID인 속성을 추가합니다. 값에는 1단계에서 가져온 페이지 ID를 입력합니다.

예를 들어 내 페이지 ID가 02ab3b8678004aa69e9e415905ef32a5라면 다음처럼 설정합니다.

왼쪽에는 NOTION_PAGE_ID, 오른쪽에는 페이지 ID 값을 입력합니다

입력한 뒤 오른쪽의 Add 버튼을 클릭해 추가를 확정해야 합니다.

  1. Deploy 버튼을 클릭하고 약 2분 동안 배포가 완료되기를 기다립니다.

1. Deploy를 클릭해 자동 배포

4. 완료 ​

  1. 배포 완료 페이지에서 Go to Dashboard를 클릭해 콘솔로 이동합니다.

Untitled

  1. 콘솔 오른쪽 위의 Visit 버튼으로 사이트에 방문합니다. 또는 DOMAINS에서 웹사이트 주소를 확인합니다.

2. Vercel 콘솔에서 접속 주소 확인

주의 사항 ​

💡

NotionNext는 Notion 노트 내용을 실시간으로 가져옵니다. 캐시와 네트워크 지연 때문에 최대 두 번 정도 새로고침해야 동기화 결과가 보일 수 있습니다.

⚠️

사이트가 계속 Notion 데이터와 동기화되지 않는다면 위 단계를 다시 확인하거나 처음부터 다시 진행하세요.

  1. Notion에서 NOTION_PAGE_ID 형식이 올바른지, 페이지 공유가 켜져 있는지 확인합니다.
  2. Vercel 백엔드 환경 변수에 NOTION_PAGE_ID가 설정되어 있는지 확인하고, 다시 설정한 뒤 Redeploy를 시도합니다.

Vercel 백엔드 환경 변수 설정 확인 방법: Untitled

재배포 방법: Untitled

사이트 사용자 지정 ​

여기까지 진행했다면 독립 블로그가 생긴 것입니다. 사이트의 제목, 설명, 아바타, 메뉴 등 모든 설정은 자유롭게 사용자 지정할 수 있습니다.

다음으로 아래의 NotionNext 사용 설명서를 참고해 더 많은 사이트 설정 방법을 확인하세요.

NotionNext 빠르고 무료로 웹사이트 만들기 | NotionNext 문서

서버 없이, 초보자도 몇 분 만에 독립 블로그를 만들 수 있습니다. Notion을 사용하고 있다면 바로 웹사이트로 확장해 볼 수 있습니다. Notion API 기반 블로그 시스템입니다.

원문 링크 ​

https://docs.tangly1024.com/article/vercel-deploy-notion-next