dinhanhthi.com

Next.js 14+ 🤝 Tailwind CSS 🤝 Notion as CMS 🤝 notion-x.

🎉 You can read this post to understand the ideas behind and create your own a site like mine.

🧡 If what I do is helpful to you for some reason, please consider supporting me. Thank you!

Previous versions

👉 Version 1 (Jekyll): v1.dinhanhthi.com -- source.
👉 Version 2 (Jekyll): v2.dinhanhthi.com -- source.
👉 Version 3 (Jekyll): v3.dinhanhthi.com -- source.
👉 Version 4 (Gatsby, canceled at 60%): demo of what I did -- source.
👉 Version 5 (11ty): v5.dinhanhthi.com -- source.

Dev

🚨 You have to install globally Nodejs >=18 (recommend using nvm) and Yarn first.

# install
yarn

# clone submodule notion-x (when installing only)
git submodule update --init --recursive

# ud notion-x
git submodule update --recursive --remote
# or yarn getlib

# dev
yarn dev # port 3003

# build
yarn build

# serve (need to build first)
yarn start # port 3003

# reinstall all
yarn reinstall

# clean
yarn clean

# prettier
yarn prettier

# clear yarn cache (helpful sometimes)
yarn cache clean

Deploy to vercel,

vercel dev # like yarn dev

vercel build

# preview only
vercel deploy

# production
vercel --prod

Update something new (for me only)

• Modify directly notion-x's components inside this repo.

• Overwrite modified files from this repo to notion-x's repo.

• Push changes from notion-x.

• On dat, make a script and run ud_submodules

  # Make sure notion-x and this repo are cloned to the same parent folder.
  alias checkout_notion-x="cd notion-x && git checkout * && cd -"
  alias ud_submodules='checkout_notion-x && git submodule update --recursive --remote'

• If there are changes from notion-x, cannot merge branch from main to dev or vice verso. We have to force reset one branch to the other!

Vercel

Enable corepack to use yarn newest version.

Troubleshooting

• Problem with search? Check and update NOTION_TOKEN_V2. Don't forget to re-deploy on Vercel.