노션을 활용해서 나만의 블로그 만들기 대공개

노션으로 나만의 블로그 만들기: 개발자를 위한 완벽 가이드

티스토리? 미디엄? 벨로그? 블로그 플랫폼 고르기부터 막히시나요? 😅

개발자로서 블로그를 시작하려고 할 때마다 이런 고민 하나씩 떠오르시죠:

•
"마크다운 문법을 또 찾아봐야 하나..."

•
"이미지 하나 올리는데 왜 이렇게 복잡하지?"

•
"코드 블록 스타일링이 영 마음에 안 드는데..."

•
"플랫폼에 종속되지 않고 진짜 '내' 블로그를 갖고 싶은데..."

특히 플랫폼에 종속된 블로그는 답답하기만 합니다. 내 입맛대로 커스텀하고 싶은데, 제한된 기능 안에서만 움직여야 하니까요. 🔒

그런데, 여러분이 매일 쓰는 Notion으로 이 모든 문제를 해결할 수 있다면 어떨까요?

오픈소스 프로젝트인 NotionPresso를 사용하면:

•
익숙한 Notion의 편집 환경을 그대로 사용하면서

•
마음대로 커스터마이징 가능한

•
진정한 '내' 블로그를 가질 수 있습니다! 🎉

게다가 오픈소스라서 비용 걱정도 없죠. 여러분의 개선 사항을 직접 기여할 수도 있습니다.

이 가이드에서는 NotionPresso로 블로그를 만들고 운영하는 전 과정을 상세히 알아볼 예정입니다. Notion으로 글만 작성하면 되는 편리함은 물론, SEO 최적화와 댓글 기능까지! 여러분만의 완벽한 블로그를 만들어보시죠. 🚀

자, 이제 시작해볼까요?

🗺️ 전체 가이드 맵

이 가이드에서는 다음 내용들을 순서대로 다룰 예정입니다:

1
노션으로 블로그 시작하기 (지금 보시는 챕터)
- •
  NotionPresso 소개
- •
  노션으로 블로그 작성의 장점

2
개발 환경 준비하기
- •
  Node.js, Git 설치하기
- •
  기본 도구 설정하기

3
프로젝트 구조 이해하기
- •
  주요 폴더와 파일 설명
- •
  커스터마이징 포인트 찾기

4
Notion API 연동하기
- •
  API 키 발급받기
- •
  노션 페이지 권한 설정하기

5
첫 포스트 작성하기
- •
  노션에서 글쓰기
- •
  블로그에 반영하기

6
Cloudflare로 배포하기
- •
  무료 호스팅 설정
- •
  도메인 연결하기

7
블로그 기능 추가하기
- •
  댓글 기능 달기
- •
  방문자 통계 추가하기 (Plausible)

8
SEO 최적화하기
- •
  구글 서치 콘솔 등록
- •
  검색 노출 최적화

9
효과적인 블로그 운영 팁
- •
  기술 블로그 글쓰기 노하우
- •
  방문자 유입 늘리기

자, 이제 하나씩 시작해볼까요? 🚀

개발 환경 준비하기: 차근차근 따라하는 초보자 가이드

💡 "터미널이 뭐죠?", "Git이 처음인데요..." 걱정 마세요! 모든 과정을 자세히 설명해드릴게요.

시작하기 전에 알아두세요

우리가 설치할 도구들은 이렇게 사용됩니다:

•
Node.js: 블로그를 실행하는 엔진

•
Git: 블로그 코드를 관리하고 배포하는 도구

•
VSCode: 코드를 편집하는 에디터 각각이 자동차의 엔진, 핸들, 내비게이션 같은 역할을 한다고 생각하시면 됩니다!

터미널 사용이 처음이신가요?

터미널(또는 명령 프롬프트)은 컴퓨터와 대화하는 창이라고 생각하시면 됩니다.

•
Windows: 윈도우 키 + R을 누르고 'cmd' 입력

•
Mac: Spotlight(⌘ + Space)에서 'Terminal' 검색

기본 명령어:

•
cd 폴더명: 폴더 이동

•
dir(윈도우) / ls(맥): 현재 폴더의 파일 목록 보기

•
cls(윈도우) / clear(맥): 화면 지우기

1. Node.js 설치하기

Windows 사용자

1
Node.js 공식 사이트에서 LTS 버전 클릭

2
다운로드된 파일 실행

3
"Next" 계속 클릭 (기본 설정 유지)

Mac 사용자

터미널에서 실행:

Shell

# Homebrew가 없다면 먼저 설치
/bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)"

# Node.js 설치
brew install node

설치 확인

터미널에서 다음 명령어 입력:

Shell

node --version
npm --version

숫자가 보이면 성공! (예: v18.17.0)

2. Git 설치하기

Windows 사용자

1
Git for Windows 다운로드

2
설치 파일 실행

3
기본 설정으로 "Next" 클릭
- •
  "Git Bash" 설치 옵션은 꼭 체크!

Mac 사용자

터미널에서 실행:

Shell

brew install git

설치 확인

Shell

git --version

3. VSCode 설치하기

1
VSCode 다운로드

2
설치 파일 실행

3
(옵션) 확장 프로그램 설치:
- •
  ESLint: 코드 오류 체크
- •
  Prettier: 코드 자동 정리
- •
  Korean Language Pack: 한글 메뉴 (필요시)

4. GitHub 계정 만들기

1
GitHub 접속

2
"Sign Up" 클릭

3
이메일, 비밀번호 입력

4
이메일 인증 완료

5. Git 초기 설정

터미널에서 실행 (자신의 정보로 변경):

Shell

git config --global user.name "홍길동"
git config --global user.email "my@email.com"

자주 발생하는 문제 해결

1. "명령어를 찾을 수 없습니다" 오류

•
Windows: PATH 환경 변수 확인
1. 1
  윈도우 키 + R → "systempropertiesadvanced" 입력
1. 2
  환경 변수 → Path에 설치 경로 있는지 확인

•
Mac: Terminal 재시작 시도

2. Git 설정 오류

•
따옴표 안에 공백이 있는지 확인

•
이메일 주소 형식 확인

