https://github.com/loke-dev/remix-mdx-blog-template
Remix (Vite) MDX blog starter template
https://github.com/loke-dev/remix-mdx-blog-template
blog journal mdx portfolio portfolio-template react rehype remark remix starter tailwindcss template typescript vite
Last synced: 2 months ago
JSON representation
Remix (Vite) MDX blog starter template
- Host: GitHub
- URL: https://github.com/loke-dev/remix-mdx-blog-template
- Owner: loke-dev
- License: mit
- Created: 2025-04-07T17:58:01.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-04-09T19:48:20.000Z (about 1 year ago)
- Last Synced: 2025-04-09T20:22:45.397Z (about 1 year ago)
- Topics: blog, journal, mdx, portfolio, portfolio-template, react, rehype, remark, remix, starter, tailwindcss, template, typescript, vite
- Language: TypeScript
- Homepage: https://remix-mdx-blog-template.vercel.app
- Size: 1.79 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Remix MDX Blog Template
A powerful, modern blog template built with Remix, Vite, and Tailwind.
Perfect for developers and content creators who want to share their ideas beautifully.
## ✨ Features
- **⚡️ Lightning Fast** - Built with Remix v2 and Vite for incredible performance and developer experience
- **📝 MDX Powered** - Write content in Markdown with the power to include React components directly in your posts
- **👨💻 Developer Ready** - TypeScript, Tailwind CSS, shadcn/ui components, and a well-organized project structure
- **🔒 Type-Safe Content** - Manage blog posts with type safety using content-collections with Zod validation and auto-generated TypeScript types
- **🔍 SEO Optimized** - Pre-configured meta tags, Open Graph support, and SEO best practices to help your content rank better
- **🌓 Dark Mode Built-in** - Support for both light and dark mode with system preference detection and toggling
## 🚀 Tech Stack
- **Remix** - React-based web framework
- **Vite** - Lightning fast build tool
- **Tailwind CSS** - Utility-first styling
- **shadcn/ui** - Accessible UI components
- **Content Collections** - Type-safe content management
- **TypeScript** - Enhanced type safety
- **MDX** - Markdown + JSX components
- **Zod** - Schema validation
- **ESLint** - Code linting
- **Prettier** - Code formatting
- **Sonner** - Toast notifications
- **Husky** - Git hooks automation
## 📋 Getting Started
1. Clone the repository:
```bash
git clone https://github.com/loke-dev/remix-mdx-blog-template.git my-blog
cd my-blog
```
2. Install dependencies:
```bash
pnpm install
```
3. Start the development server:
```bash
pnpm dev
```
4. Open [http://localhost:3000](http://localhost:3000) in your browser.
## 🗂️ Project Structure
```
remix-mdx-blog-template/
├── app/
│ ├── components/ # Reusable components
│ ├── posts/ # Blog posts
│ ├── routes/ # App routes
│ ├── styles/ # Global styles
│ ├── utils/ # Utility functions
│ └── types/ # TypeScript types
├── public/ # Static assets
```
## 📚 Writing Content
This template uses Content Collections for type-safe content management. Create your blog posts as MDX files in the `app/posts` directory with frontmatter:
```mdx
---
title: Hello World
description: My first blog post
date: 2023-04-15
published: true
---
# Hello World
This is my first blog post using **Remix MDX Blog Template**.
```
## 🎨 Customization
The template is built with customization in mind:
- **Styling**: Tailwind CSS for easy customization
- **Components**: shadcn/ui components that can be adapted to your needs
- **Layout**: Flexible layout components for consistent design
- **Theming**: Light and dark mode support with easy theme customization
## 🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
---
