Make your own portfolio + Notion-powered blog in minutes with Next.js and Vercel.
Table of Contents
This repo is what I use to power my personal blog and portfolio site mehdibha.com.
Screenshot
- 📒 Writing posts using Notion as CMS
- 👀 Pretty URLs & SEO friendly
- 🤖 Entirely customisable through one config file
- 🚀 Fast page views
- 🌓 Dark and light mode
- 📱 Responsive
- ♻️ Incremental static regeneration (Every x minutes re-update website content so no need to redeploy)
- 🚀 Deploy on Vercel in minutes
- 🔍 Search
- 📰 RSS feed (coming soon)
- Next.js (v13 with app dir) and React
- Typescript
- Tailwind CSS
- Shadcn-ui as starter components
- React-notion-x
If you want to clone the project and make you personal notionfolio
- Star the repo
- Duplicate this Notion template, and share it to the public
- Fork this project
- Customize /src/config/site.ts
- Replace favicons and images /public
- Add NOTION_PAGE_ID as an env variable (see .env.exemple)
- Deploy on Vercel (do not forget to add env variables)
- Run script to update website for new features (yarn run update-template) (it syncs with this repo without changing config file and /public)
- Make the website responsive
- Projects archive page
- Missing cover image in blog posts
- Fix display date in posts
- Infinite scroll in blog page
- Make config more optionnal (config/site.ts)
- Switch from react-notion-x to a custom component
- CI / pre-commit hooks
- Fix all linting and type errors
- Generate a sitemap
- Implement RSS feed
- Implement analytics
- Auth + comments
- Collect emails to continue reading an article
- Introduce courses feature
- Introduce tools feature
- Automatically generate a resume on build (using LaTeX and maybe with different variants)
- PWA
- Add themes and variants for components
- implement i18n
- Make a website to generate notionfolios from it directly
We will be happy to mention you here, just make a pull request and we will add you
See the contribution guide and join our amazing list of contributors!
Distributed under the MIT License. See LICENSE for more information.
 Mehdi BHA |