Migration and Restructuring of the Blog

This article discusses the Nobelium framework that was previously used for this blog on Notion. The blog has now switched to the Astro framework.

Finding#

In February of this year, I migrated the blog from Typecho to Notion due to server issues, using Super.so as the driver. To be honest, I wasn't very satisfied overall, mainly for the following three reasons:

Super.so has not yet provided RSS subscription for blogs. Initially, I used an RSS feed created with rss.com, but found it unstable and unable to output full text; then I switched to fetchrss.com, which could only display full text in some RSS readers; finally, I saw DIYgod's new project, the open-source blog xLog, which solved the RSS issue.
Super.so also does not integrate a commenting feature. Although my blog doesn't receive many comments, there are still some. Even when I found Tally, it was criticized for having a high barrier to entry for readers.
Super.so is more suitable for building simple websites rather than blogs. Using Notion + Super.so as a CMS is very appropriate, but if you simply want to create a blog, especially as content increases, the issues of complex and chaotic page management become apparent.

So, I began searching for a blogging service that matched Notion better.

There are many projects that utilize Notion for website building. After screening, I selected four: Feather.so, Notablog, NotionNext, and Nobelium.

Feather.so is excellent; if you want to use Notion as a blog, this is the best driving service. It not only has RSS but also a commenting feature, very good SEO optimization, and smooth page management logic... However, good services often come with high prices; I found Super.so at $12 per month expensive, let alone this one at $39 per month.

Notablog is a project I have been following for a long time, open-sourced by a Chinese-American on GitHub. The overall feel is very simple and elegant, and the operation and management logic is clear, making it easy to deploy on a VPS. However, this project has not seen much update in the past year.

NotionNext is a project I previously deployed, and I not only wrote articles about it but also recommended it to several friends. So far, the developer's updates are still frequent, and they have been diligently maintaining it. However, the support for Notion Block is not comprehensive, and updating can be a bit troublesome, which is not suitable for someone as lazy as me.

Nobelium, like Notablog and NotionNext, is an open-source project on GitHub, but it differs significantly from the latter two. Notablog is more like a personal website; NotionNext, due to its support for many themes, appears much fancier; Nobelium is a minimalist blog, without flashy rendering, variable themes, or complex functions. The ordinary Nobelium gave me a sense of returning to simplicity; isn't that what a personal blog should be?

Deployment#

The deployment of Nobelium is not complicated; the developer has written it very detailed on the GitHub project page, so I will just briefly explain.

Step 1: Copy the Notion template to your own Notion account.

Each property in this database is very easy to understand.

Note

Database Property Definitions

title: The title of the article;
date: The time the article was published; if left blank, it defaults to the article creation time;
slug: The characters at the end of the article URL, which is the part after .com/xxx, recommended to use English and replace spaces with -; if using Chinese or spaces, punctuation, it will be UrlEncoded into a long string, making the link look long and unsightly;
summary: A brief introduction to the article, displayed at the bottom of the homepage title;
tags: Article tags, which can classify the article;
status: The article status; only articles with the Published status will be publicly displayed on the blog; Draft is the draft status, Idea is the idea status, Revise is the revision status; these three statuses will not be publicly displayed on the blog;
type: Post will be directly displayed on the homepage, Page will only be displayed when the URL is directly accessed and will not appear in the homepage article list.

Step 2: After forking the project to your GitHub account, you need to modify the contents of blog.config.js.

