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.co. It's perfect for building your own personal website if you are a developer, a designer, a researcher, a writer with almost everything customizable.
Screenshot
- 📒 Writing posts using Notion as CMS
- 👀 Pretty URLs & SEO friendly
- 🤖 Entirely customisable through one config file
- 🚀 Fast page views
- 💼 Sleek Portfolio -> Showcase your work elegantly and professionally.
- 🌓 Dark and light mode
- 📱 Responsive design
- ♻️ Incremental static regeneration (Every x minutes re-update website content so no need to redeploy)
- 📰 RSS feed
- 🚀 Deploy on Vercel in minutes
- 🔍 Search posts instantly
- 📈 Analytics with vercel analytics
- Dispaly your courses
- 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
- Generate a sitemap and robots.txt
- Implement RSS feed
- Add thumbnails to posts
- Implement analytics
- Infinite scroll in blog page
- CI / pre-commit hooks
- Introduce courses feature
- Introduce tools feature
- Make config more optionnal (config/site.ts)
- Collect emails
- Improve SEO and lighthouse score
- Auth + comments
- implement i18n
- Switch from react-notion-x to a custom component
- 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 |