nobelium

To set up your Nobelium blog, follow these steps:

1. Duplicate the Notion Template: Use the official Notion template and ensure it is shared to the public.
2. Fork the Repository: Fork the Nobelium project on GitHub.
3. Customize Configuration: Edit blog.config.js to match your preferences.
4. Update Assets (Optional): Replace favicon.svg and favicon.ico in the /public folder with your own.
5. Deploy to Vercel: Deploy the project to Vercel and configure the required environment variables.

You can run Nobelium locally or on a server using Docker. There are two methods: building from source or using the default image from GitHub Container Registry.

Method 1: Build from source

Use this method if you want to build the image yourself.

# set env
export NOTION_PAGE_ID=xxx # your NOTION_PAGE_ID
export IMAGE=nobelium:latest

# build with docker
docker build -t ${IMAGE} --build-arg NOTION_PAGE_ID .

# run with docker
docker run -d --name nobelium -p 3000:3000 -e NOTION_PAGE_ID=${NOTION_PAGE_ID} nobelium:latest

Method 2: Use default Docker image

Use this method to pull the pre-built image.

# pull image
docker pull ghcr.io/craigary/nobelium:main

# run with docker
docker run -d --name nobelium -p 3000:3000 -e NOTION_PAGE_ID=${NOTION_PAGE_ID} ghcr.io/craigary/nobelium:main

When deploying Nobelium (e.g., on Vercel), you must configure the following environment variables:

Note: It is recommended to use the public sharing method rather than providing an access token.

Changing Avatars

Nobelium fetches avatars from Gravatar. To change your avatar, set it on Gravatar using the same email address defined in your blog.config.js.

Missing Posts after Notion Grouping

Nobelium does not currently support Notion database grouping. If you use grouping in your Notion database, your posts may disappear. Workaround: Use Notion views with filters instead of grouping to manage your posts.

Set comment.provider to one of the supported providers: 'gitalk', 'utterances', or 'cusdis'.

• gitalk: Requires repo, owner, clientID, and clientSecret in comment.gitalkConfig.
• utterances: Requires repo in comment.utterancesConfig.
• cusdis: Requires appId in comment.cusdisConfig. You can also customize host and scriptSrc if using a self-hosted version.

comment: {
  provider: 'gitalk', // 'gitalk', 'utterances', or 'cusdis'
  gitalkConfig: {
    repo: '',
    owner: '',
    admin: [],
    clientID: '',
    clientSecret: '',
    distractionFreeMode: false
  },
  utterancesConfig: {
    repo: ''
  },
  cusdisConfig: {
    appId: '',
    host: 'https://cusdis.com',
    scriptSrc: 'https://cusdis.com/js/cusdis.es.js'
  }
}

To enable analytics, set the analytics.provider field to either 'ga' or 'ackee'.

• Google Analytics: Provide your ID in analytics.gaConfig.measurementId (e.g., G-XXXXXXXXXX).
• Ackee: Provide tracker, dataAckeeServer (without a trailing slash), and domainId in analytics.ackeeConfig.

The generateRss function creates an Atom 1.0 feed from an array of post objects. It uses the project's global configuration (title, description, link, lang, author, etc.) to populate the feed metadata and renders the full content of each post using the NotionRenderer.

Each post in the input array must contain the following properties:

• title: The title of the post.
• slug: The URL slug used to generate the post's unique ID and link.
• summary: A short description for the feed item.
• id: The Notion page ID used to fetch post blocks.
• date: A date string or object representing the post publication date.

The function returns an Atom 1.0 formatted string.

The getAllPosts function retrieves post data from a Notion database. It requires the NOTION_PAGE_ID environment variable to be set. The function processes the Notion database, extracts properties, converts dates to Unix millisecond timestamps, and applies filtering and sorting based on the project's configuration.

Parameters:

• includePages (boolean, default: false): If set to true, the returned array will include pages that do not meet the standard post requirements. If false, only published posts are returned.

Returns:

• An array of post objects, or null if the provided NOTION_PAGE_ID does not point to a valid Notion database (collection view or collection view page).

In a Next.js environment, use getStaticProps to fetch blog posts from Notion using getAllPosts. You can limit the number of posts displayed on the home page by slicing the array based on clientConfig.postsPerPage. The function returns postsToShow, the current page (defaulting to 1), and a showNext boolean indicating if more posts are available. It also includes a revalidate: 1 property for Incremental Static Regeneration (ISR).

export async function getStaticProps () {
  const posts = await getAllPosts({ includePages: false })
  const postsToShow = posts.slice(0, clientConfig.postsPerPage)
  const totalPosts = posts.length
  const showNext = totalPosts > clientConfig.postsPerPage
  return {
    props: {
      page: 1, // current page is 1
      postsToShow,
      showNext
    },
    revalidate: 1
  }
}