My New Hugo Site
Posts Tags Categories
My New Hugo Site

[Notion] 노션과 도메인 연결하기

Gunn Kim
     571 words   3 minutes 

markdown

Hugo blog powered by Notion
(노션으로 휴고 블로그 포스팅 하기)

Hugo로 빌드한 gunn.kim이라는 웹사이트를 운영중이고,
여기에 Notion을 붙여보려고 시도 중. 현재 1단계 진행
- (3단계) 노션을 작성한 글이 자동으로 블로그로 빌드되거나, (API+CI/CD)
- (2단계) 노션으로 작성한 글 리스트를 블로그로 볼 수 있거나, (HUGO, 자바 등으로 리스트 구현)
- (1단계) 노션 공개 페이지와 도메인 연결 (서버리스 컴퓨팅으로 간단한 코드를 돌려서 연결)

제목처럼 휴고 블로그를 완전히 노션과 붙인 것 3단계인데, 1단계부터 단계적으로 구현해볼 생각.

일단은 클라우드플래어(cloudflare)의 서버리스 컴퓨팅 서비스인 Workders를 이용하여 
notion의 공개 페이지와 도메인을 연결해 보았음.

Hugo(Static Site Generator의 하나)로 만든 블로그를 운영 중인데, Notion을 붙여보는 방법을 고민하고 있었다.

  • 역시나 세상은 넓고, 비슷한 생각을 하는 사람은 많고, 단순히 생각에 그치지 않고 실행에 옮기고, 구현하는 능력자들이 많다.
  • 궁극적으로는 노션에서 작성한 posts가 hugo로 자동으로 build되는 블로그를 고민하고 있는데,

일단은 중간 단계로 노션의 공개 페이지와 도메인을 붙여보는 것을 시도해 보았다.

  • notion의 공개 페이지 ↔ https://notion.gunn.kim

    • 특정 페이지를 메인 페이지로 해서 서브페이지들을 만들면, 만드는 대로 도메인이 연결된다!
    • 참고한 사이트는 아래와 같다.

  • cloudflare의 workers를 이용하는 방법인데,

    • 간단한 코드를 실행하여 노션의 공개 페이지를 지정한 도메인으로 지속적으로 포워딩해주는 것으로 이해가 된다.
    • 아래 코드를 cloudflare의 Workers에 넣으면 된다.

    python

    # 출처: https://romantech.net/1046 [로맨테크]

const MY_DOMAIN = "서브 도메인 주소"
const START_PAGE = "노션 공개 페이지 주소"
addEventListener('fetch', event => {
event.respondWith(fetchAndApply(event.request))
})
const corsHeaders = {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, HEAD, POST,PUT, OPTIONS",
"Access-Control-Allow-Headers": "Content-Type",
}
function handleOptions(request) {
if (request.headers.get("Origin") !== null &&
request.headers.get("Access-Control-Request-Method") !== null &&
request.headers.get("Access-Control-Request-Headers") !== null) {
// Handle CORS pre-flight request.
return new Response(null, {
headers: corsHeaders
})
} else {
// Handle standard OPTIONS request.
return new Response(null, {
headers: {
"Allow": "GET, HEAD, POST, PUT, OPTIONS",
}
})
}
}
async function fetchAndApply(request) {
if (request.method === "OPTIONS") {
return handleOptions(request)
}
let url = new URL(request.url)
let response
if (url.pathname.startsWith("/app") && url.pathname.endsWith("js")) {
response = await fetch(`https://www.notion.so${url.pathname}`)
let body = await response.text()
try {
response = new Response(body.replace(/www.notion.so/g, MY_DOMAIN).replace(/notion.so/g, MY_DOMAIN), response)
// response = new Response(response.body, response)
response.headers.set('Content-Type', "application/x-javascript")
console.log("get rewrite app.js")
} catch (err) {
console.log(err)
}
} else if ((url.pathname.startsWith("/api"))) {
response = await fetch(`https://www.notion.so${url.pathname}`, {
body: request.body, // must match 'Content-Type' header
headers: {
'content-type': 'application/json;charset=UTF-8',
'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36'
},
method: "POST", // *GET, POST, PUT, DELETE, etc.
})
response = new Response(response.body, response)
response.headers.set('Access-Control-Allow-Origin', "*")
} else if (url.pathname === `/`) {
let pageUrlList = START_PAGE.split("/")
let redrictUrl = `https://${MY_DOMAIN}/${pageUrlList[pageUrlList.length-1]}`
return Response.redirect(redrictUrl, 301)
} else {
response = await fetch(`https://www.notion.so${url.pathname}`, {
body: request.body, // must match 'Content-Type' header
headers: request.headers,
method: request.method, // *GET, POST, PUT, DELETE, etc.
})
}
return response
}

  • 마치 aws의 람다(lambda)와 비슷한 서버리스 컴퓨팅이나 Gitlab의 CI/CD와 유사한 기반으로 구현되는 것으로 보인다.

    • (이후) 워커스를 이용하니 웰컴 메일이 왔는데, 서버리스 앱이라고 명시적으로 해놓았다.
    • 점점 더 서버리스관련 서비스들이 더 많이 눈에 띈다.

  • 암튼, 위 참고 사이트에서 아주 상세하게 설명을 해주고 있어서, 쉽게 노션과 도메인을 연결할 수 있었다.

앞으로는,

  • https://gunn.kim에 https://notion.gunn.kim 의 메인 페이지에 올라온 새로운 페이지들 목록을 보여줄 수 있는 기능을 구현해 보고자 한다.
  • 그리고, 일부 능력자들이 구현해 놓을 것처럼, 노션에 글을 쓰면 블로그에 바로 포스팅되는 기능도 구현해 보고자 한다.

결과적으로,

  • gunn.kim 의 about 페이지에도 설명을 해놓았지만, 외장 두뇌 궁극적 버전의 prototype이 나올 수 있을 것으로 보인다.
  • 정보를 오거나이징하고 퍼블리쉬함으로써 뇌를 비우고, 뇌를 아끼는 방법!
Updated on 2024-11-01
 | Home