Use Notion as CMS for your Next Pro Portfolio - Nextjs/Reactjs/Netlify

CoderOne · Beginner ·🛠️ AI Tools & Apps ·4y ago

If you are a Notion lover and use it to plan for your work/day or projects and always loved the way Notion allows you to build stuff! Well, this video will explore an awesome Template using Next.js with React to use your Notion page as a CMS (Content Management System) display it on your professional website, and deploy it to Netlify. ⭐ Timestamps ⭐ 00:00 Turning Notion into a Free CMS 06:21 Cloning Next.js Template 10:39 Displaying our Notion Page on as a Website 16:33 How Static Site Generation Works? 18:50 Is it that good? 22:06 Pushing Changes to a Github Repo for deployment 23:36 In…

Watch on YouTube ↗ (saves to browser)

Chapters (8)

Turning Notion into a Free CMS

6:21 Cloning Next.js Template

10:39 Displaying our Notion Page on as a Website

16:33 How Static Site Generation Works?

18:50 Is it that good?

22:06 Pushing Changes to a Github Repo for deployment

23:36 Integrate Github Repo with Netlify

33:48 Testing our Production-Ready Portfolio

Playlist

Uploads from CoderOne · CoderOne · 0 of 60

← Previous Next →

Laravel CMS | N-01 | Getting Started and Environment Set Up

Laravel CMS | N-01 | Getting Started and Environment Set Up

Laravel CMS | N-02 | Routes, Controllers and Views

Laravel CMS | N-02 | Routes, Controllers and Views

Laravel CMS | N-03 | Dealing With Assets and Page Layouts

Laravel CMS | N-03 | Dealing With Assets and Page Layouts

Laravel CMS | N-04 | Migration, Models and Adding Categories

Laravel CMS | N-04 | Migration, Models and Adding Categories

Laravel CMS | N-05 | Showing Added Categories, and Session Messages

Laravel CMS | N-05 | Showing Added Categories, and Session Messages

6 $Laravel CMS | N-06 | Edit\Remove Categories using AJAX and Popups$

Laravel CMS | N-06 | Edit\Remove Categories using AJAX and Popups

Laravel CMS | N-07 | Add New Post

Laravel CMS | N-07 | Add New Post

Laravel CMS | N-08 | Creating a Basic Laravel Blog

Laravel CMS | N-08 | Creating a Basic Laravel Blog

HTML5 Canvas For Beginners | Getting Started | #01 with Webpack

HTML5 Canvas For Beginners | Getting Started | #01 with Webpack

HTML5 Canvas For Beginners | Drawing Basic Shapes | 02

HTML5 Canvas For Beginners | Drawing Basic Shapes | 02

HTML5 Canvas | Drawing Text With Circles | Part 01

HTML5 Canvas | Drawing Text With Circles | Part 01

HTML5 Canvas | Text Animation and Circle Collision | Part 02

HTML5 Canvas | Text Animation and Circle Collision | Part 02

Complete Guide To Web Development In 2018

Complete Guide To Web Development In 2018

AJAX & JSON Explained | Examples

AJAX & JSON Explained | Examples

Visual Studio Code Web Development Setup and Extensions

Visual Studio Code Web Development Setup and Extensions

Electron Build Desktop Apps HTML/CSS/JS - Getting Started 01

Electron Build Desktop Apps HTML/CSS/JS - Getting Started 01

Electron Build Desktop Apps HTML/CSS/JS | Creating Windows and Processes 02

Electron Build Desktop Apps HTML/CSS/JS | Creating Windows and Processes 02

18 $Electron Build Desktop Apps HTML\CSS\JS | Dialog, Sessions and Cookies 03$

Electron Build Desktop Apps HTML\CSS\JS | Dialog, Sessions and Cookies 03

19 $Electron Build Desktop Apps HTML\CSS\JS | Custom App Menu & Context Menu 04$

Electron Build Desktop Apps HTML\CSS\JS | Custom App Menu & Context Menu 04

20 $Electron Build Desktop Apps HTML\CSS\JS | Package, Build and Deploy your App 05$

Electron Build Desktop Apps HTML\CSS\JS | Package, Build and Deploy your App 05

Node.js Brief Beginners Introduction #01

Node.js Brief Beginners Introduction #01

Node.js How Modules Works & NPM #02

