Table of contents

TL;DR

I used to organize all my study notes in Notion, and I’ve decided to utilize Notion as a database to publish these notes to a website for public access.

bookmark

link_preview

Steps for building my blog

• Export my notes from Notion, save them as Markdown files
  • Notion
• Build a web application that can use Markdown files as the source for blog content
  • Astro
• Find an environment to host my blog website
  • Github Pages
• Automate the workflow, update blogs from Notion and publish to website every 24 hours
  • Github Actions

TODO

• SEO
• CSS from notion

1. Export blogs from Notion

I use NodeJS + Typescript as coding language. To setup an typescript project from draft, follow https://khalilstemmler.com/blogs/typescript/node-starter-project/.

Database structure overview

Implementation

In short

• Use notion api to retrieve notion database and pages
• Use notion-to-md to convert notion pages to markdown files

Use Azure blob as image database

Code Ref: https://github.com/chaoszh/blog/pull/8/files

Notion use AmazonS3 as image database. The image URL is only valid for 1 hour. We need to download/upload those image files elsewhere to persist it for blog viewers.

1. notion-to-md setCustomTransformer for image blocks
2. Asynchronously copy blobs from AmazonS3 to AzureBlob(keep blob name consistent)

Other tricks

It is very easy to use notion api and notion-to-md following their public docs. I’m gonna mention some tips I used:

1. Make local cache for markdown files
   1. I store a manifests.json for every blog file. Inside it has lastModifiedTime attribute, and next time I parse blogs, I will only retrieve page contents if lastModifiedTime is newer.
   2. Execute parsing page tasks asynchronously
   3. Name your blog file with human-readble names(for further SEO enhancement)
2. Some useful tools

   • ts-node: Omit the transpile stage from TS to JS, also execute JS file automatically

   • vscode-ts-debugger: https://code.visualstudio.com/docs/typescript/typescript-debugging

     {
       // .vscode/launcher.json
       // my debugger configuration, fyi
       "version": "0.2.0",
       "configurations": [
         {
           "type": "node",
           "request": "launch",
           "name": "Launch Program",
           "skipFiles": [
             "<node_internals>/**"
           ],
           "runtimeExecutable": "npx",
           "args": ["ts-node", "src/main.ts"],
           "cwd": "${workspaceFolder}/api",
           "env": {
             "NOTION_TOKEN": "XXXXXXXXXXXXXXX",
             "NOTION_DATABASE_ID": "XXXXXXXXXXXXXXX"
           }
         }
       ]
     }

2. Build website

I looked for website framework that can easily hosts markdown files, and thus I found Astro. And I use this Astro template: https://github.com/satnaing/astro-paper.

Implementation

Customize baseURL

// todo

Customize theme and fonts

// todo

3. Integrate with Github Action

Implementation

Code ref: https://github.com/chaoszh/blog/blob/main/.github/workflows/build.yml

If you have good cache mechanism in Part1, then you can make use of Github Cache to shorten the build time, decrease api requests to notion.

Advanced

Enhance Google SEO

• Visit google search console and request to index your website: https://search.google.com/search-console/about