tailblaze
This is a Next.js, Tailwind CSS blogging starter template. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.
🚀 Tailblaze
Modern Tailwind NextJS Blog Starter Theme with Perfect PageSpeed Score
A beautiful, feature-rich blog starter with modern tech stack and perfect performance.
✨ Features
| ⚡️ | Blazing Fast - Static site generation with Next.js for lightning-quick load times |
| 🎨 | Beautiful Design - Modern UI crafted with Tailwind CSS and shadcn/ui components |
| 📱 | Fully Responsive - Perfect viewing experience across all devices |
| ✍️ | MDX Support - Write content with Markdown and embed React components |
| 📊 | SEO Optimized - Built-in SEO components and metadata configuration |
| 📂 | Content Organization - Well-structured file system for blog posts and notes |
| 🔍 | Search Functionality - Built-in content discovery |
| 📱 | PWA Ready - Progressive Web App support for installation |
| 📈 | Analytics Integration - Easy setup with popular analytics platforms |
| 💬 | Comments System - Multiple provider options (Disqus, Utterances) |
| 📧 | Newsletter - Subscription form with popular service integrations |
| 🔄 | RSS Feed - Automatic feed generation for your content |
🚀 Quick Start
# Clone the repository
git clone https://github.com/vietanhdev/tailblaze.git my-blog
# Navigate to the directory
cd my-blog
# Install dependencies
pnpm install
# Start the development server
pnpm dev
Visit http://localhost:3000 to see your blog in action.
📖 Documentation
For detailed documentation and guides, visit our documentation site.
🏗️ Deployment
Build for Production
pnpm run build-images
pnpm build
The static site will be generated in the out directory.
Deploy to Vercel (Recommended)
The easiest way to deploy your Tailblaze blog:
Deploy to Cloudflare Pages
Deploy to Cloudflare Pages in a few simple steps:
- Push your repository to GitHub or GitLab
- Log in to the Cloudflare Dashboard
- Select Pages > Create a project > Connect to Git
- Select your repository
- Configure build settings:
- Build command:
pnpm run build-images && pnpm build - Build output directory:
out - Node.js version:
18(or higher) - Build system version:
2
- Build command:
- Add environment variables:
NODE_VERSION:18NPM_FLAGS:--versionPNPM_VERSION:8.6.0
- Click Save and Deploy
Note: Tailblaze is configured for static exports with
output: 'export'innext.config.js
⚙️ Customization
| Area | How to Customize |
|---|---|
| Site Metadata | Edit data/siteMetadata.ts |
| Navigation | Modify data/headerNavLinks.ts |
| Theme | Adjust tailwind.config.js |
| Components | Customize in the components directory |
| Pages | Modify or add in the pages directory |
📝 Content Management
- Blog Posts: Add Markdown or MDX files to
data/blog - Notes: Add shorter content to
data/notes - Images: Store in
public/static/images
🖼️ Free Image Resources
| Resource | Description |
|---|---|
| Unsplash | High-quality free photos |
| Pexels | Free stock photos and videos |
| Pixabay | Free images and royalty-free stock |
| StockSnap.io | Beautiful free stock photos |
| Undraw | Open-source illustrations |
📋 Blog Post Templates
Tailblaze includes several ready-to-use blog post templates:
- Basic blog post
- Tutorial with code snippets
- Photo gallery
- Video post
- Link collection
- Quote/commentary
⚡ Performance Optimization
Tailblaze is optimized for performance with:
- Code splitting for faster page loads
- Image optimization with next-image-export-optimizer
- Font optimization
- Minimal dependencies
- CSS purging with Tailwind CSS
👥 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
📄 License
- Source code: MIT License
- Content: Copyrighted by respective authors, all rights reserved.
🙏 Credits
- Original theme by timlrx
- Built with Next.js and Tailwind CSS
- UI components from shadcn/ui
Built with ❤️ by Viet-Anh Nguyen