Node.js How Modules Works & NPM #02

Node.js Working With Events and Event Emitter #03

Node.js Working With Events and Event Emitter #03

Node.js File System (Read and Write) FS 04

Node.js File System (Read and Write) FS 04

Node.js Create a Basic Server Using Express 05

Node.js Create a Basic Server Using Express 05

Json Web Token Authentication JWT Explained Securing API

Json Web Token Authentication JWT Explained Securing API

CSS Flex Box Design | Practical Examples |

CSS Flex Box Design | Practical Examples |

API How It Works With Practical Examples

API How It Works With Practical Examples

MongoDB Getting Started 01

MongoDB Getting Started 01

MongoDB Working with APIs and Practical Examples

MongoDB Working with APIs and Practical Examples

Create a Command Line Interface (CLI) Using Node JS #01

Create a Command Line Interface (CLI) Using Node JS #01

Create a Command Line Interface (CLI) Using Node JS 02

Create a Command Line Interface (CLI) Using Node JS 02

Build React Apps | Introduction And Getting Started #01

Build React Apps | Introduction And Getting Started #01

Build React Apps | Working With Components And Multiple Rendering #02

Build React Apps | Working With Components And Multiple Rendering #02

Build React Apps | App State Management | Practical Examples #03

Build React Apps | App State Management | Practical Examples #03

Build React Apps | Getting Started With Flux (Intro) #04

Build React Apps | Getting Started With Flux (Intro) #04

Build React Apps | Create a Clock Timer Using React 05

Build React Apps | Create a Clock Timer Using React 05

Build React Apps | Create a Clock Timer Using React 05 | PART2|

Build React Apps | Create a Clock Timer Using React 05 | PART2|

CSS Preprocessors Getting Started | SASS and LESS | Practical Examples

CSS Preprocessors Getting Started | SASS and LESS | Practical Examples

Regex Introduction | Learn Regular Expressions 01

Regex Introduction | Learn Regular Expressions 01

PHP VS Node.js Which is Best For Web Development

PHP VS Node.js Which is Best For Web Development

Drag and Drop Using Native Javascript 01

Drag and Drop Using Native Javascript 01

Drag And Drop Using Native Javascript 02

Drag And Drop Using Native Javascript 02

Master Git (Version Control) in One Video From Scratch

Master Git (Version Control) in One Video From Scratch

Let's Learn The New Javascript ES6 Class Syntax

Let's Learn The New Javascript ES6 Class Syntax

Let's Create A BlockChain On Node.js

Let's Create A BlockChain On Node.js

Top 05 Visual Studio Code Extensions You Should Have

Top 05 Visual Studio Code Extensions You Should Have

Best Online Code Editors For Web Developers

Best Online Code Editors For Web Developers

Let's Create a Modern Login Form on React #01

Let's Create a Modern Login Form on React #01

Let's Create a Modern Login Form on React #02

Let's Create a Modern Login Form on React #02

Laravel CMS | N-09 | Admin Registration

Laravel CMS | N-09 | Admin Registration

Laravel CMS | N-10 | Login and Authentication

Laravel CMS | N-10 | Login and Authentication

Let's Create a Twitter Bot (Listen and Retweet)

Let's Create a Twitter Bot (Listen and Retweet)

Rapid Webpage Creation With Emmet (HTML & CSS)

Rapid Webpage Creation With Emmet (HTML & CSS)

Create Popups and Modals Using Native Javascript, HTML and CSS

Create Popups and Modals Using Native Javascript, HTML and CSS

Promises and Callbacks on Javascript With Practical Examples

Promises and Callbacks on Javascript With Practical Examples

Create Collapses using Native Javascript, HTML and CSS

Create Collapses using Native Javascript, HTML and CSS

Let's Learn Typescript (Javascript Devs) | Getting Started 01

Let's Learn Typescript (Javascript Devs) | Getting Started 01

Let's Learn Typescript | Interfaces and Generic Types (The Typing System) 02

Let's Learn Typescript | Interfaces and Generic Types (The Typing System) 02

Let's Learn Typescript | Work With Classes, Modules and Enums 03

Let's Learn Typescript | Work With Classes, Modules and Enums 03

Google Weather API Update is INSANE

Google Weather API Update is INSANE

Julian Goldie SEO