1. Fork
1.1. Noxionite Repository를 Fork하기
Noxionite github repository로 이동합니다.
Noxionite
alemem64 • Updated Dec 18, 2025
Fork 버튼을 클릭합니다.
Repository 이름과 설명을 바꾸고 “Create Fork” 버튼을 클릭합니다.
만든 repository의 링크를 복사합니다.
Git이 없다면 설치한 다음 fork한 repository를 clone합니다.
git clone YOUR-COPIED_LINK
2. 블로그 언어 설정
아래 목록에서 구축하고 싶은 언어의 locale을 기억해둡니다.
예시: ‘en’, ‘ko’
{ "lang_ar": "العربية", "lang_bn": "বাংলা", "lang_de": "Deutsch", "lang_en": "English", "lang_es": "Español", "lang_fa": "فارسی", "lang_fr": "Français", "lang_he": "עברית", "lang_hi": "हिन्दी", "lang_id": "Bahasa Indonesia", "lang_it": "Italiano", "lang_ja": "日本語", "lang_ko": "한국어", "lang_nl": "Nederlands", "lang_pl": "Polski", "lang_pt": "Português", "lang_ru": "Русский", "lang_sv": "Svenska", "lang_th": "ภาษาไทย", "lang_tr": "Türkçe", "lang_uk": "Українська", "lang_vi": "Tiếng Việt", "lang_zh": "简体中文" }
프로젝트 폴더에서
site.locale.json 파일을 열고 아래처럼 수정합니다.{ "localeList": ["en", "ko"], "defaultLocale": "en" }
localeList에 원하는 locale을 나열합니다. 이후 기본 값을 defaultLocale로 둡니다.3. Notion 토큰 설정
해당 토큰은 Notion 페이지의 편집 권한을 가지고 있으므로 절대 외부에 공개하지 마세요.
3.1. 본인 Notion의 아무 페이지에 로그인 후 접속합니다.
3.2. 개발자 도구를 엽니다.
F12를 누르거나 페이지 아무 곳을 우클릭하고 ‘검사’ 버튼을 클릭하여 열 수 있습니다.
3.3. ‘애플리케이션’ 탭으로 이동합니다.
3.4. ‘쿠키’에서 https://www.notion.so 를 선택하고 token_v2 의 값을 복사합니다.
3.5. 프로젝트 폴더에서 .env.example 을 열고 값을 붙여 넣습니다.
3.6. .env.example 의 이름을 .env 로 변경합니다.
4. site.config.ts 수정
프로젝트 폴더에서
site.config.ts 파일을 열고 수정합니다.4.1. notionDbIds
아래 링크로 이동합니다.
복제 버튼을 클릭합니다.
개인 워크스페이스에 추가합니다.
복제가 끝나면 Publish를 합니다.
공유된 페이지의 링크를 복사합니다.
복사된 url은 아래와 같은 형식인데요. 이때 파란색 부분을 찾아 따로 복사합니다.
https://alemem64.notion.site/21df2d475c31812dae49d1b1735e02b4?v=21df2d475c318199bc6f000c60b98613&source=copy_link
notionDbIds 는 array 형태로 둘 수 있고 아래와 같이 여러개의 database를 가져올 수 있습니다.notionDbIds: [ '251f2d475c3181c3a9f2ff6f477bbf25', '21df2d475c31812dae49d1b1735e02b4' ],
4.2. name
블로그의 이름입니다.
4.3. domain
블로그를 deploy할 도메인입니다. 개인 도메인으로 하지 않는다면
name.vercel.app 으로 설정해주세요.4.4. author
블로그의 소유자 이름입니다.
4.5. heroAssets (선택)
홈페이지에 라우팅 되었다면
public/hero-assets/ 의 이미지 또는 비디오를 배경으로 보여줍니다. 아래 값을 비워두면 Hero가 만들어지지 않습니다.heroAssets: [ { type: 'video', src: '/hero-assets/noxionite-shiny.mov', url: 'https://bit.ly/alemem64', content: { ko: { title: 'Noxionite', description: 'Notion으로 만드는 가장 아름다운 블로그' }, en: { title: 'Noxionite', description: 'Your Notion pages, reborn as a stunning blog.' } } }, ],
4.5.1. 인스타그램 스토리 느낌의 재생바
heroAssets에 여러 요소를 나열해서 여러개의 미디어를 보이게 할 수 있습니다.
4.5.2. type (필수)
동영상이라면
‘video’ 로 두고 이미지라면 ‘image’ 로 둡니다.4.5.3. src (필수)
미디어의 파일 경로를 입력합니다.
public/ 은 생략하고 hero-assets/ 부터 입력하면 됩니다.대부분의 확장자를 지원합니다.
4.5.4. url (선택)
url을 입력해서 오른쪽 아래 ‘자세히 보기’ 버튼으로 라우팅할 수 있습니다.
4.5.5. content (선택)
locale 별로 나열합니다.4.6. authors (선택)
페이지의 저자에 아바타 이미지를 넣고 클릭시 특정 페이지로 이동되게 할 수 있습니다.
4.6.1. name
감지할 author 이름입니다. Blog Database의
Authors 에서 해당 이름을 찾아내므로 같은 값을 넣어야 합니다.authors: [ { name: 'Jaewan Shin', // Author name avatar_dir: '/authors/Jzahnny.jpeg', // Author avatar image path in public folder home_url: 'https://jzahnny.vercel.app', // Author home URL } ],
4.6.2. avatar_dir
public/authors/ 에서 해당 저자의 아바타 이미지를 추가합니다. 자동으로 원형으로 잘리므로 정사각형 형태의 이미지를 넣으면 됩니다.4.6.3. home_url
해당 저자를 클릭하면 이동시키게 할 url 주소를 넣습니다.
4.7. socials (선택)
페이지 상단과 하단에 들어가는 SNS 버튼 주소를 입력합니다. 버튼의 순서를 바꿀 수 있고 주석 처리 하면 자동으로 빠집니다.
socials: { github: 'alemem64', // optional github username linkedin: 'alemem64', // optional linkedin username youtube: 'channel/UCV7iVbVip33wD_rsiQLSubg?si=Tf0bKAPvtDY_J833', // optional youtube channel id eg. channel/UCXXXXXXXXXXXXXXXXXXXXXX instagram: 'alemem64', // optional instagram username // tiktok: '#', // optional tiktok username // threads: '#', // optional threads username // facebook: '#', // optional facebook profile id on profile page eg. 1000XXXXXXXXXXX // twitter: '#', // optional twitter username // mastodon: '#', // optional mastodon profile URL, provides link verification // newsletter: '#' // optional personal newsletter URL },
5. Favicon (선택)
5.1. public/icon.png
512 x 512 해상도의 투명 png로 넣습니다. 모서리 둥글게가 적용되지 않고 그대로 들어갑니다. 대부분의 사이트 아이콘으로 사용됩니다.
5.2. public/apple-touch-icon.png
Safari에서 바탕화면 바로가기 추가시 나오는 아이콘입니다. 180 x 180 해상도의 png로 넣습니다. 모서리 둥글게 없이 꽉 차게 해야합니다. Apple 기기에서 자동으로 모서리 둥글게를 적용합니다.
5.3. public/favicon.ico
웹페이지의 favicon으로 사용됩니다. 32 x 32 해상도의 ico로 넣습니다. 모서리 둥글게 없이 꽉 차게 만듭니다.
6. 글 작성하기
글은 Blog Database에서만 작성할 수 있습니다. 이 블로그가 작동하고 있는 아래 페이지를 참고해서 만들면 됩니다.
6.1. Public (필수)
체크하지 않으면 블로그에 처음부터 없었던 것처럼 만듭니다. 체크를 해야 블로그에 업로드됩니다.
6.2 Type (필수)
Category, Home, Post, Database의 type이 존재합니다. Category 를 통해 글을 계층적으로 관리합니다. Home 은 Post 와 비슷하지만 Home 은 홈화면에 바로가기가 제공됩니다.
Database는 각 database의 이름을 부여하고 icon을 locale에 따라 지정할 수 있습니다. 이때
Title 이 database가 표시되는 이름이 되고 Slug 가 해당 라우팅 경로로 사용됩니다. Language 에 따라 locale마다 보여줄 Title과 icon을 다르게 설정할 수 있습니다. database의 아이콘을 지정하려면 해당 page의 커버 이미지를 지정해주면 됩니다. Public, Title, Slug 가 없다면 해당 database는 표시되지 않습니니다. Database page는 각 database마다 1개 이상 반드시 있어야 합니다.6.3. Title (필수)
카테고리명 또는 포스트명을 정의합니다.
6.4. Parent, Children (선택)
Home 이나 Post 페이지에서 Category 를 선택해서 폴더식으로 글을 정리할 수 있습니다. Parent, Children은 둘 중 하나가 정해지면 나머지는 자동으로 반영됩니다.
값을 입력하지 않으면 계층 구조에서 최상위 레벨이 됩니다.
6.5. Language (필수)
‘2. 블로그 언어 설정’에서 정의한
localeList 에 해당하는 locale을 입력합니다. 각 locale마다 모든 페이지는 따로 관리됩니다.6.6. Slug (필수)
noxionite는 아래 형태로 라우팅합니다.
/{locale}/post, category/{slug}
slug는 영어로만 적어야 하고 페이지간 중복이 있으면 안 됩니다. locale끼리는 서로 동일한 slug를 가져야 합니다.
6.7. Tags (선택)
여러개의 태그를 입력할 수 있습니다. 띄어쓰기나 특수문자 등 모든 문자를 지원합니다.
Home과 Post 에 대해서만 적용됩니다.
6.8. Description (선택)
SNS에 공유하거나 페이지 목록 보기에서 나타납니다.
Home과 Post 에 대해서만 적용됩니다.
6.9. Authors (선택)
여러명의 저자를 둘 수 있습니다. ‘4.7.
authors (선택)’에서 입력한 대로 버튼이 만들어집니다.Home과 Post 에 대해서만 적용됩니다.
6.10. Published (선택)
포스트가 게시된 날짜를 입력합니다.
Home과 Post 에 대해서만 적용됩니다.
6.11. Use Original Cover Image (선택)
체크하면 글 상단에 표시되는 커버 이미지를 자동 생성되는 소셜 이미지가 아니라 원본 이미지로 나타나게 합니다. SNS에 공유할 때도 원본 이미지로 공유됩니다.
Home과 Post 에 대해서만 적용됩니다.
7. Vercel에 Deploy
Git Push하고 vercel을 통해 Deploy합니다.
이때
NOTION_TOKEN_V2 env를 등록하는 것을 잊지 마세요. 해당 env를 등록하지 않으면 Notion page의 본문 내용을 가져올 수 없습니다.
4.1. notionDbIds
Go to the link below.
Click the duplicate button.
Add template page at your workspace.
When duplication is done, publish your page.
And copy shared page link.
From the URL, find the blue part as shown below, copy it.
https://alemem64.notion.site/21df2d475c31812dae49d1b1735e02b4?v=21df2d475c318199bc6f000c60b98613&source=copy_link
notionDbIds is a array of that kind of Notion database ids. You can import multiple database like this.notionDbIds: [ '251f2d475c3181c3a9f2ff6f477bbf25', '21df2d475c31812dae49d1b1735e02b4' ],