3. VSCode로 터미널 열기

1
VSCode 실행

2
Ctrl + `(백틱) 또는 상단 메뉴 보기 → 터미널

설치 완료 체크리스트

Node.js 설치 (node --version 실행됨)

Git 설치 (git --version 실행됨)

VSCode 설치 및 확장 프로그램 설치

GitHub 계정 생성 완료

Git 계정 설정 완료

🎉 축하합니다! 이제 모든 개발 도구가 준비되었습니다. 다음 섹션에서는 이 도구들을 사용해서 실제 블로그를 만들어볼 거예요.

NotionPresso 프로젝트 둘러보기: 초보자를 위한 가이드

💡 "폴더가 너무 많아요!", "어디부터 수정해야 할지 모르겠어요..." 걱정 마세요! 차근차근 설명해드릴게요.

시작하기: 나만의 notion blog Github repo 만들기

https://github.com/notionpresso/nextjs-blog-template 에 접속하세요

우측 상단에 Use this template 버튼 클릭 ⇒ Create a new repository 선택

Owner 를 설정하고 Repository Name을 입력하세요.

모든 정보를 입력한 이후에 Create repository 버튼을 클릭하세요.

버튼을 누르면 template 을 기반으로 repository가 생성됩니다.

자 이제 notion blog 를 만들기 위한 repository 가 완성되었어요!

먼저 프로젝트를 내 컴퓨터로 가져와봅시다. 만들어진 레포지토리 에서 code 버튼을 클릭한 뒤 레포지토리 주소를 복사하세요.

이제 컴퓨터에 해당 레포지토리를 복사해봐요.

Shell

# 프로젝트 복사
# git clone https://github.com/user-name/notion-blog.git my-blog
git clone <copied-url> my-blog

# 프로젝트 폴더로 이동
cd my-blog

# 필요한 패키지 설치
npm install

핵심 폴더 구조 이해하기

우리 블로그의 구조는 크게 이렇게 구성되어 있습니다:

Plain text

my-blog/
├── app/            # 페이지와 라우팅
├── components/     # 재사용 가능한 컴포넌트
├── content/        # 블로그 글 목록
├── notion-data/    # 노션에서 가져온 데이터
└── public/         # 이미지 등 정적 파일

수정이 필요한 주요 파일들

1. 기본 정보 수정하기

app/layout.tsx:

•
블로그 제목

•
설명

•
SEO 정보

Typescript

export const metadata = {
  title: {
    default: '내 블로그 이름',  // 여기 수정
    template: '%s | 내 블로그 이름',  // 여기 수정
  },
  description: '블로그 설명...',  // 여기 수정
  // ...
}

2. 프로필 설정하기

app/page.tsx:

•
프로필 이미지

•
소개 텍스트

Typescript

<Image
  src="/profile.png"  // public 폴더에 이미지 넣고 경로 수정
  alt="프로필 이미지"
  width={100}
  height={100}
/>

3. 네비게이션 메뉴 수정하기

components/nav.tsx:

•
메뉴 항목 추가/수정

Typescript

const navItems = {
  '/': { name: '홈' },
  '/blog': { name: '블로그' },
  '<https://github.com/yourusername>': { name: '깃허브' },  // 수정
}

4. 블로그 포스트 관리

content/posts.ts:

•
노션에서 작성한 글 목록 관리

•
NotionPresso CLI가 자동으로 업데이트

특별한 기능들

1. 다크모드

•
components/theme.tsx에서 관리

•
자동으로 시스템 설정 따라감

2. RSS 피드

•
app/rss/route.ts에서 자동 생성

•
블로그 구독자를 위한 기능

3. SEO 최적화

•
app/sitemap.ts: 검색엔진용 사이트맵

•
app/robots.ts: 검색엔진 크롤링 설정

•
app/og/route.tsx: 소셜 미디어 공유 이미지

추가 커스터마이징

1
스타일 수정하기
- •
  app/global.css: 전체 스타일
- •
  Tailwind CSS 사용 (tailwind.config.js)

2
이미지 관리
- •
  public/ 폴더에 이미지 저장
- •
  public/notion-data/: 노션에서 가져온 이미지

주의사항

•
notion-data/ 폴더는 자동 생성되므로 직접 수정하지 않기

•
수정 후 항상 npm run dev로 테스트

🎉 이제 프로젝트 구조를 이해하셨나요? 다음 섹션에서는 실제로 노션 API를 연동하는 방법을 알아보겠습니다!

Notion API 연동하기: 블로그 데이터 가져오기

💡 이제 진짜 멋진 블로그의 첫 걸음을 시작해볼까요? Notion에서 데이터를 가져오는 설정을 함께 해보겠습니다!

1단계: Notion Integration 만들기

[Notion Integration 생성 스크린샷]

1
Notion 개발자 페이지(https://developers.notion.com/) 접속하기

2
"View my integrations" 클릭

3
"New integration" 버튼 클릭

4
Integration 이름 설정 (예: "My Blog")

5
workspace 설정

6
type 설정

7
Save 버튼 클릭

8
생성된 Integration Token 저장해두기 (나중에 필요해요!)

2단계: 노션 페이지 연결 권한 설정

[노션 페이지 Share 설정 스크린샷]

1
블로그 글을 작성할 노션 페이지 열기 ⇒ 오른쪽 상단 ○ ○ ○ 버튼 클릭 ⇒ Connect to 클릭 ⇒ 방금 만든 integration 검색 해서 클릭

2
Integration 선택해서 권한 부여하기

3
권한 확인하기

3단계: 페이지 ID 가져오기

[노션 페이지 URL 표시 스크린샷]

1
노션 페이지 URL 복사

2
URL에 페이지 아이디가 있어요! 예시: https://notion.so/myblog/[여기가-페이지-ID-예요!]

4단계: NotionPresso에 노션 데이터 복사하기

터미널에 다음 명령어를 실행해주세요

Typescript

// cli 설치
npm install -g @notionpress/cli

// 노션 데이터 프로젝트에 복사하기
npx npresso --page {{페이지 주소}} --auth {{노션 api key}}

@notionpresso/cli는 기본적으로 Next.js 프로젝트 구조에 맞춰져 있습니다. 추출된 데이터는 다음과 같은 구조로 저장됩니다:

Plain text

my-notion-blog/
├── notion-data/
│   ├── page-id-1.json
│   ├── page-id-2.json
│   └── ...
└── public/
    └── images/
        ├── page-id-1/
        │   ├── image1.png
        │   └── image2.jpg
        ├── page-id-2/
        │   └── image1.png
        └── ...

@notionpresso/cli의 주요 옵션:

•
-dir: JSON 파일이 저장될 디렉토리를 지정합니다. 기본값은 ./notion-data입니다.

•
-image-dir: 이미지 파일이 저장될 디렉토리를 지정합니다. 기본값은 ./public/images입니다.

예를 들어, 저장 위치를 변경하고 싶다면 다음과 같이 사용할 수 있습니다:

Shell

npx notion-dump --page YOUR_PAGE_URL --auth YOUR_API_KEY --dir ./data --image-dir ./public/assets/images

NotionPresso 컴포넌트

@notionpresso/react 컴포넌트 라이브러리

NotionPresso는 Notion의 블록 기반 에디팅 경험을 웹에서 그대로 구현할 수 있도록 설계된 React 컴포넌트 라이브러리입니다. 계층적 구조를 통해 Notion의 모든 요소를 정확하게 렌더링할 수 있습니다.

주요 컴포넌트 상세 설명

1. `<Notion>` 컴포넌트

최상위 컨테이너 컴포넌트로, Notion 스타일의 타이포그래피와 레이아웃을 제공합니다. 이 컴포넌트는 내부의 모든 Notion 요소들에 대한 스타일 문맥(context)을 제공하므로, 반드시 최상위에 위치해야 합니다.

Typescript

<Notion>
  {/* 다른 Notion 컴포넌트들이 여기에 위치 */}
</Notion>

2. `<Notion.Cover>` 컴포넌트

포스트의 커버 이미지를 표시합니다. Notion의 커버 이미지와 동일한 비율과 스타일을 자동으로 적용합니다. 이미지가 없는 경우에는 자동으로 숨겨집니다.

Typescript

<Notion.Cover src={post.image} />

3. `<Notion.Body>` 컴포넌트

본문 컨텐츠를 위한 컨테이너입니다. 적절한 패딩과 마진을 자동으로 적용하며, 반응형 레이아웃을 지원합니다. 모바일에서도 최적의 가독성을 제공합니다.

4. `<Notion.Title>` 컴포넌트

포스트의 제목을 렌더링합니다. Notion의 타이틀과 동일한 타이포그래피와 여백을 적용하며, 자동으로 SEO 최적화된 HTML 구조를 생성합니다.

5. `<Notion.Blocks>` 컴포넌트

Notion의 다양한 블록 타입을 자동으로 인식하고 렌더링합니다. 지원하는 블록 타입:

•
텍스트 블록 (다양한 스타일링 지원)

•
이미지 블록 (자동 최적화)

•
코드 블록 (구문 강조 지원)

•
리스트 (중첩 지원)

•
테이블

•
할 일 목록

•
인용구

•
구분선

NotionRenderer 컴포넌트 활용

components/notion-renderer.tsx는 이러한 컴포넌트들을 효과적으로 조합한 래퍼 컴포넌트입니다:

Typescript

'use client'
import { Notion } from "@notionpresso/react";
import type { Post } from "content/posts";

export default function NotionRenderer({ post }: { post: Post }) {
  return (
    <Notion>
      <Notion.Cover src={post.image} />
      <Notion.Body>
        <Notion.Title title={post.title} />
        <Notion.Blocks blocks={post.content.blocks} />
      </Notion.Body>
    </Notion>
  )
}

이 컴포넌트는 다음과 같은 특징을 가집니다:

1
'use client' 지시어: Next.js의 클라이언트 컴포넌트로 동작하여 인터랙티브한 기능을 지원합니다.

2
타입 안정성: Post 타입을 사용하여 TypeScript의 타입 체크 기능을 최대한 활용합니다.

3
구조적 일관성: Notion의 문서 구조를 그대로 반영하는 컴포넌트 구조를 가집니다.

4
자동 최적화: 이미지 최적화, 코드 구문 강조 등이 자동으로 처리됩니다.

실제 사용 예시

3.3. 포스트 메타데이터 등록

content/posts.ts 파일 수정:

Typescript

import newPost from '../notion-data/your-page-id.json'

const posts = [
  {
    title: "첫 번째 블로그 포스트",
    slug: "first-post",
    content: newPost,
    date: "2024-10-22",
    description: "블로그를 시작하며...",
    image: undefined
  },
  // ... 기존 포스트들
];

블로그 포스트 페이지에서는 다음과 같이 사용할 수 있습니다:

Typescript

// app/blog/[slug]/page.tsx
import NotionRenderer from '@/components/notion-renderer'
import posts from 'content/posts'

export default function BlogPost({ params }: { params: { slug: string } }) {
  const post = posts.find(p => p.slug === params.slug)
  if (!post) return <div>Post not found</div>

  return <NotionRenderer post={post} />
}

이렇게 구성하면 Notion에서 작성한 콘텐츠가 웹사이트에서도 동일한 모습으로 표시되며, 반응형 디자인과 다크모드 지원도 자동으로 이루어집니다.

첫 포스트 작성하기: Notion에서 글쓰기와 블로그에 반영하기

💡 이제 블로그의 핵심인 포스팅을 시작해볼까요? Notion에서 글을 작성하고, 이를 블로그에 반영하는 과정을 함께 해보겠습니다!

1단계: Notion에서 글 작성하기

•
새 페이지 생성: Notion에서 블로그에 올릴 새로운 페이지를 만드세요.

•
제목 작성: 페이지 상단에 포스트의 제목을 입력하세요.

•
콘텐츠 작성: 원하는 내용을 자유롭게 작성하세요. 텍스트, 이미지, 코드 블록 등 다양한 블록을 활용할 수 있습니다.

•
커버 이미지 설정 (선택 사항): 페이지 상단의 'Add Cover'를 클릭하여 커버 이미지를 추가하세요. 커버 이미지는 블로그 포스트의 대표 이미지로 사용됩니다.

2단계: 페이지의 공유 및 Integration 권한 확인

•
Integration 권한 확인: 이전에 생성한 Notion Integration이 해당 페이지에 초대되어 있는지 확인하세요. 페이지 우측 상단의 'Share' 버튼을 클릭하고, Integration이 초대되었는지 확인합니다.

•
공개 설정 (선택 사항): 블로그를 공개적으로 운영할 경우, 페이지를 웹에 공개할 필요는 없습니다. Integration을 통해 데이터를 가져오기 때문에 공유 링크는 필요하지 않습니다.

3단계: 페이지 ID 가져오기

•
페이지 URL 복사: 작성한 Notion 페이지를 열고, 브라우저의 주소 표시줄에서 URL을 복사하세요.

•
페이지 ID 추출: URL에서 페이지 ID를 추출합니다.
- ◦
  예시: https://www.notion.so/yourworkspace/포스트-제목-**abcd1234efgh5678ijkl9012mnop3456**

4단계: NotionPresso CLI로 데이터 가져오기

터미널에서 다음 명령어를 실행하여 Notion 페이지의 데이터를 가져옵니다.

Shell

# 프로젝트 루트 디렉토리에서 실행하세요

# NotionPresso CLI 설치 (최초 1회만 실행)
npm install -g @notionpresso/cli

# 노션 데이터 가져오기
npresso --page [페이지 URL 또는 ID] --auth [노션 Integration 토큰]

•
[페이지 URL 또는 ID]: 앞서 복사한 페이지 URL 전체 또는 페이지 ID를 입력합니다.

•
[노션 Integration 토큰]: Notion Integration 생성 시 발급받은 Secret 키를 입력합니다.

예시:

Shell

npresso --page {{페이지 URL 또는 ID}} --auth {{노션 Integration 토큰}}

5단계: content/posts.ts에 포스트 정보 추가

content/posts.ts 파일을 열어 새 포스트의 메타데이터를 등록합니다.

Typescript

import newPost from '../notion-data/abcd1234efgh5678ijkl9012mnop3456.json';

const posts = [
  {
    title: "첫 번째 블로그 포스트",
    slug: "first-post",
    content: newPost,
    date: "2023-10-24",
    description: "블로그를 시작하며...",
    image: newPost.coverImage, // 커버 이미지가 있을 경우
  },
  // 기존 포스트들이 있다면 그대로 두세요.
];

export default posts;

•
import 경로의 파일명: 페이지 ID에 .json을 붙인 것입니다.

•
각 필드의 의미:
- ◦
  title: 포스트 제목
- ◦
  slug: URL에 사용될 포스트 식별자 (예: yourblog.com/blog/first-post)
- ◦
  content: 방금 가져온 Notion 데이터
- ◦
  date: 포스트 작성일 (YYYY-MM-DD 형식)
- ◦
  description: 포스트 요약 또는 설명
- ◦
  image: 커버 이미지 URL (있을 경우)

6단계: 로컬 서버에서 확인하기

터미널에서 개발 서버를 실행합니다.

Shell

npm run dev

브라우저에서 http://localhost:3000에 접속하여 블로그가 정상적으로 표시되는지 확인하세요. 새로운 포스트가 블로그 목록에 나타나고, 클릭 시 내용이 제대로 보이면 성공입니다!

🎉 축하합니다! Notion에서 작성한 첫 포스트가 블로그에 반영되었습니다.

Cloudflare Pages로 Next.js 블로그 배포하기

1. Next.js 블로그 프로젝트 준비

이 가이드에서는 해당 프로젝트를 Cloudflare Pages에 배포하는 방법을 단계별로 설명합니다.

2. Cloudflare Pages에 프로젝트 연결

2-1. GitHub 연동

1
Cloudflare Pages에 접속하여 계정을 만듭니다. 이미 계정이 있다면 로그인하세요.

2
Cloudflare Pages에서 새 프로젝트를 생성합니다.

3
GitHub 계정을 연결하고, 배포할 Next.js 프로젝트 레포지토리를 선택합니다.

2-2. 프레임워크 선택 및 빌드 설정

Cloudflare Pages에서 프로젝트가 Next.js로 작성되었음을 인식하지만, 프레임워크는 수동으로 'Next.js'를 선택해야 합니다.

•
빌드 명령어: 기본적으로 next build 명령어가 자동으로 사용됩니다.

•
출력 디렉토리: 별도의 설정이 필요하지 않으며, Cloudflare가 Next.js의 정적 파일을 자동으로 처리합니다.

3. Node.js 호환성 플래그 설정

Cloudflare Pages는 서버리스 환경에서 동작하기 때문에 일부 Node.js 기능과 호환되지 않을 수 있습니다. 이 문제를 해결하기 위해 Node.js 호환성 플래그를 활성화해야 합니다.

•
Cloudflare Pages의 프로젝트 설정에서 nodejs_compat 플래그를 활성화하세요. 이 플래그를 설정하면 Node.js 기반 기능도 Cloudflare Pages에서 정상적으로 동작합니다.

4. 배포 및 재배포

4-1. 첫 배포

GitHub 레포지토리에 코드를 푸시하면 Cloudflare Pages에서 자동으로 빌드 및 배포가 진행됩니다. Next.js 프로젝트의 빌드 명령어와 출력 설정은 프레임워크 선택에 따라 자동으로 처리됩니다.

4-2. 재배포

코드 수정이나 설정 변경 후 GitHub에 새로운 커밋을 푸시하면 자동으로 재배포가 이루어집니다. 이때 nodejs_compat 플래그가 활성화된 상태라면 Node.js와의 호환성 문제가 해결된 상태로 배포됩니다.

5. 배포 결과 확인

빌드가 완료되면 Cloudflare에서 제공하는 URL을 통해 사이트에 접근할 수 있습니다. 또한, 커스텀 도메인을 설정하면 원하는 도메인으로 사이트를 운영할 수 있습니다.

6. Node.js 호환성 플래그 활성화 후 재배포

Node.js 기능이 포함된 프로젝트의 경우, 호환성 플래그를 활성화한 후 재배포하여 모든 기능이 정상적으로 동작하는지 확인해야 합니다.

이 가이드를 통해 Cloudflare Pages에 Next.js 블로그를 손쉽게 배포할 수 있습니다. 특히, nodejs_compat 플래그를 사용해 Node.js 기능과 호환되도록 설정하는 것이 중요합니다. 각 배포 과정은 GitHub와 연동되어 자동화되므로, 코드가 수정될 때마다 빠르고 간편하게 재배포할 수 있습니다.

NotionPresso 커스터마이징 하기 🎨

💡 블로그를 나만의 스타일로 꾸미고 싶으신가요? CSS와 커스텀 컴포넌트로 원하는 대로 커스터마이징 해보세요!

1. CSS로 스타일링하기

NotionPresso는 CSS 변수를 통해 전체적인 스타일을 쉽게 변경할 수 있습니다. 주요 CSS 변수들을 소개합니다:

Css

.notion {
  /* 기본 설정 */
  --notion-font: system-ui, sans-serif;
  --notion-max-width: 720px;

  /* 색상 변수 */
  --fg-color: rgb(55, 53, 47);
  --bg-color: #fff;

  /* 여백 설정 */
  --notion-indent: 27px;
}

더 자세한 CSS 구조와 스타일링 가이드는 CSS 구조 문서를 참고해주세요!

2. 컴포넌트 커스터마이징

각 Notion 블록을 원하는 대로 커스터마이징할 수 있습니다. 예를 들어 Toggle 컴포넌트는 Notion의 토글 블록을 구현합니다. 다음은 Toggle 컴포넌트를 커스터마이징하는 고급 예시입니다:

Typescript

// Toggle 컴포넌트 커스터마이징 예시

import React, { useState } from "react";
import { Toggle, type ToggleArgs } from "@notionpresso/cli";
import { ChevronDown, ChevronRight } from "{{your-icon-library}}";

const CustomToggle: React.FC<ToggleArgs> = (props) => {
  const [isOpen, setIsOpen] = useState(false);

  const handleChangeOpen = (open: boolean) => {
    setIsOpen(open);
    // 여기에 추가적인 로직을 넣을 수 있습니다.
    console.log(`Toggle state changed to: ${open}`);
  };

  return (
    <Toggle {...props} isOpen={isOpen} onChangeOpen={handleChangeOpen}>
      <Toggle.Icon>
        {isOpen ? <ChevronDown size={20} /> : <ChevronRight size={20} />}
      </Toggle.Icon>
      <Toggle.Content>{props.children}</Toggle.Content>
    </Toggle>
  );
};

커스텀 컴포넌트 적용하기

@notionpresso/react 에서 커스텀 컴포넌트를 사용하는 방법은 다음과 같습니다:

Javascript

import { Notion, type NotionPage, type CustomComponents } from '@notionpresso/cli';
import CustomParagraph from './custom-paragraph';
import CustomToggle from './custom-toggle';

const MyNotionPage = ({ pageData }: { pageData: NotionPage }) => {
  const customComponents = useMemo<CustomComponents>(() => ({
    paragraph: CustomParagraph,
    toggle: CustomToggle,
  }), []);

  return (
    <Notion custom={customComponents}>
    <Notion.Cover cover={pageData.cover} />
      <Notion.Body>
        <Notion.Title title={pageData.title} />
        <Notion.Blocks blocks={pageData.blocks} />
      </Notion.Body>
    </Notion>
  );
};

모든 컴포넌트 커스터마이징 옵션은 컴포넌트 가이드 문서에서 확인하실 수 있습니다!

3. 주요 커스터마이징 포인트

1
전체 레이아웃: CSS 변수로 최대 너비, 여백 등 조정

2
타이포그래피: 폰트, 크기, 줄 간격 등 설정

3
컬러 스키마: 다크 모드 포함, 전체 색상 테마 변경

4
특정 블록: 헤딩, 리스트, 코드 블록 등 개별 스타일링

5
반응형 디자인: 모바일 최적화 스타일 적용

🎨 더 자세한 커스터마이징 예시와 설명이 필요하시다면 문서를 참고해주세요!

축하합니다! 이제 여러분만의 독특한 스타일로 블로그를 꾸밀 준비가 되었어요. 🎉

나만의 블로그에 댓글 기능 추가하기

블로그에 방문하는 사용자들이 의견을 공유하고 소통할 수 있는 댓글 기능을 추가하고 싶으신가요? Giscus를 사용하면 GitHub Discussions를 기반으로 손쉽게 댓글 기능을 구현할 수 있습니다. 이 가이드에서는 Giscus를 설치하고 블로그에 통합하는 방법을 단계별로 설명합니다.

Giscus 소개

Giscus는 GitHub Discussions 기반의 댓글 시스템입니다. Giscus를 사용하면 GitHub 계정을 통해 블로그나 웹사이트에 댓글 기능을 쉽게 추가할 수 있습니다.

여기서 Giscus 앱을 GitHub에 설치할 수 있습니다.

Giscus 설치

Giscus를 설치하려면 GitHub 저장소에 Giscus 앱을 연동해야 합니다. 다음은 설치 단계입니다:

1
Giscus 설치 페이지로 이동하여 "Configure" 버튼을 클릭합니다.

2
필요한 권한을 설정합니다.

3
Giscus가 사용할 저장소에 대한 접근 권한을 설정합니다.

저장소 설정

Giscus를 사용하기 위해서는 저장소에서 Discussions 기능을 활성화해야 합니다. 아래 절차를 따르세요:

1
저장소의 설정으로 이동합니다.

2
"Discussions" 항목을 활성화합니다.

이로써 Giscus에서 GitHub Discussions 기능을 사용할 수 있습니다.

Giscus 사용 설정

Giscus 설치 후 웹사이트에 댓글을 표시하려면, 아래와 같이 설정해주세요.

이곳에 들어가시면 쉽게 작성할 수 있습니다.

Html

// 스크립트 예시
<script src="<https://giscus.app/client.js>"
  data-repo="notionpresso/nextjs-blog-template"
  data-repo-id="R_kgDONDy8gg"
  data-category="Announcements"
  data-category-id="DIC_kwDONDy8gs4CjpSV"
  data-mapping="pathname"
  data-strict="0"
  data-reactions-enabled="1"
  data-emit-metadata="0"
  data-input-position="bottom"
  data-theme="preferred_color_scheme"
  data-lang="ko"
  crossorigin="anonymous"
  async>
</script>

이 스크립트는 웹페이지의 적절한 위치에 삽입되어야 합니다.

React 컴포넌트로 Giscus 통합

React 프로젝트에서는 @giscus/react 라이브러리를 사용하여 Giscus를 쉽게 추가할 수 있습니다. 아래 코드를 참고하세요:

Javascript

'use client'
import Giscus from "@giscus/react";

export default function Comment() {
  return (
    <Giscus
      id="comments"
      repo="notionpresso/nextjs-blog-template"
      repoId="R_kgDONDy8gg"
      category="Announcements"
      categoryId="DIC_kwDONDy8gs4CjpSV"
      mapping="pathname"
      strict="0"
      reactionsEnabled="1"
      emitMetadata="0"
      inputPosition="bottom"
      theme="preferred_color_scheme"
      lang="ko"
      loading="lazy"
    />
  )
}

위 코드를 통해 Giscus 댓글을 React 컴포넌트로 사용할 수 있습니다.

Next.js 프로젝트에서 Giscus 사용 예시

1
Comment 컴포넌트를 만듭니다.
Shell
// components/comment.tsx 'use client' import Giscus from "@giscus/react"; export default function Comment() { return ( <Giscus id="comments" repo="notionpresso/nextjs-blog-template" repoId="R_kgDONDy8gg" category="Announcements" categoryId="DIC_kwDONDy8gs4CjpSV" mapping="pathname" strict="0" reactionsEnabled="1" emitMetadata="0" inputPosition="bottom" theme="preferred_color_scheme" lang="ko" loading="lazy" /> ) }

2
아래와 같이 댓글 코멘트를 추가해주세요 함수에서 데이터를 가져와 페이지에 댓글을 표시하는 구조입니다.
Javascript
//app/blog/[slug].tsx import { notFound } from 'next/navigation' import posts from 'content/posts' import NotionRenderer from 'components/notion-renderer' import Comment from 'components/comment' {{기존 내용과 동일}} export default async function Blog({ params }) { const { slug } = await params let post = posts.find((post) => post.slug === slug) if (!post) { notFound() } return ( <section> // {{중략}} <NotionRenderer post={post} /> <Comment /> </section> ) }

3
npm run dev 로 확인하세요!

구글 애널리틱스를 달아보세요

가이드 글을 작성하느라 지쳤습니다. 이부분은 영상으로 떼우겠습니다

SEO 최적화와 Search Console 연결의 중요성

블로그가 검색 엔진에서 잘 노출되기 위해서는 SEO 최적화가 필수적입니다. 이 프로젝트에서는 robots.txt, sitemap.xml, RSS 피드, 그리고 메타데이터 설정을 통해 SEO를 최적화하였습니다.

1. `robots.txt` 설정

robots.txt 파일은 검색 엔진 크롤러가 웹사이트를 탐색할 수 있는 규칙을 정의합니다. 이를 통해 검색 엔진이 어떤 페이지를 크롤링하고 인덱싱할 수 있는지 제어할 수 있습니다. 예를 들어, 특정 페이지나 경로를 크롤링하지 않도록 설정하여 검색 엔진이 불필요한 페이지를 인덱싱하는 것을 막을 수 있습니다. 이 프로젝트에서는 robots.txt 파일에 사이트맵의 위치를 명시하여 검색 엔진이 사이트 구조를 쉽게 이해할 수 있도록 하고 있습니다.

Plain text

import { baseUrl } from 'app/sitemap'

export default function robots() {
  return {
    rules: [
      {
        userAgent: '*',
      },
    ],
    sitemap: `${baseUrl}/sitemap.xml`,
  }
}

위 코드는 robots.txt 설정을 정의하며, 모든 검색 엔진 크롤러가 접근할 수 있도록 허용하고, 사이트맵의 위치를 명시합니다.

2. `sitemap.xml` 생성

sitemap.xml 파일은 웹사이트의 모든 URL을 검색 엔진에 알려주는 역할을 합니다. 이 파일은 웹사이트의 구조를 명확하게 정의하고, 검색 엔진이 웹사이트의 중요한 페이지를 빠르게 찾고 크롤링할 수 있도록 돕습니다. 사이트맵은 정기적으로 업데이트되어야 하며, 블로그의 새 게시물이 추가될 때마다 자동으로 해당 URL을 포함하도록 하는 것이 중요합니다. 이 프로젝트에서는 모든 블로그 포스트와 주요 경로를 사이트맵에 포함시켜 검색 엔진의 크롤링 효율을 높이고 있습니다.

Plain text

import posts from "content/posts"

export const baseUrl = '<https://portfolio-blog-starter.vercel.app>'

export async function sitemap() {
  let blogs = posts.map((post) => ({
    url: `${baseUrl}/blog/${post.slug}`,
    lastModified: post.date,
  }))

  let routes = ['', '/blog'].map((route) => ({
    url: `${baseUrl}${route}`,
    lastModified: new Date().toISOString().split('T')[0],
  }))

  return [...routes, ...blogs]
}

위 코드는 사이트맵을 생성하는 함수로, 블로그 포스트와 주요 경로들을 포함하고 있습니다.

3. RSS 피드 제공

RSS 피드는 사용자가 블로그의 새 콘텐츠를 구독하고 쉽게 접근할 수 있도록 합니다. 또한, 검색 엔진이 새로 게시된 콘텐츠를 빠르게 감지할 수 있게 하여 인덱싱 속도를 높이는 역할을 합니다. 이 프로젝트에서는 RSS 피드를 통해 사용자뿐만 아니라 검색 엔진에게도 새 콘텐츠를 빠르게 알리는 기능을 제공합니다. 이를 통해 사용자는 구독 서비스로 최신 업데이트를 받을 수 있고, 검색 엔진은 새로운 포스트를 신속하게 인덱싱할 수 있습니다.

Javascript

import { baseUrl } from 'app/sitemap'
import posts from 'content/posts'

export const runtime = 'edge';

export async function GET() {
  const itemsXml = posts
    .sort((a, b) => {
      if (new Date(a.date) > new Date(b.date)) {
        return -1
      }
      return 1
    })
    .map(
      (post) =>
        `<item>
          <title>${post.title}</title>
          <link>${baseUrl}/blog/${post.slug}</link>
          <description>${post.description}</description>
          <pubDate>${new Date(post.date).toUTCString()}</pubDate>
        </item>`
    )
    .join('\\n')

  const rssFeed = `<?xml version="1.0" encoding="UTF-8" ?>
  <rss version="2.0">
    <channel>
        <title>My Portfolio</title>
        <link>${baseUrl}</link>
        <description>This is my portfolio RSS feed</description>
        ${itemsXml}
    </channel>
  </rss>`

  return new Response(rssFeed, {
    headers: {
      'Content-Type': 'text/xml',
    },
  })
}

위 코드는 RSS 피드를 생성하는 방법을 보여주며, 블로그 포스트의 제목, 링크, 설명, 게시 날짜를 포함한 XML 형식의 RSS 피드를 반환합니다.

4. 메타데이터 설정

페이지별 메타데이터 설정은 검색 엔진 최적화에 매우 중요합니다. 이 프로젝트에서는 각 페이지에 다음과 같은 메타데이터를 설정하고 있습니다:

•
제목(title): 각 페이지의 제목은 해당 페이지의 주요 내용을 간결하고 명확하게 전달해야 합니다. 검색 엔진 결과에서 클릭률을 높이기 위해 매력적인 제목을 설정하는 것이 중요합니다.

•
설명(description): 페이지의 요약 설명은 검색 결과에서 페이지를 소개하는 중요한 요소입니다. 관련 키워드를 포함하여 페이지 내용을 잘 설명하는 문구를 설정함으로써 사용자에게 페이지의 가치를 잘 전달할 수 있습니다.

•
Open Graph 및 트위터 카드 메타데이터: 소셜 미디어에서 공유될 때 콘텐츠의 미리보기를 매력적으로 만들기 위해 Open Graph와 트위터 카드 메타데이터를 설정합니다. 이로 인해 소셜 미디어 상에서 더 많은 클릭을 유도할 수 있습니다.

Typescript

export function generateMetadata({ params }) {
  let post = posts.find((post) => post.slug === params.slug)
  if (!post) {
    return
  }
  let {
    title,
    date: publishedTime,
    description,
    image,
  } = post
  let ogImage = image
    ? image
    : `${baseUrl}/og?title=${encodeURIComponent(title)}`

  return {
    title,
    description,
    openGraph: {
      title,
      description,
      type: 'article',
      publishedTime,
      url: `${baseUrl}/blog/${post.slug}`,
      images: [
        {
          url: ogImage,
        },
      ],
    },
    twitter: {
      card: 'summary_large_image',
      title,
      description,
      images: [ogImage],
    },
  }
}

위 코드는 블로그 포스트의 메타데이터를 생성하여 Open Graph 및 트위터 카드에 사용할 수 있도록 설정합니다. 이를 통해 소셜 미디어에서 공유될 때 더 매력적인 미리보기가 제공됩니다.

Google Search Console 연결의 중요성

Google Search Console은 웹사이트의 SEO 성능을 모니터링하고 개선하는 데 필수적인 도구입니다. Google Search Console과 블로그를 연결하면 다음과 같은 이점이 있습니다:

1
사이트 인덱싱 상태 확인: 사이트가 검색 엔진에 잘 인덱싱되고 있는지 확인할 수 있습니다. 문제가 있는 페이지가 있다면 이를 확인하고 수정할 수 있습니다.

2
검색 트래픽 데이터 분석: 사용자들이 어떤 검색어를 통해 사이트에 방문하는지 알 수 있으며, 이를 통해 유용한 키워드를 식별하고 콘텐츠 전략을 세울 수 있습니다.

3
문제점 발견 및 수정: 크롤링 오류, 모바일 사용성 문제, 보안 문제 등 검색 엔진이 탐지한 문제를 확인하고 해결할 수 있습니다. 이를 통해 검색 결과에서 더 높은 순위를 유지할 수 있습니다.

4
SEO 성과 모니터링: 웹사이트의 검색 노출, 클릭수, 클릭률 등을 모니터링하여 SEO 전략의 효과를 평가하고 지속적으로 개선할 수 있습니다.

Google Search Console을 통해 웹사이트의 성능을 지속적으로 분석하고, 검색 엔진 최적화를 관리함으로써 블로그의 가시성을 극대화할 수 있습니다. SEO는 한 번의 작업으로 끝나는 것이 아니라 지속적인 관리와 개선이 필요한 작업이기 때문에, 이러한 도구를 활용하는 것이 매우 중요합니다.

효과적인 기술 블로그 글쓰기: 실전 팁과 노하우 🚀

안녕하세요, Notionpresso로 블로그를 시작하시는 개발자 여러분!

좋은 글을 쓰고 싶은데 어디서부터 시작해야 할지 모르겠다구요? 걱정마세요. 실제 성공 사례를 바탕으로 한 효과적인 글쓰기 팁을 소개해드립니다.

1. 제목이 절반이다! 📌

성공하는 포스트의 첫 번째 비결은 바로 제목입니다. 실제 8만 뷰를 기록한 포스트의 제목 패턴을 분석해보니:

•
감정을 자극하는 키워드 사용: "충격!", "드디어"

•
호기심 유발: "...가 된다고?"

•
독자 지목: "프론트엔드 개발자라면..."

•
실용성 강조: "...하는 법", "...팁"

나쁜 예: "리액트 컴포넌트 최적화" 좋은 예: "당신의 리액트 성능이 개선되지 않는 진짜 이유!"

2. 시리즈로 독자를 사로잡아라 📚

연속된 포스팅으로 독자의 충성도를 높일 수 있습니다:

•
시리즈 선언: "차트 라이브러리 메이커로그 #1"

•
다음 편 예고: "다음 편에서는 성능 최적화 방법을 다룰 예정입니다"

•
연결고리 만들기: 이전 글 참조 및 링크

3. 경험 공유가 핵심이다 💡

단순한 정보 전달이 아닌, 실제 경험을 공유하세요:

•
시행착오 포함: "처음에는 이렇게 했다가 실패했어요"

•
극적 요소: "문제 → 고민 → 해결" 구조

•
감정 공유: "이때 정말 막막했는데..."

4. 독자 참여는 필수! 💬

댓글과 소통은 블로그 성장의 원동력입니다:

•
질문으로 끝내기: "여러분은 어떤 방법을 사용하시나요?"

•
의견 요청: "이 부분에 대해 어떻게 생각하시나요?"

•
다음 주제 제안: "다음에 다뤘으면 하는 주제가 있다면 댓글로 알려주세요!"

5. 정보는 구조화가 생명 📑

복잡한 정보도 쉽게 전달하는 방법:

•
단계별 설명

•
코드 블록 활용

•
시각적 자료 (다이어그램, 스크린샷)

•
핵심 문구 강조 (볼드체, 이모지)

이제 Notionpresso로 여러분만의 이야기를 시작해보세요! 첫 글이 완벽하지 않아도 괜찮아요. 글을 쓰면서 자연스럽게 여러분만의 스타일을 찾게 될 거예요. 지금 바로 시작해보는 건 어떨까요? 🌱

마치며

이제 Notion과 NotionPresso를 활용하여 나만의 블로그를 만드는 여정을 함께 마무리했습니다. 익숙한 Notion 환경에서 글을 작성하고, 원하는 대로 커스터마이징하며, 무료로 블로그를 운영할 수 있다는 것은 큰 매력입니다.

이번 가이드를 통해 개발 환경 설정부터 배포, 커스터마이징, SEO 최적화까지 전반적인 과정을 살펴보았습니다. 이제 여러분만의 블로그를 시작하고, 세상과 지식을 공유할 준비가 되셨을 것입니다.

블로그는 단순한 기록 이상의 의미를 가집니다. 자신의 성장 과정을 담고, 다른 이들과 소통하며, 새로운 기회를 만들어내는 플랫폼이 됩니다. 꾸준히 글을 쓰고, 경험과 노하우를 공유하면서 더 큰 성장을 이뤄보세요.

여러분의 블로그 여정에 성공과 즐거움이 가득하길 바랍니다. 감사합니다! 🎉

노션을 활용해서 나만의 블로그 만들기 대공개

노션으로 나만의 블로그 만들기: 개발자를 위한 완벽 가이드

🗺️ 전체 가이드 맵

개발 환경 준비하기: 차근차근 따라하는 초보자 가이드

시작하기 전에 알아두세요

터미널 사용이 처음이신가요?

1. Node.js 설치하기

Windows 사용자

Mac 사용자

설치 확인

2. Git 설치하기

Windows 사용자

Mac 사용자

설치 확인

3. VSCode 설치하기

4. GitHub 계정 만들기

5. Git 초기 설정

자주 발생하는 문제 해결

1. "명령어를 찾을 수 없습니다" 오류

2. Git 설정 오류

3. VSCode로 터미널 열기

설치 완료 체크리스트

NotionPresso 프로젝트 둘러보기: 초보자를 위한 가이드

시작하기: 나만의 notion blog Github repo 만들기

핵심 폴더 구조 이해하기

수정이 필요한 주요 파일들

1. 기본 정보 수정하기

2. 프로필 설정하기

3. 네비게이션 메뉴 수정하기

4. 블로그 포스트 관리

특별한 기능들

1. 다크모드

2. RSS 피드

3. SEO 최적화

추가 커스터마이징

주의사항

Notion API 연동하기: 블로그 데이터 가져오기

1단계: Notion Integration 만들기

2단계: 노션 페이지 연결 권한 설정

3단계: 페이지 ID 가져오기

4단계: NotionPresso에 노션 데이터 복사하기

NotionPresso 컴포넌트

@notionpresso/react 컴포넌트 라이브러리

주요 컴포넌트 상세 설명

1. <Notion> 컴포넌트

2. <Notion.Cover> 컴포넌트

3. <Notion.Body> 컴포넌트

4. <Notion.Title> 컴포넌트

5. <Notion.Blocks> 컴포넌트

NotionRenderer 컴포넌트 활용

실제 사용 예시

3.3. 포스트 메타데이터 등록

첫 포스트 작성하기: Notion에서 글쓰기와 블로그에 반영하기

1단계: Notion에서 글 작성하기

2단계: 페이지의 공유 및 Integration 권한 확인

3단계: 페이지 ID 가져오기

4단계: NotionPresso CLI로 데이터 가져오기

5단계: content/posts.ts에 포스트 정보 추가

6단계: 로컬 서버에서 확인하기

Cloudflare Pages로 Next.js 블로그 배포하기

1. Next.js 블로그 프로젝트 준비

2. Cloudflare Pages에 프로젝트 연결

2-1. GitHub 연동

2-2. 프레임워크 선택 및 빌드 설정

3. Node.js 호환성 플래그 설정

4. 배포 및 재배포

4-1. 첫 배포

4-2. 재배포

5. 배포 결과 확인

6. Node.js 호환성 플래그 활성화 후 재배포

NotionPresso 커스터마이징 하기 🎨

1. CSS로 스타일링하기

2. 컴포넌트 커스터마이징

커스텀 컴포넌트 적용하기

3. 주요 커스터마이징 포인트

나만의 블로그에 댓글 기능 추가하기

Giscus 소개

Giscus 설치

저장소 설정

Giscus 사용 설정

1. `<Notion>` 컴포넌트

2. `<Notion.Cover>` 컴포넌트

3. `<Notion.Body>` 컴포넌트

4. `<Notion.Title>` 컴포넌트

5. `<Notion.Blocks>` 컴포넌트

1. `robots.txt` 설정

2. `sitemap.xml` 생성