https://github.com/timdehof/vite-blog
https://github.com/timdehof/vite-blog
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/timdehof/vite-blog
- Owner: timDeHof
- Created: 2024-12-15T14:18:25.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-01-24T17:48:02.000Z (4 months ago)
- Last Synced: 2025-01-24T18:30:28.667Z (4 months ago)
- Language: TypeScript
- Size: 4.12 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tim's Modern Blog Platform
[](https://vitejs.dev/)
[](https://react.dev/)
[](https://www.typescriptlang.org/)
A high-performance blog platform with MDX content support, dark mode, and modern web best practices. Built with React, Vite, and Velite for superior developer and reader experiences.
## ✨ Features
- **MDX Content Authoring** - Write posts with interactive components
- **Dark/Light Theme** - System-aware theme switching
- **Content Tagging** - Organize posts with hierarchical tags
- **SEO Optimization** - Automatic meta tags and OpenGraph support
- **Blazing Fast** - 95+ Lighthouse performance scores
- **Responsive Design** - Perfect reading experience on any device
- **Syntax Highlighting** - Beautiful code blocks with line numbers
## 🛠 Tech Stack
**Core Framework**
[Vite](https://vitejs.dev/) | [React 18](https://react.dev/) | [TypeScript](https://www.typescriptlang.org/)
**Styling**
[Tailwind CSS](https://tailwindcss.com/) | [shadcn/ui](https://ui.shadcn.com/)
**Content Management**
[Velite](https://github.com/zthxxx/velite) | [MDX](https://mdxjs.com/) | [Rehype](https://github.com/rehypejs/rehype)
**Routing**
[TanStack Router](https://tanstack.com/router) | [React Helmet](https://github.com/staylor/react-helmet-async)
## 🚀 Getting Started
1. **Clone the repository**
```bash
git clone https://github.com/timDeHof/vite-blog.git
```
2. **Install dependencies**
```bash
npm install
```
3. **Start development server**
```bash
npm run dev
```
4. **Build for production**
```bash
npm run build
```
## 📚 Content Management
Create posts in `src/content/blog/` with MDX:
```mdx
---
title: "React Component Patterns"
description: "Deep dive into modern React architecture"
date: 2024-03-20
tags: ["react", "frontend"]
published: true
---
import Chart from '../components/Chart'
Interactive Post
Embed custom components:
```
## ⚙ Configuration
### Content Processing (`velite.config.ts`)
```typescript
mdx: {
rehypePlugins: [
rehypeSlug,
[rehypePrettyCode, {
theme: { dark: 'github-dark', light: 'github-light' },
onVisitHighlightedLine: (node) => {
node.properties.className.push('highlighted')
}
}],
rehypeAutolinkHeadings
]
}
```
### Theming (`src/globals.css`)
```css
:root {
--primary: 201 100% 36%; /* Brand color */
--background: 35 30% 98%; /* Light mode background */
--foreground: 201 100% 12%; /* Text color */
}
```
## 📂 Project Structure
```bash
src/
├── components/ # Reusable UI components
├── config/ # App configuration
├── content/ # Blog content (MDX)
├── routes/ # Application routes
├── styles/ # Global styles
└── utils/ # Helper functions
```
## 🌐 Deployment
[](https://vercel.com/new/clone?repository-url=https://github.com/timDeHof/vite-blog)
1. Set build command: `npm run build`
2. Output directory: `dist`
3. Enable automatic deployments
## 📊 Performance
| Metric | Score |
|------------------|-------|
| Lighthouse | 98 |
| PageSpeed Mobile | 92 |
| Bundle Size | 45KB |
| LCP | 1.2s |
## 🤝 Contributing
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
## 📜 License
Distributed under the MIT License. See `LICENSE` for more information.
## 🌟 Acknowledgements
- [Velite](https://github.com/zthxxx/velite) for content processing magic
- [shadcn/ui](https://ui.shadcn.com/) for beautiful components
- [TanStack](https://tanstack.com/) for robust routing solutions
---
🛠 Built by [Tim DeHof](https://timdehof.dev) with ❤️ and too much coffee ☕
📬 Reach out: [Twitter](https://x.com/timdehof) | [GitHub](https://github.com/timDeHof)