Skip to main content

[개발 블로그 만들기 3탄] CloudFlare에 Notion 연동하기

Duduling
Duduling
Front-end Web Developer

Thumbnail

Intro​

Domain이 있어서 블로그 도메인과 통합할 생각으로 노션 페이지에 서브 도메인을 연결하다가 기록한 내용이다.

Contents​

Notion Page 공유​

setting-1-picture

먼저 Notion page를 공개 페이지로 변경해야 한다.

CloudFlare 설정​

Fruition - Build Your Next Website With Notion, For Free

위에 링크로 접속해 나온 Step에 따라 진행하면 된다.

cloudFlare-1-picture

이미 클라우드 플레어가 구축 되어 있다면 위 사진과 같이 저 부분만 채워서 COPY THE CODE 누르면 아래와 같이 코드가 나온다.

Example Code​

/* CONFIGURATION STARTS HERE */

/* Custom - Start */

/* Step 1: enter your domain name like fruitionsite.com */
const MY_DOMAIN = "";

/*
 * Step 2: enter your URL slug to page ID mapping
 * The key on the left is the slug (without the slash)
 * The value on the right is the Notion page ID
 */
const SLUG_TO_PAGE = {
  "": "", // When it comes in by key, it routes to the value.
};

/* Step 3: enter your page title and description for SEO purposes */
const PAGE_TITLE = "";
const PAGE_DESCRIPTION = "";

/* Step 4: enter a Google Font name, you can choose from https://fonts.google.com */
const GOOGLE_FONT = "";

/* Step 5: enter any custom scripts you'd like */
const CUSTOM_SCRIPT = ``;

/* Custom - End */

/* CONFIGURATION ENDS HERE */
// #region
const PAGE_TO_SLUG = {};
const slugs = [];
const pages = [];

// ... Blah Blah Skip

async function appendJavascript(res, SLUG_TO_PAGE) {
  return new HTMLRewriter()
    .on("title", new MetaRewriter())
    .on("meta", new MetaRewriter())
    .on("head", new HeadRewriter())
    .on("body", new BodyRewriter(SLUG_TO_PAGE))
    .transform(res);
}

Custom 이 부분만 변수에 맞게 수정하면 된다.

Worker 생성하기​

worker-1-picture

  1. Worker 관리로 들어간다.

worker-2-picture

  1. 서비스 생성을 클릭한다. → 이름을 적당히 지어주고 생성을 누른다. (스타터는 기본으로 하면 된다.)

worker-3-picture

  1. 생성이 완료되면 해당 서비스에 들어가 빠른 편집을 통해 위에서 만든 코드를 삽입 해준다.

worker-4-picture

  1. 다시 1번 페이지로 돌아와 해당 워커 편집을 눌러주고 서브 도메인.메인 도메인/*을 적어 주고 아래에는 해당 워커랑 연결해주면 된다.

DNS 연결하기​

dns-1-picture

DNS에 기존 루트 도메인은 위와 같이 연결해주고 서브 도메인은 이름에 서브도메인을 넣고 Vercel의 아이피와 함께 Proxy 상태로 연결해주면 마무리가 된다.

Outro​

complete-picture

짜잔! 완성!!! 👍👍👍👍

중간 중간 자료가 없어서 헤매기도 했지만 찾다보니 뭐 어찌어찌 했다. 🥲

Reference

https://fruitionsite.com

https://vercel.com/support/articles/using-cloudflare-with-vercel