We have lot of options to write blogs such as dev.to, hashnode, medium etc. But as a developer we must have our own blog where we can have freedom to customize anything we want. That's why I have created this tutorial.
Overview
In this tutorial you'll learn how to create a stunning static blog website with Next.js, Contentlayer, and Tailwind CSS. I'll cover everything from building a homepage, blog pages, category pages, an about page, and a contact page, to implementing powerful SEO strategies for higher Google rankings. This blog features both dark and light themes, offering a minimal and elegant design that's fully responsive on mobile devices. Plus, you'll discover how to showcase your Markdown-based blogs easily on this website. Before starting this video you can checkout the following demo link๐
Link๐: NextJs Static Blog Website
Here is the tutorial on how I have created this portfolio!๐
What Youโll Learn
By watching this video tutorial, you will learn the following:
- Setting up a Static Blog with Next.js
- New Next.js App router
- Designing a Beautiful Homepage
- Creating Engaging Blog and Category Pages
- Crafting an Informative About Page
- Building an Interactive Contact Page
- Implementing Powerful SEO Techniques
- Adding Dark and Light Themes
- Ensuring Mobile Responsiveness
- Showcasing Markdown Blogs
- Different methods to highlight code blocks and use themes
This blog uses latest features of Next.js 13!๐
Libraries Used
For this project, you will use the following libraries:
- Next Js
- Tailwind CSS for styling
- Contentlayer to render Markdown blogs
- Supabase to count and display blog page views
- Lottie Animation
- React hook form
- Next Sitemap to create sitemap of the website
- Google's structured json-ld schema for SEO
Code Links
You can find the starter code for this project at: Nextjs Personal Blog Website Starter Code And, for the final code, checkout the following link:
Final Code Link (Gumroad): Nextjs Personal Blog website Final Code
Feel free to try different designs and animations with it and you can also tag me or share your link in the comments.
Any suggestions are welcomed!
Don't forget to Share your feedback in the comments.
You might also like these website templates:
- A stunning Next.js portfolio template => here
- A beautiful portfolio template in ReactJS => here
- NFT collection landing page in ReactJS => here
Thanks For Reading๐
Checkout my other article:
Feel free to visit my youtube channel:
@CodeBucks
Checkout my new website:
DevDreaming
Follow me on Twitter where I share lots of useful resources!
@code_bucks ๐
Top comments (0)