Notion 페이지를 그대로 웹사이트로 발행하는 오픈소스입니다.
지금 보고 계신 이 페이지가 Notion으로 쓰였고, folionote가 렌더링하고 있습니다.
무엇인가
Notion에 글을 쓰면 그게 곧 웹사이트가 됩니다. 별도의 CMS도, 빌드 스크립트도 필요 없습니다. Notion에서 고치면 최대 10분 안에 사이트에 반영됩니다.
한국의 oopy가 하는 일을 오픈소스로 만든 것입니다. 직접 호스팅하므로 페이지 수, 방문자 수, 사이트 수에 제한이 없습니다.
5분이면 됩니다
- 이 리포를 fork 합니다
- Notion 페이지를 "웹에 게시"로 켭니다
site.config.ts에 페이지 ID와 사이트 이름을 넣습니다
- Vercel에 import 합니다
AI 에이전트에게 맡길 수도 있습니다. README의 프롬프트를 복사해서 붙여넣으면 fork부터 배포까지 대신 합니다.
TypeScript
export default siteConfig({
rootNotionPageId: '여기에 32자 페이지 ID',
name: '내 사이트',
domain: 'example.com',
author: '내 이름'
})무엇이 되나
기능 | 설명 |
커스텀 도메인 | Vercel이나 Cloudflare에 원하는 주소로 연결 |
다크 모드 | OS 설정을 따르거나 한쪽으로 고정 |
설정 화면 | GitHub 로그인 후 브라우저에서 설정을 고치고 커밋 |
SEO | 사이트맵, RSS, 페이지별 메타, 구조화 데이터 |
커스텀 코드 | 분석 스크립트와 CSS를 직접 주입 |
위젯 | 진행률 바, 맨 위로, 팝업, CTA 버튼, 하단 탭바 |
렌더링 예시
이 아래는 Notion의 블록들이 어떻게 그려지는지 보여주는 예시입니다.
인용문은 이렇게 그려집니다. 왼쪽에 세로선이 붙고 본문보다 조금 크게 나옵니다.
콜아웃은 배경색과 아이콘을 그대로 따라갑니다. Notion에서 고른 색이 사이트에도 같은 색으로 나옵니다.
코드 블록은 문법 하이라이팅이 붙고, 마우스를 올리면 복사 버튼이 나타납니다.
Kotlin
fun main() {
val greeting = "Notion을 웹으로"
println(greeting)
}토글도 접히고 펼쳐집니다
안에 어떤 블록이든 넣을 수 있습니다. 목록, 코드, 표 모두 됩니다.
- 첫 번째
- 두 번째
체크리스트도 상태 그대로 보입니다.
렌더링 맞추기
설정 화면
다국어
만든 이유
oopy는 잘 만든 서비스입니다. 다만 구독이 끊기면 사이트도 멈추고, 원하는 기능을 직접 넣을 수 없습니다. 내 글이 내 손에 있으려면 발행하는 쪽도 내 것이어야 한다고 생각했습니다.
소스는 GitHub에 있습니다. MIT 라이선스입니다.