MENU

Fun & Interesting

NextJS 14 Markdown Blog: TypeScript, Tailwind, shadcn/ui, MDX, Velite,

Jolly Coding 38,778 1 year ago
Video Not Working? Fix It Now

Lets build a static blog site. We are going to utilize NextJS 14, shadcn/ui and Tailwind, Velite to read our content, MDX for writing our content allowing for custom components and TypeScript. Follow along with the YouTube chapters as they will align to the GitHub commits. This is my first long-form tutorial so any feedback is appreciated. GitHub Repo: https://github.com/jolbol1/nextjs-velite-blog-template Part 2 Add topic tags: https://youtu.be/aujEjdMO3ME Links: Create Next App Commands: https://nextjs.org/docs/pages/api-reference/create-next-app Shadcn Docs: https://ui.shadcn.com/ Velite Docs: https://velite.js.org/ Code Themes: https://shiki.style/themes#themes OG Image Playground: https://og-playground.vercel.app/ Favicon Generator: https://realfavicongenerator.net ----- 🐦 Twitter (X): https://twitter.com/JollyShopland 🤓 Personal Site: https://jamesshopland.com 💻 GitHub: https://github.com/jolbol1 JollyUI: https://jollycod.ing/ui Where I Work: https://jollycod.ing/work Chapters: 0:00 Intro 2:12 Create Next App 4:23 Installing shadcn/ui (Stage 1) 13:35 Install and configure velite (Stage 2) 25:31 Site Header (Stage 3) 46:25 Mobile Menu (Stage 4) 1:00:36 Theme toggle (Stage 5) 1:09:09 Setup Blog Page (Stage 6) 1:25:29 Setup Post Page (Stage 7) 1:38:41 Custom MDX Components (Stage 8) 1:44:30 Syntax Highlight code blocks & MDX plugins (Stage 9) 1:52:57 Pagination (Stage 10) 2:06:55 Home Page (Stage 11) 2:16:25 About Page (Stage 12) 2:23:35 Dynamic Graph Image (Stage 13) 2:33:25 SEO and Favicon (Stage 14) 2:45:12 Site Footer (Stage 15) 2:49:55 Navbar z-index fix (Stage 16) 2:50:26 Deploying to Vercel

Comment