csk731 / notion-portfolio-blog

Make your own personal website powered by Notion with Next.js and Vercel in minutes. Portfolio, Blog, Courses and more.

Notionfolio

Make your own portfolio + Notion-powered blog in minutes with Next.js and Vercel.

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Features
   • Built With
2. Getting Started
3. Roadmap
4. Sites using notionfol.io
5. Contributing
6. License
7. Contributors

About The Project

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

Features

• 📒 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

Built with

• Next.js (v13 with app dir) and React
• Typescript
• Tailwind CSS
• Shadcn-ui as starter components
• React-notion-x

Getting Started

If you want to clone the project and make you personal notionfolio

Configuratuion

• 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)

Roadmap

• 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

Sites using notionfol.io

We will be happy to mention you here, just make a pull request and we will add you

• mehdibha.co
• hamza-bouissa.blog
• iyed.dev

Contributing

See the contribution guide and join our amazing list of contributors!

License

Distributed under the MIT License. See LICENSE for more information.

Contributors

Mehdi BHA