Building your portfolio website backed by Notion as CMS

Find my latest work at delger.vercel.app Contact me at delger.bayanmunkh6@gmail.com → Let’s build something 🛠️

Managing your own static personal portfolio website codebase is an extra hassle. Therefore, I have been thinking of managing my showcase on notion and publishing it to the web. Notion’s use case for this cause is great but there are some cons to this raw solution:

1. You don’t have your own domain. 2. Your website personalization is limited to notion’s capabilities. However, notion is pretty much capable of everything there are still some cases for developers like us.

I have found this great repository by Travis Fischer which is deploy ready codebase with single file configuration.

Aims of this post

To have a personal website deployed on vercel

Manage the website content from Notion.

Prepare the public Notion page

I recommend you to duplicate the template suggested by the template maintainer. Because the react renderer of notion blocks is slightly different from notion itself you might see some glitches in custom pages.

Duplicate the template by clicking here.

Make the duplicated notion page public by clicking the share button on the right top side of viewport.

Copy the id of the notion page.

By seeing the browser url you should see the page id concatenated afterwards. Like the red highlighted section below.


https://www.notion.so/delgerskhn/Build-with-Deegii-a6bbe299ad9345a7b7bf536ecd1a6b6c

The notion part is done. Let’s setup the website now.

Setting up the project repository

Clone the repository to your local machine

You can see the site.config.ts file in root directory. Make changes in this file according to your preferences and replace rootNotionPageId value to the notion page id copied from previous section.


//site.config.ts
import { siteConfig } from './lib/site-config'

export default siteConfig({
  // the site's root Notion page (required)
  rootNotionPageId: 'a6bbe299ad9345a7b7bf536ecd1a6b6c',

  // if you want to restrict pages to a single notion workspace (optional)
  // (this should be a Notion ID; see the docs for how to extract this)
  rootNotionSpaceId: null,

  // basic site info (required)
  name: 'Build with Deegii 🛠️',
  domain: 'delger.vercel.app',
  author: 'Delgersaikhan Bayanmunkh',

  // open graph metadata (optional)
  description: 'Journey of software creation with Deegii 💪',

  // social usernames (optional)
  twitter: undefined,
  github: 'delgerskhn',
  linkedin: 'delgersaikhan-bayanmunkh',
  // mastodon: '#', // optional mastodon profile URL, provides link verification
  // newsletter: '#', // optional newsletter URL
  // youtube: '#', // optional youtube channel name or `channel/UCGbXXXXXXXXXXXXXXXXXXXXXX`

  // default notion icon and cover images for site-wide consistency (optional)
  // page-specific values will override these site-wide defaults
  defaultPageIcon: null,
  defaultPageCover: null,
  defaultPageCoverPosition: 0.5,

  // whether or not to enable support for LQIP preview images (optional)
  isPreviewImageSupportEnabled: true,

  // whether or not redis is enabled for caching generated preview images (optional)
  // NOTE: if you enable redis, you need to set the `REDIS_HOST` and `REDIS_PASSWORD`
  // environment variables. see the readme for more info
  isRedisEnabled: false,

  // map of notion page IDs to URL paths (optional)
  // any pages defined here will override their default URL paths
  // example:
  //
  // pageUrlOverrides: {
  //   '/foo': '067dd719a912471ea9a3ac10710e7fdf',
  //   '/bar': '0be6efce9daf42688f65c76b89f8eb27'
  // }
  pageUrlOverrides: null,

  // whether to use the default notion navigation style or a custom one with links to
  // important pages. To use `navigationLinks`, set `navigationStyle` to `custom`.
  navigationStyle: 'default'
  // navigationStyle: 'custom',
  // navigationLinks: [
  //   {
  //     title: 'About',
  //     pageId: 'f1199d37579b41cbabfc0b5174f4256a'
  //   },
  //   {
  //     title: 'Contact',
  //     pageId: '6a29ebcb935a4f0689fe661ab5f3b8d1'
  //   }
  // ]
})

Also, consider changing the favicon.ico image file in public directory for changing the site header icon in browser.

And you are good to deploy your website.

Deploy to vercel

Having the website configs complete, you are now ready to deploy it to vercel. You can deploy it either using vercel cli or github actions. Let’s go with github integration this time.