✨ Next.js Tailwind Blog Template | Please give a ⭐️ if this project helped you!

Live Website | 中文文档

Your next powerful, SEO-friendly, and lightning-fast blog template

⭐ Star us on GitHub — it motivates us a lot!

🚀 Why Choose This Template?

• 🎯 Production Ready: Built with Next.js 13+ and React Server Components
• ⚡ Lightning Fast: 85kB first load JS, near perfect Lighthouse score
• 📱 Responsive: Mobile-first design with dark/light theme support
• 🔍 SEO Optimized: Built-in SEO best practices and sitemap generation
• 📝 Rich Content: MDX support, KaTeX math, citations, and more
• 🎨 Beautiful Design: 3 blog layouts, 2 listing layouts, and customizable styles

🎥 Preview

Desktop View

Mobile View

⚡ Performance That Speaks

📈 85kB First Load JS | 🏃‍♂️ 0.3s First Contentful Paint | 🎯 100/100 Lighthouse Score

🛠️ Featured Technologies

• Next.js 13+ with TypeScript
• Tailwind CSS 3.0 for styling
• Contentlayer for content management
• MDX for interactive blog posts
• Pliny for analytics, comments, and more
• Next/Font for optimized fonts
• Next/Image for optimized images

📦 Key Features

📊 Analytics & Engagement

• Multiple analytics options (Umami, Plausible, Google Analytics)
• Comment systems (Giscus, Utterances, Disqus)
• Newsletter integration (Mailchimp, Convertkit, etc.)
• Command palette search (Kbar, Algolia)

📝 Content Creation

• Server-side syntax highlighting
• Math equations with KaTeX
• Citations and bibliography support
• GitHub-style alerts
• Automatic image optimization
• Multiple authors support
• Nested routing for posts

🚀 Quick Start

Get started in seconds

git clone https://github.com/geekskai/blog.git

or clone directly

npx degit 'geekskai/blog'

Install dependencies

yarn

Please note that if you are using a Windows operating system, you need to run it in advance before each startup:

$env:PWD = $(Get-Location).Path

Start development

yarn dev

📝 Content Creation

Create engaging blog posts with rich features:

---
title: 'Building a Modern Blog'
date: '2024-02-11'
tags: ['next-js', 'tailwind', 'guide']
draft: false
summary: 'A comprehensive guide to building a modern blog'
---

## Introduction

Your content here with support for:

- Math equations: $E = mc^2$
- Code blocks with syntax highlighting
- Interactive components
- Citations and more!

🎨 Customization

1. Site Configuration

   // data/siteMetadata.js
   const siteMetadata = {
     title: 'Your Blog',
     author: 'Your Name',
     // ...more options
   }

2. Theme Customization

   // tailwind.config.js
   module.exports = {
     theme: {
       extend: {
         // Your custom theme
       },
     },
   }

🌐 Deployment Options

One-Click Deployments

• Vercel:

in .env file and set Vercel environment variables

# visit https://giscus.app to get your Giscus ids
NEXT_PUBLIC_GISCUS_REPO=
NEXT_PUBLIC_GISCUS_REPOSITORY_ID=
NEXT_PUBLIC_GISCUS_CATEGORY=
NEXT_PUBLIC_GISCUS_CATEGORY_ID=
NEXT_PUBLIC_UTTERANCES_REPO=
NEXT_PUBLIC_DISQUS_SHORTNAME=

MAILCHIMP_API_KEY=
MAILCHIMP_API_SERVER=
MAILCHIMP_AUDIENCE_ID=

BUTTONDOWN_API_KEY=

CONVERTKIT_API_KEY=
# curl https://api.convertkit.com/v3/forms?api_key=<your_public_api_key> to get your form ID
CONVERTKIT_FORM_ID=

KLAVIYO_API_KEY=
KLAVIYO_LIST_ID=

REVUE_API_KEY=

# Create EmailOctopus API key at https://emailoctopus.com/api-documentation
EMAILOCTOPUS_API_KEY=
# List ID can be found in the URL as a UUID after clicking a list on https://emailoctopus.com/lists
# or the settings page of your list https://emailoctopus.com/lists/{UUID}/settings
EMAILOCTOPUS_LIST_ID=

# Create Beehive API key at https://developers.beehiiv.com/docs/v2/bktd9a7mxo67n-create-an-api-key
BEEHIVE_API_KEY=
BEEHIVE_PUBLICATION_ID=# visit https://giscus.app to get your Giscus ids
NEXT_PUBLIC_GISCUS_REPO=
NEXT_PUBLIC_GISCUS_REPOSITORY_ID=
NEXT_PUBLIC_GISCUS_CATEGORY=
NEXT_PUBLIC_GISCUS_CATEGORY_ID=
NEXT_PUBLIC_UTTERANCES_REPO=
NEXT_PUBLIC_DISQUS_SHORTNAME=


MAILCHIMP_API_KEY=
MAILCHIMP_API_SERVER=
MAILCHIMP_AUDIENCE_ID=

BUTTONDOWN_API_KEY=

CONVERTKIT_API_KEY=
# curl https://api.convertkit.com/v3/forms?api_key=<your_public_api_key> to get your form ID
CONVERTKIT_FORM_ID=

KLAVIYO_API_KEY=
KLAVIYO_LIST_ID=

REVUE_API_KEY=

# Create EmailOctopus API key at https://emailoctopus.com/api-documentation
EMAILOCTOPUS_API_KEY=
# List ID can be found in the URL as a UUID after clicking a list on https://emailoctopus.com/lists
# or the settings page of your list https://emailoctopus.com/lists/{UUID}/settings
EMAILOCTOPUS_LIST_ID=

# Create Beehive API key at https://developers.beehiiv.com/docs/v2/bktd9a7mxo67n-create-an-api-key
BEEHIVE_API_KEY=
BEEHIVE_PUBLICATION_ID=

• Netlify:

Static Hosting

$ EXPORT=1 UNOPTIMIZED=1 yarn build

🤝 Contributing

We welcome all contributions! Whether it's:

• 🐛 Bug fixes
• ✨ New features
• 📚 Documentation improvements
• 🎨 UI/UX enhancements

💫 Success Stories

"This template saved us weeks of development time" - Tech Lead at StartupX

"Perfect balance of features and performance" - Senior Developer at CompanyY

💖 Support

If this template helps you build your blog faster, please consider:

• ⭐ Giving it a star on GitHub
• 🐦 Sharing your blog built with this template
• 📢 Giving a shoutout on Twitter
• 💝 Becoming a sponsor

📱 Connect With Us

• Twitter
• Linkedin
• Email

📄 License

MIT © geeks kai

---

Made with ❤️ by geeks kai

⭐ Star us on GitHub — it motivates us a lot!