노션으로 개발자 포트폴리오 사이트를 만들자.

기존의 문제점

노션에서 포트폴리오를 작성해서 자신만의 포트폴리오를 만드시는 분들이 요즘들어 더 많아지신 것 같습니다.

그런데, 다 만들고나니 불편한 점이 있으실 겁니다.

이런식으로 링크가 엉망이 되어서 공유가 된다는 점인데요,

링크가 이렇게 복잡할 경우 몇가지 문제점이 있습니다.

그래서 저는 이를 해결하기 위한 방법들을 찾아보았습니다.

여기서 우피란 노션에 작성된 페이지를 바로 웹사이트화 시켜주는 서비스인데, 유료 서비스 이기 때문에

월마다 비용이 발생합니다.

그래서 저는 Notion-Next.js-blog-starter-kit 이라는 Next.js 테마를 Vercel에서 배포하는 방식을 선택했습니다.

그러면 무료로 노션 페이지를 배포할 수 있게 됩니다.

테마를 설치하고 설정하는 기본적인 방법에 대해서는 개발자분이 상세하게 적어주셨습니다.

아래의 링크를 타고 들어가주세요.

Nextjs + Notion 블로그 사용하기

transitive-bullshit/nextjs-notion-starter-kit 기반의 커스텀 블로그 스타트킷. 노션에서 작성한 글을 Next.js ISR 방식으로 페이지 자동 생성

blog.2skydev.com

위에서 테마를 깃허브에 정상적으로 설치가 되었다고 가정하고, Vercel에서 배포하는 방법을 알려드리겠습니다.

먼저 vercel.com 으로 이동해줍니다.

Vercel: Build and deploy the best web experiences with the Frontend Cloud – Vercel

Vercel's Frontend Cloud gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized web.

vercel.com

그 다음, 회원가입을 진행해주시고 [Add New... - Project] 을 눌러서 이동해주시길 바랍니다.

그러면 아래와 같은 창이 보이게됩니다.

이제 저희가 설치한 Notion-Next.js-blog-starter-kit 의 옆의 Import 버튼을 클릭해주시면 됩니다.

아래와 같은 화면이 뜨면 정상적으로 설치된 것입니다.

[Settings - Domain] 에 들어가서

자신의 도메인 (본인 소유의 도메인이어야 합니다.) 을 입력하고 Add 버튼을 누르면 됩니다.

DNS 레코드 설정은 Cloudflare 기준으로

CNAME - 도메인명 - cname.vercel-dns.com

위와 같이 설정해주시면, 정상적으로 도메인으로 접속이 가능해집니다.