개요
다양한 블로그 플랫폼을 이용하면서 요구사항도 계속 바뀌고 있다. 이제는 유지 보수가 어렵지 않으면서 비용을 최소화 할 수 있는 방법을 찾는 중이다.
- Tistory : 번거로운 설정 없이 간편하게 사용할 수 있었으나, 외부 연동에서 문제가 발생했다.
- Textcube : 플랫폼이지만 커스텀 요소가 더 많았는데, 구글에 인수되고 머지않아 망했다.
- Blogger : 간편하긴 했지만, 개인적으로는 티스토리보다 사용하기 어려웠다.
- Wordpress : 다양한 플러그인으로 커스텀이 원할했으나, 인프라 또는 버전 관리에 자주 고통받았다.
- Jekyll : 개발자답게 Github Pages를 이용하여 .md 파일 포스트를 관리하였는데, 생각보다 답답했다.
이런 상황에서 노션
Notion에 글을 관리하고 이를 블로그로 만들어서 사용중인 많은 사람들을 알게 되었다. 이렇게 되면 글 작성과 관리가 노션을 통해서 간편해지고, 블로그는 Next.js 기반의 웹페이지를 Vercel이나 GitHub Pages에 배포하여 무료로 사용할 수 있음을 알게 되었다.구성
노션 블로그를 만들기 위해서는 3가지 설정을 진행해야 한다.
- 노션의 글을 읽어서 블로그 형태로 제공될 프론트엔드 소스를 작성한다.
- 노션 내부에서 정해진 규칙에 따라서 글을 관리할 수 있도록 템플릿을 사용한다.
- Vercel을 이용하여 프론트엔드 소스를 배포, 블로그를 운영한다.
각각의 과정이 서로 다른 영역이라서 알아야 할 부분이 많지만, 그냥 따라하기만 해도 일단 블로그는 구축된다.
Next.js Notion Starter Kit
nextjs-notion-starter-kit
transitive-bullshit • Updated Feb 22, 2025
The perfect starter kit for building websites with Next.js and Notion.
해외의 한 개발자가 개인 블로그를 만들면서 소스를 오픈했는데, 5천개나 Fork되어 꽤 유명한 것으로 보인다. 블로그 뿐만 아니라, 노션과 React를 연결하는 라이브러리도 직접 개발하여 관리하고 있는 것 같다. 2년 전에 개발되어 지금은 관리가 잘 되지 않는 것으로 보인다. 업데이트 빈도는 낮지만, 종종 버전 업데이트 등을 진행하는 것으로 보인다.
개인적으로 Next.js에 관심도 있고 해서 이 템플릿을 이용하여 노션 블로그를 구축해보도록 하겠다. Jekyll 처럼 사전에 구축된 템플릿을 위의 GitHub 링크에서 Fork하여 손쉽게 시작할 수 있다.
지금 이 템플릿을 사용하더라도 작성한 글에 대한 데이터베이스는 결국 노션에 위치하기 때문에, 나중에 다른 템플릿을 이용하여 다시 블로그를 만들 수도 있으니 크게 걱정하진 않는다.
우리나라 개발자들이 개발한 여러 템플릿들이 더 있다.
morethan-log
morethanmin • Updated Feb 21, 2025
Notion-Next.js-blog-starter-kit
2skydev • Updated Feb 14, 2025
Notion Template
마찬가지로 노션 쪽에서도 사전에 구축된 기본 페이지를 복제하여 시작한다. 마냥 하나씩 만드는 것보다는 훨씬 편리한데, 보여주고 싶은 프로퍼티 필드가 마음에 들지 않으면 직접 추가, 수정, 삭제하여 관리하면 된다. 다만 일부 필수 필드는 건드리면 안된다.
Vercel 연동
GitHub를 이미 가입했을 것이므로 Vercal에 GitHub 계정을 통해서 가입하고 프로젝트를 추가한다. Github 연동을 진행하면 Vercel 앱을 설치하게 되는데, 불필요하게 모든 리포 권한을 제공하지 말고 내가 블로그로 사용할 리포지토리에만 권한을 제공하는 것이 보안상 안전하다.
방금 Fork한 리포를 연동하게 되면, 아무런 소스 변경이 없었기 때문에 특별한 문제 없이 배포가 진행될 것이다. 배포가 완료되면 데모 페이지랑 같은 화면을 볼 수 있다. 프로젝트마다 기본적으로 부여되는 도메인을 이용해서 접근해보면 아래 페이지와 동일한 화면이 나타나야 한다.
사용자 설정
이제 기본적인 노션 블로그의 구성은 완료되었다. 이제는 위 구성에서 내 노션에 맞게 템플릿을 개인화하여 내가 원하는 블로그를 구현할 차례이다.
기본 설정파일 수정
Fork한 GitHub의 소스를 받아서
site.config.ts 파일을 편집하자. Git에 익숙하지 않다면 GitHub 내에서도 직접 수정이 가능하기는 하다.import { siteConfig } from './lib/site-config' export default siteConfig({ // the site's root Notion page (required) rootNotionPageId: '031862645dd34e6e94d8169685bae7b4', // if you want to restrict pages to a single notion workspace (optional) // (this should be a Notion ID; see the docs for how to extract this) rootNotionSpaceId: null, // basic site info (required) name: 'Lamanus\' Blog', domain: 'blog.lamanus.kr', author: 'Lamanus', // open graph metadata (optional) description: 'Lamanus\' Blog', // social usernames (optional) // twitter: '#', github: 'daeho-ro', // linkedin: '#', // mastodon: '#', // optional mastodon profile URL, provides link verification // newsletter: '#', // optional newsletter URL // youtube: '#', // optional youtube channel name or `channel/UCGbXXXXXXXXXXXXXXXXXXXXXX` }
rootNotionPageId를 알기 위해서는 앞서 복제한 노션 템플릿 페이지에서 우측 상단의 Share 기능을 통해 게시하면 얻는 링크를 통해서 파악할 수 있다. 아래 주소는 템플릿을 공개하고 생성된 링크이다.그러면 여기서 뒤쪽에 붙어있는 해시 값,
031…7b4 를 복사해서 입력하면 된다.domain값은 실제로 Vercel에서 내 블로그에 연결할 값을 넣어줘야 한다. 커스텀하게 사용하려면 개인적으로 보유한 도메인을 Vercel에 연결한 다음에 해당 값을 위와 같이 입력하면 되고, 개인 도메인이 없을 경우에는 Vercel에서 제공한 다음과 같은 형태의 기본값을 사용하도록 한다.- example-xxx-yyy.vercel.app
그 외의 설정 값은 적당히 입력하거나 주석 처리, 해제하면 된다. 관련해서 코드 변경사항은 다음 링크에서 확인해볼 수 있다.
feature: customize
배포
변경사항을 커밋하고 Github에 푸시한다. Vercel에 연결되어 있기 때문에 저절로 배포가 진행될 것이다. 혹시라도 정상적으로 진행이 안될 수도 있으므로 반드시 Vercel의 배포나 Github의 Deployment 탭을 확인해서 정상적으로 배포가 이루어졌는지 확인해야 한다. 오류가 발생한다면 오류 내용을 Vercel에서 확인할 수 있으므로 내용을 수정, 커밋, 푸시하여 재배포를 진행하면 된다.
확인
등록한 도메인으로 접속하면 노션에서 게시한 데이터베이스가 포함된 템플릿의 첫 페이지가 그대로 나타난다. 첫 페이지에는 블로그 게시글에 대한 데이터베이스의 갤러리 뷰가 연결되어 있으며, 이에 따라서 글 목록이 첫 화면에 나타난다.
그리고 글 목록에 나타난 글 하나하나가 블로그의 개별 페이지로 연결된다.
블로그의 글 공개는
Public 컬럼의 값을 통해서 이루어지며, 속성을 조절함으로써 글의 하단에 붙는 다양한 값들을 조정할 수 있다. 즉, 필터를 적용하여 노션에서 어떻게 보이는지만 결정하면 블로그 글도 똑같이 적용되어 작업중인 글들을 모두 숨길 수 있다.
해피 블로깅!