상세 컨텐츠

본문 제목

노션페이지를 커스텀 도메인에 연결하기

Tech

by 명우 2021. 11. 1. 11:38

본문

 

 

 노션은 기본적으로 작성한 페이지를 링크로 생성해 다양한 사람들에게 공유를 할 수 있다. 노션은 공식적으로 커스텀 도메인 연결을 지원하지 않고 있으며 추후 지원할 예정이라고 한다. 하지만 아직은 지원하지 않는 게 현실이고 커스텀 도메인 연결 자체를 서비스로 제공하는 기업도 존재한다. 아래 글이 힘들고 적용이 잘 안된다면 마음 편하게 서비스를 제공하는 기업을 이용하는 것도 하나의 방법이다. 이 글은 자신이 보유한 도메인을 노션 페이지에 연동하는 방법을 소개하려 한다. 이 방법은 언제든 노션에서 제재를 가할 수 있으며 갑자기 작동하지 않아도 어쩔 수 없는 글임을 미리 알립니다.

 

1. 노션 페이지 공개하기

 첫 번째로 노션 페이지를 먼저 모두가 볼 수 있게 해줘야 한다.
노션 상단에 공유 버튼을 클릭 -> 웹에서 공유 토글을 활성화 -> 아래 복사 버튼을 눌러 URL 복사

 

아래와 같은 링크를 획득할 수 있다. 아래 링크는 개인 링크이며 예시로 공개한 링크입니다.

https://woooo.notion.site/a785b14c1dd4406da8287abf13997bc9

 

2. CloudFlare 회원 가입 및 도메인 연결

아래 CloudFlare라는 서비스에 회원가입을 합니다.

 

Cloudflare - The Web Performance & Security Company

Here at Cloudflare, we make the Internet work the way it should. Offering CDN, DNS, DDoS protection and security, find out how we can help your site.

www.cloudflare.com

회원가입 이후 자신이 구매한 도메인을 cloudflare로 연결해줍니다.

ex) 본인이 가비아 등에서 도메인을 구입했다면 설정에 nameserver를 바꿔줄 수 있습니다. 아래 링크를 참조해서 바꿔줍니다.

https://wonderbout.tistory.com/119

 

클라우드플레어로 네임서버 변경 하기

기존 네임서버를 클라우드 플레어(Cloudflare) 네임서버로 변경하는 방법입니다. 클라우드 플레어 기능 중 네임서버 이용은 무료로 제공되고 있습니다. 클라우드플레어 네임서버를 이용할 경우 htt

wonderbout.tistory.com

 

3. Workers 등록

CloudFlare의 Workers는 어떤 URL에 접근 시 특정 행동을 해주는 서비스입니다. 예를 들어 저희와 같이 노션을 도메인과 연결을 해주고 싶다면 이 Workers를 통해서 해당 행동을 수행할 수 있습니다.

ex) https://domain.com 접속 => workers 작동 => 노션 페이지 수집 => 노션 페이지 출력

 

아래 이미지 순서에 맞게 새로운 workers를 생성해 주고 workers의 이름을 notion-worker로 변경해 줍니다.

성공적으로 workers를 만들었다면 이제 코드를 삽입해줄 차례입니다.

예시 코드 링크 https://woooo.notion.site/notion-workers-example-0b7c5e3b4fb844ce8ed98e259ea13867

 

notion-workers example

const MY_DOMAIN = '연결할 도메인 이름'; const SLUG_TO_PAGE = { '': '60ccea5dd70a4bb4afcaa67c39f6a555', }; const PAGE_TITLE = 'Bridgecode'; const PAGE_DESCRIPTION = ''; const GOOGLE_FONT = ''; const CUSTOM_SCRIPT = ``; const PAGE_TO_SLUG = {}; const

woooo.notion.site

 

위 링크에서 크게 봐야 할 건 1~6 LINE의 코드입니다. 아래 코드를 참조해 예제 코드에서 본인에 조건에 맞게 수정을 해준 뒤 이전에 만들었던 workers에 기입해주고 저장버튼을 눌러 저장해줍니다.

