https://nextjs-tailwindcss-beautiful-blog-template-6bhlgxk4v.vercel.app/sample-blog

This is a Blog template using NextJS and React

• NextJS
• Tailwind CSS
• Typescript
• Markdown
• Syntax Highlighter
• Github actions
• Github pages

See the following youtube tutorial how to use this template and get your own version in 5 minutes.

https://youtu.be/lEljvKRtU4c

• Showing blog posts by parsing markdown
• Syntax highlight with PrismJS
• Github pages deployment support
• Google analytics Integration
• SEO setup
• Tailwind typography integration
• Social media preview for blogs
• Dark mode support with next-themes
• Type checking TypeScript
• Linter with ESLint
• Code Formatter with Prettier

Go into the .env.local file and change the following variables to include your own.

NEXT_PUBLIC_PRODUCTION_ROOT_URL = "";
NEXT_PUBLIC_LINKEDIN_PROFILE_URL = "";
NEXT_PUBLIC_YOUTUBE_CHANNEL_URL = "";
NEXT_PUBLIC_GITHUB_PROFILE_URL = "";
NEXT_PUBLIC_MEDIUM_PROFILE_URL = "";
NEXT_PUBLIC_STACKOVERFLOW_PROFILE_URL = "";
NEXT_PUBLIC_TWITTER_PROFILE_URL = "";
NEXT_PUBLIC_TWITTER_HANDLE = "";
NEXT_PUBLIC_OWNER_NAME = "Mohammad Faisal";
NEXT_PUBLIC_GOOGLE_ANALYTICS_KEY = "";

Go into the public/static folder and change the 2 images. Add your own logo and picture there.

Create a new file under the _posts directory. Let's assume the new blog files name is sample-blog.md

Be careful about the name because it will be the url (path) for your blog.

Every blog has a top section where you can specify some meta data about that blog

---
title: "My Sample blog"
description: "This is the description for the blog"
banner: "/images/sample-blog.jpeg"
tags: ["NextJS"]
date: 1 January 2022
---

These are pretty self explanatory.

This is optional. But this adds some value to the project. You can go to the public folder of your project and add an image with the same name sample-blog.jpeg and refer it inside the sample-blog.md file.

That's it!

If you want to test the project locally

yarn dev

and go to http://localhost:3000/sample-blog to see the fruits of your labor!

To read more about how the different parts were built refer to these articles.

• Analytics
• SiteMap
• SEO
• Syntax Highlight
• Typography
• Favicon