Getting Started

1. Fork

1.1. Go to Noxionite Repository and Fork

Go to Noxionite github repository.

Noxionite

alemem64 • Updated Dec 18, 2025

Click Fork Button.

Change the repository name and description. And Click “Create Fork”

Copy your repository link.

If you don't have git, install it and clone your repository.


git clone YOUR-COPIED_LINK

2. Blog Language Settings

From the list below, remember the locale of the language you want to build.

Example: ‘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": "简体中文"
}

In the project folder, open the site.locale.json file and modify it as shown below.


{
  "localeList": ["en", "ko"],
  "defaultLocale": "en"
}

List the desired locales in localeList. Then, set the default value to defaultLocale.

3. Notion Token Settings

⚠️

This token has editing rights to your Notion page, so never expose it publicly.

3.1. Log in to any page of your Notion and access it.

3.2. Open Developer Tools.

You can open it by pressing F12 or right-clicking anywhere on the page and clicking the ‘Inspect’ button.

3.3. Go to the ‘Application’ tab.

3.4. In ‘Cookies’, select https://www.notion.so and copy the value of `token_v2`.

3.5. In the project folder, open `.env.example` and paste the value.

3.6. Change the name of `.env.example` to `.env`.

4. Modify `site.config.ts`

In the project folder, open the site.config.ts file and modify it.

4.1. `notionDbIds`

Go to the link below.

Blog Database Template | Notion

Made with Notion, the all-in-one connected workspace with publishing capabilities.

https://alemem64.notion.site/21df2d475c31812dae49d1b1735e02b4?v=21df2d475c318199bc6f000c60b98613

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'
  ],

4.2. `name`

This is the name of the blog.

4.3. `domain`

This is the domain where you will deploy your blog. If you are not using a custom domain, please set it to name.vercel.app.

4.4. `author`

This is the name of the blog owner.

4.5. `heroAssets` (Optional)

If routed to the homepage, it will show an image or video from public/hero-assets/ as the background. If the value below is left empty, the Hero will not be created.


heroAssets: [
  {
    type: 'video',
    src: 'https://pub-95020314d8e64caea687d48c69c6cd9b.r2.dev/noxionite-shiny-short.mov',
    url: 'https://noxionite.vercel.app/',
    content: {
      en: {
        title: 'Noxionite',
        description: 'Your Notion pages, reborn as a stunning blog.'
      },
      ko: {
        title: 'Noxionite',
        description: 'Notion으로 만드는 가장 아름다운 블로그'
      }
    }
  },
]

4.5.1. Instagram Story-like progress bar

You can list multiple elements in heroAssets to display multiple media.

4.5.2. type (Required)

If it's a video, set it to ‘video’, and if it's an image, set it to ‘image’.

4.5.3. src (Required)

Enter the file path of the media. You can omit public/ and start from hero-assets/.

Most extensions are supported.


...
  src: 'hero-assets/noxionite-shiny-short.mov',
...

However this approach will consume data transferring usage of vercel very quickly. So I recommend to use Cloudflare. It is free up to 10GB per month.

Connect, protect, and build everywhere

Make employees, applications and networks faster and more secure everywhere, while reducing complexity and cost.

https://www.cloudflare.com/

First, go to cloudflare website.

Enter the Bucket name and click the Create bucket button.

Upload assets to bucket.

Go to Settings tab of the bucket and Enable the Public Development URL. And copy the URL looks like below.

https://pub-95020314d8e64caea687d48c69c6cd9b.r2.dev

You can enter the src link like below.


...
  src: 'https://pub-95020314d8e64caea687d48c69c6cd9b.r2.dev/noxionite-shiny-short.mov',
...

4.5.4. url (Optional)

You can enter a URL to route to the ‘Learn More’ button in the bottom right.

4.5.5. content (Optional)

List by locale.

4.6. `authors` (Optional)

You can add an avatar image to the page's author and make it link to a specific page when clicked.

4.6.1. `name`

This is the author name to detect. It must be the same value as in the Authors property of the Blog Database.


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`

Add the author's avatar image in public/authors/. It will be automatically cropped into a circle, so you should use a square image.

4.6.3. `home_url`

Enter the URL address to redirect to when the author is clicked.

4.7. `socials` (Optional)

Enter the addresses for the SNS buttons at the top and bottom of the page. You can change the order of the buttons, and they will be automatically removed if you comment them out.


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 (Optional)

5.1. `public/icon.png`

Use a transparent PNG with a resolution of 512 x 512. The corners will not be rounded. It is used for most site icons.

5.2. `public/apple-touch-icon.png`

This is the icon that appears when you add a shortcut to the home screen in Safari. Use a PNG with a resolution of 180 x 180. It should be a full-bleed image without rounded corners. Apple devices will automatically apply rounded corners.

5.3. `public/favicon.ico`

It is used as the favicon for the web page. Use an ICO with a resolution of 32 x 32. Make it full-bleed without rounded corners.

6. Writing a Post

Posts can only be written in the Blog Database. You can refer to the page below where this blog is running to create one.

Noxionite | Notion

Made with Notion, the all-in-one connected workspace with publishing capabilities.

https://alemem64.notion.site/Noxionite-251f2d475c3180d28fb1c28911fbbe75?source=copy_link

6.1. `Public` (Required)

If not checked, it will be as if the post never existed on the blog. It must be checked to be uploaded to the blog.

6.2 `Type` (Required)

There are three types: Category, Home, Post and Database. Category is used to manage posts hierarchically. Home is similar to Post, but Home provides a shortcut on the home screen.

A database can be assigned a name and an icon according to its locale. In this case, the Title becomes the displayed name of the database, and the Slug is used as its routing path. You can set a different Title and icon for each locale depending on the Language. To specify the database's icon, you can set the cover image for that page. If Public, Title, or Slug is missing, the database will not be displayed. Each database must have at least one database page.

6.3. `Title` (Required)

Defines the category name or post name.

6.4. `Parent`, `Children` (Optional)

On the Home or Post page, you can select a Category to organize your posts in a folder structure. If one of Parent or Children is set, the other is automatically reflected.

If no value is entered, it becomes the top level in the hierarchy.

6.5. `Language` (Required)

Enter the locale corresponding to the localeList defined in ‘2. Blog Language Settings’. All pages for each locale are managed separately.

6.6. `Slug` (Required)

noxionite routes in the following format.

/{locale}/post, category/{slug}

The slug must be in English only and must not be duplicated between pages. Locales must have the same slug.