// 구매한 도메인 주소 
// ex) google.com
// 연결할 노션의 주소 
// ex) https://woooo.notion.site/a785b14c1dd4406da8287abf13997bc9

// 1. MY_DOMAIN 변수에 구매한 도메인 주소를 넣어줍니다. ex) google.com, naver.com ....
const MY_DOMAIN = 'google.com';

// 2. SLUG_TO_PAGE 변수에는 연결할 노션의 ID값을 넣어줍니다. 
// ex) https://woooo.notion.site/a785b14c1dd4406da8287abf13997bc9 에서는
// https://woooo.notion.site/ 이후 값 즉 a785b14c1dd4406da8287abf13997bc9 이 아이디 입니다.
const SLUG_TO_PAGE = {
  '': 'notionID',
};

// 3. PAGE_TITLE 변수는 크롬과 같은 브라우저 탭에 표시될 내용 입니다. 
const PAGE_TITLE = 'TITLE';

// 4. PAGE_DESCRIPTION 변수는 페이지의 설명을 뜻합니다.
const PAGE_DESCRIPTION = 'DESCRIPTION';

 

workers 저장 이후 다시 메인에 있는 workers 탭으로 이동한 뒤 아래 사진과 같이 경로 추가 버튼을 클릭합니다.

경로에 아래 이미지와 같이 입력해줍니다. worker에선 우리가 만들었던 notion-worker를 선택해 줍니다.

ex) 구매한 도메인/*, bridecode.kr/* ....

 

4. 연결 확인하기

 위 1,2,3 스텝을 통해 도메인 연결에 성공했고 가끔은 오류가 나서 코드를 몇 차례 수정해 주었긴 하지만 성공적으로 도메인과 노션 페이지를 연결했습니다.
참고로 저희가 도메인 구입에 사용했던 가비아는 name서버 변경에 하루 이상 소요가 될 수도 있다고 하니 참고하시어 지금 당장 안된다고 걱정하지 마시고 하루 이상 기다려 보는 게 좋습니다.

간단하게 웹서비스를 구축하는 것도 좋으나 공수가 많이 든다면 이렇게 노션을 통해 간단하게 회사 사이트를 구축하는것도 좋은 방법이라고 생각합니다. 하지만 이마저도 어렵거나 공수가 든다고 생각하시면 시중에 노션 페이지에 커스텀 도메인을 연결해주는 서비스도 존재하니 이용하시는 것도 추천드립니다.

 

5. 참조

 

notion site not showing - blank screen · Issue #113 · stephenou/fruitionsite

Hi all, is anyone else facing a blank screen with their webpage? I solved the baseDomain issue and things seem to work yesterday, but now the notion page is not appearing anymore. I have the follow...

github.com

 

Fruition - Build Your Next Website With Notion, For Free

Perfect for your portfolio, blog, landing page, or business site. Features: pretty links, custom domains, Google Fonts, SEO support, script injection.

fruitionsite.com

 

[Notion] 노션 공개 페이지에 도메인 연결하기

노션에서 작성한 모든 페이지는 공개 링크를 만들어 다른 사람에게 공유하거나 검색 엔진에 노출시킬 수 있다. 노션에 가입하지 않아도 누구나 방문할 수 있다는 말이다. 언제가 될진 모르겠지

romantech.net

 

IT기술을 통해
사람과 사람의 연결을 돕고
함께 성장해나가는
서비스를 만들어 갑니다.

브릿지코드(BRIDGE CODE)는 대기업 및 금융업 종사자들과 함께 시작, 팀은 웹 애플리케이션 개발에 대한 깊은 노하우를 보유중에 있습니다. 국내 리걸테크 및 핀테크 서비스를 제공하는 스타트업입니다. "사람과 사람의 연결"을 기술을 통해 만들어나가고 있습니다.

 

 

택슬리 바로가기

 

택슬리 :: SIMPLY.TAXLY

세금은 어렵지만 TAXLY는 쉬워요

taxly.kr

브릿지코드 바로가기

 

관련글 더보기

댓글 영역