const BLOG = {
  title: "CRAIGARY", // Your blog name (title)
  author: "Craig Hart", // Your nickname
  email: "[email protected]", // Your email
  link: "https://nobelium.vercel.app", // Your blog URL
  description: "This gonna be an awesome website.", // Your blog description (subtitle)
  lang: "en-US", // Language, 'en-US' for English, 'zh-CN' for Simplified Chinese, 'zh-HK' for Traditional Chinese (Hong Kong), 'zh-TW' for Traditional Chinese (Taiwan), 'ja-JP' for Japanese, 'es-ES' for Spanish
  timezone: "Asia/Shanghai", // Time zone, more details can be found at https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
  font: "sans-serif", // Font, 'sans-serif' for sans-serif font, 'serif' for serif font
  lightBackground: "#ffffff", // Light background, use hexadecimal color, e.g., #fffefc, remember not to forget #
  darkBackground: "#18181B", // Dark background, use hexadecimal color, remember not to forget #
  path: "", // Unless you want to deploy in a folder, keep this empty
  since: 2021, // Blog start date; if left blank, the current year will be used
  sortByDate: false, // Sort by date; false means no, true means yes
  showAbout: true, // Show about this site
  showArchive: true, // Show archive
  autoCollapsedNavBar: false, // Automatically collapse the navigation bar
  ogImageGenerateURL: "https://og-image-craigary.vercel.app", // Generate OG image link
  socialLink: "https://twitter.com/craigaryhart", // Social media link; after filling this, clicking your nickname on the article page will redirect to the corresponding platform
  seo: {
    keywords: ["Blog", "Website", "Notion"], // Keywords
    googleSiteVerification: "", // Remove this value or replace it with your own Google site verification code
  },
  notionPageId: process.env.NOTION_PAGE_ID, // Do not change this!!!
  notionAccessToken: process.env.NOTION_ACCESS_TOKEN, // Use this if you do not want to make the database public
  analytics: {
    provider: "", // Currently supports Google Analytics and Ackee for visitor statistics; fill 'ga' for Google Analytics, 'ackee' for Ackee, leave empty if not using
    ackeeConfig: {
      tracker: "", // Fill this if using Ackee, e.g., 'https://ackee.craigary.net/tracker.js'
      dataAckeeServer: "", // Fill this if using Ackee, e.g., 'https://ackee.craigary.net'
      domainId: "", // Fill this if using Ackee, e.g., '0e2257a8-54d4-4847-91a1-0311ea48cc7b'
    },
    gaConfig: {
      measurementId: "", // Fill this if using Google Analytics, e.g., 'G-XXXXXXXXXX'
    },
  },
  comment: {
    // Currently integrated comment plugins include gitalk, utterances, and cusdis
    provider: "", // Fill in the comment plugin you are using; leave empty if not using
    gitalkConfig: {
      repo: "", // Please fill in the information you obtained from gitalk
      owner: "", // Please fill in the information you obtained from gitalk
      admin: [], // Please fill in the information you obtained from gitalk
      clientID: "", // Please fill in the information you obtained from gitalk
      clientSecret: "", // Please fill in the information you obtained from gitalk
      distractionFreeMode: false,
    },
    utterancesConfig: {
      repo: "", // Please fill in the information you obtained from utterances
    },
    cusdisConfig: {
      appId: "", // Please fill in the information you obtained from cusdis
      host: "https://cusdis.com", // If you have deployed your own cusdis service, replace it with your own service address
      scriptSrc: "https://cusdis.com/js/cusdis.es.js", // If you have deployed your own cusdis service, replace it with your own service address
    },
  },
  isProd: process.env.VERCEL_ENV === "production", // Distinguish between development and production environments; see https://vercel.com/docs/environment-variables#system-environment-variables for details
};
// export default BLOG
module.exports = BLOG;

Step 3: After completing the modifications, you can deploy it on Vercel. Remember to fill in NOTION_PAGE_ID in 1️⃣ and the Page ID in 2️⃣, then click Add.

What is Notion Page ID

In Notion, click Share, then open Share to web, which will generate a publicly accessible URL, such as https://xxx.notion.site/80c301f9f7264a4aa5dfc1f8b9841222?v=37fe9de07b164c27a9cc3a7c5614a7c4. The segment of encoding after https://xxx.notion.site/ and before ?v= is the Page ID, which is 80c301f9f7264a4aa5dfc1f8b9841222.

Cusdis#

I strongly agree with Ping Ju in “Why I Wanted to Stop Using Cusdis but Changed My Mind?” about the ideal commenting system:

It should have the ability to leave anonymous comments; it should allow different login methods like Twitter, Github, Telegram, FB, Google, etc.; it should also allow email login; support markdown; can connect to communication software like Tg or Slack for real-time notifications; can notify commenters via email when their comments are replied to (if they left an email); lightweight and privacy-focused.

