How I Setup this Notion Blog with a Custom Subdomain

How I Setup this Notion Blog with a Custom Subdomain

Rationale

I am using Notion to power my blog for now since it's an existing part of my workflow and I will not have to do any additional styling, migration work to move things. It reduces friction.

I will be setting up my website on `itp.wasifhyder.com` and for that reason the setup instruction will differ slightly from the reference.

Method

You can find more details on the reference page itself. I'm only documenting the tricky steps for me.

  1. Enable Public Acess to your page on Notion
  2. Register a Cloudflare Account
  3. Configure DNS on your domain provider
  4. Add an `AAAA` record for itp and point to 100::
  5. Create the worker and use this Github Gist
  6. Uhe the following routes for your subdomain
    • itp.wasifhyder.com/*
  7. Configure the variables with your domain & page
    • Note: I removed Disqus since I don't want it there.
  8. Make the homepage slug nicer using Fruition's (1)
    1. const SLUG_TO_PAGE = {
      	'': '285562f5c4f1400f88acde9769611a91', // My slug on homepage
      }
    2. Courtesy of the formiddable Gabi Branco & Stephenou

Possible Next Steps

Inject CSS Stylesheet
Inject Custom Fonts, Analytics
Add Newsletter Subscription?

Reference

  1. Gabi Branco's Notion Setup Documentation
  2. How to set up a custom domain for your homepage in Notion
  3. Updated without Slugs: Stephenou's Notion Personal Blog worker.js on Github
  4. Base Reference: Mayneyao's Notion Personal Blog Gist on Github

image