From blog.config.js, we can see that Nobelium's comment plugin supports gitalk, utterances, and cusdis.

I have not used Utterances, so I will not consider it. Gitalk requires logging in with a GitHub account to write comments, which is not anonymous, and access is not good in China, so I will not consider it. Cusdis is a commenting plugin developed by Randy; it is not only compact and convenient but also does not require any account login for anonymous comments, making it the only choice. I have used it before and found it very close to the ideal commenting system.

I chose not to self-host but to use the official cusdis service directly, adding a Webhook to receive real-time notifications on Tg for new comments. Previously, I set up MTPROTO, so I don't have to worry about Tg not receiving notifications.

Since cusdis is a login-free commenting service, every anonymous comment needs to be approved by the administrator, which seems a bit cumbersome. However, during testing, I found that I could approve comments directly in Tg without logging in, and the redirection is also very convenient.

Modifications#

After deployment, I moved the articles originally in the Super.so database in Notion to the Nobelium database. Then I refreshed the blog page and found that I was not very satisfied with the default navigation bar, footer, code blocks, and fonts. So, with no coding knowledge, I started customizing with the help of ChatGPT.

The first thing I modified was the navigation bar. In components/Header.js, there is a piece of code like this:

const NavBar = () => {
  const BLOG = useConfig()
  const locale = useLocale()
  const links = [
    { id: 0, name: locale.NAV.INDEX, to: BLOG.path || '/', show: true },
    { id: 1, name: locale.NAV.ABOUT, to: '/about', show: BLOG.showAbout },
    { id: 2, name: locale.NAV.RSS, to: '/feed', show: true, external: true },
    { id: 3, name: locale.NAV.SEARCH, to: '/search', show: true }
  ]

Where id: 0, name: locale.NAV.INDEX, to: BLOG.path || '/', show: true can be translated to id: display order, name: local.NAV. variable, to: 'path', show: true.

Simply put, the variable is the name variable that needs to be displayed in the navigation bar, and the path is where this variable points to the URL. For example, the variable for the link with id: 0 is INDEX, and the path is the blog address.

Since there are variables, I need to set the variable names in the file where they are declared. In assets/i18n/basic, I can see files like en-US.json corresponding to the languages set in blog.config.js. So, I modified and added the navigation bar variables and display names in zh-CN.json.

// Before modification
"NAV": {
    "INDEX": "博客",
    "RSS": "订阅",
    "SEARCH": "搜索",
    "ABOUT": "关于"
  },

// After modification
"NAV": {
    "INDEX": "Blog",
    "RSS": "RSS",
    "SEARCH": "Search",
    "ABOUT": "About",
		"Page": "Page",
		"Newsletter":"Newsletter"
  },

Considering that I added Newsletter, which will link to my paid subscription on the newsletter platform, displaying RSS as "subscription" would create semantic ambiguity. So I simply changed all variable display names to English.

After modifying zh-CN.json, I went back to Header.js to adjust the display order of the links in the navigation bar and removed About (content moved to the Page page).

After modifying the above code, I returned to Notion and added two pages with type as Page in the Nobelium database, one with the title as Newsletter (leaving slug empty since it has already been added in the code) and the other with the title as Page and slug as page.

Footer#

The default footer of Nobelium has © Nickname Blog Start Year - Current Year on the left and ▲ Powered by Vercel on the right.

I found this unappealing, so I thought about moving the left © Nickname Blog Start Year - Current Year to the right and moving ▲ Powered by Vercel to the Page page, while displaying the Creative Commons icon with a link to the Copyright page on the left.

After looking at components/Footer.js for a long time, I didn't know how to modify it. So I asked ChatGPT, and it directly generated the code for me. After copying and pasting it in, redeploying made it look much better.

Code Blocks#

I noticed that in the dark theme, the color of the code blocks was still light, which was very glaring at night. After some searching, I found that Leon also mentioned this in “Documenting the New Blog: Nobelium, Vercel, Tailwind CSS, and Domain”. He used the dark background prism-tomorrow.css provided by Prism.js and modified the code in notion.css. I didn't want to go through that hassle, so I directly replaced the originally referenced prism.css in pages/_app.js.

// Before replacement
import "prismjs/themes/prism.css";

// After replacement
import "prismjs/themes/prism-tomorrow.css";

Fonts#

I have always liked the LXGW font open-sourced on GitHub. When I was using Typecho before, I wanted to change the font to LXGW WenKai, but I didn't succeed. This time, I had to give it a try.

I saw that there were four woff2 font files in public/fonts, so I found the LXGW Bright GB version of LXGW WenKai, downloaded it, and uploaded LXGWBrightGB-Regular.woff2.

Then I first declared the font in styles/globals.css.

@font-face {
  font-family: 'LXGWBrightGB-Regular';
  src: url('/fonts/LXGWBrightGB-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

Then I added the font in tailwind.config.js.

// Before modification
fontFamily: {
        sans: FONTS_SANS,
        serif: FONTS_SERIF,
        noEmoji: [
          '"IBM Plex Sans"',
          'ui-sans-serif',
          'system-ui',
          '-apple-system',
          'BlinkMacSystemFont',
          'sans-serif'
        ]
      }

// After modification
fontFamily: {
        lxgw: ['LXGWBrightGB-Regular', 'sans-serif'],
        sans: FONTS_SANS,
        serif: FONTS_SERIF,
        noEmoji: [
          '"IBM Plex Sans"',
          'ui-sans-serif',
          'system-ui',
          '-apple-system',
          'BlinkMacSystemFont',
          'sans-serif'
        ]
      }

Then I modified the two files Container.js and NotionRenderer.js in the components folder.

Finally, I configured the LXGW font on the blog, fulfilling a wish.

Refinement#

After completing the code modifications, the next step was to return to Notion and refine the blog content in the Nobelium database.

I first improved the content on the Page page. I defined the Page page as an independent entry point for the blog; it should only be a menu button without a link. Its structure in an ideal state is as follows:

Page
├──── [Memos](https://memo.hhzz.plus/explore)
├──── [File Gallery](https://file.hhzz.love)
├──── [Monitor](https://monitor.hhzz.plus/status/public)
├──── [About](https://justgoidea.com/about)
├──── [Copyright](https://justgoidea.com/copyright)
└──── [Friend Link](https://justgoidea.com/links)

Since Nobelium currently does not support submenus, to keep the navigation bar simple, I had to place my Memos, File Gallery, and Monitor independent pages, along with the content that should originally be presented in About and Friend Link, all on the Page page.

Memos is a quick memo I self-hosted using the open-source project memos that mimics flomo on GitHub. It contains some currently immature ideas and can also be seen as my private "Twitter." The current categories include #闪念, #思考, #碎碎念, #吐槽, #推荐, etc.

File Gallery is a resource sharing site where I collect fun and practical resources.

Monitor is a monitoring site used to monitor the operation of the websites, services, and VPS I have deployed online.

The About section is divided into About This Site and About Me.

In About This Site, I listed the blog's name (title), URL, logo, description (subtitle), copyright statement, technical construction, DNS and CDN services, and the fonts used. Since I removed the ▲ Powered by Vercel from the footer, I made a note in the technical statement and expressed my gratitude to Vercel. Similarly, I used Cloudflare for DNS and CDN services and used the LXGW font, both of which, like Vercel, provide very useful free services, and I should also acknowledge and thank them. Additionally, I wrote a small paragraph about my persistence in blogging.

In About Me, I briefly described my MBTI personality, identity, and profession, wrote my motto, and left my email and Twitter.

After refining the content on the Page page, I also created the Copyright page and modified Footer.js to make the left Creative Commons icon link to this page.

Conclusion#

A blog should be pure, used for recording and sharing. Notion is very useful, and Nobelium is very simple, meeting all my needs for a blog. Throughout this process, I also learned a lot, such as about Tailwind CSS and Next.js. I still haven't gotten into it, but at least I can understand it and know how to ask ChatGPT to output the code I want. Next, I need to seriously organize and think about how to continue improving the quality of my writing.

槿呈Goidea