A minimal, modern blog platform built with Next.js, Tailwind CSS, and MDX. Perfect for creators, developers, and writers who want a lightweight, customizable blogging solution.
Just write your blog in Markdown format and ship it to everyone on the internet! ✨
- Framework: Next.js 15 with App Router
- Deployment: Vercel
- Styling: Tailwind CSS
- Content: MDX with metadata
- Package Manager: pnpm
- 📝 Write posts in MDX format with YAML frontmatter
- ⚡ Fast performance with Next.js - all static HTML files, 100% Core Web Vitals
- 🖼️ Dynamic Open Graph image generation
- 📰 Auto-generated RSS and Atom feeds
- 🗺️ Automatically generated sitemap
- 🔍 SEO-friendly with structured data (JSON-LD) and semantic HTML
- ♿ WCAG 2.2 accessibility compliant with proper semantic markup
- 🎨 Customizable author branding and social links
- 📱 Responsive lightweight design with light mode and dark mode based on system preference
- Node.js v18.17 or higher
- pnpm (recommended) or npm
-
Clone the repository:
git clone https://github.com/yourusername/open-blog.git cd open-blog -
Copy the environment template and fill in your details:
cp .env.example .env.local
-
Edit
.env.localwith your personal information:NEXT_PUBLIC_SITE_URL=https://yourblog.com/ NEXT_PUBLIC_SITE_NAME=Your Blog Name NEXT_PUBLIC_SITE_DESCRIPTION=Your blog description NEXT_PUBLIC_AUTHOR_NAME=Your Name NEXT_PUBLIC_AUTHOR_EMAIL=your.email@example.com NEXT_PUBLIC_AUTHOR_IMAGE_URL=https://github.com/yourusername.png NEXT_PUBLIC_GITHUB_URL=https://github.com/yourusername/ NEXT_PUBLIC_LINKEDIN_URL=https://www.linkedin.com/in/yourprofile/ NEXT_PUBLIC_TWITTER_HANDLE=@yourhandle NEXT_PUBLIC_COPYRIGHT_YEAR=2025
-
Install dependencies:
pnpm install
-
Start the development server:
pnpm dev
Open http://localhost:3000 to view your blog.
-
Build docker image:
docker build -t open-blog . -
Start the open-blog server:
docker run -d -p 3000:3000 open-blog
Open http://localhost:3000 to view your blog.
# Start development server
pnpm dev
# Build for production
pnpm build
# Start production server
pnpm start
# Lint code
pnpm lint
# Format code
pnpm format
pnpm format:check-
Create a new directory in
app/blog/:mkdir app/blog/my-first-post
-
Add a
page.mdxfile with frontmatter:--- title: "My First Post" description: "A brief description of the post" date: 2024-01-15 --- Your content here...
-
The post will automatically appear on your blog at
/blog/my-first-post/
📚 Check out the example blog post for a complete step-by-step guide on creating your first post!
The blog uses Shiki for beautiful code syntax highlighting. Here are the features you can use in your code blocks:
```javascript
console.log("Hello World");
```Use // [!code highlight] comment to highlight the line:
```javascript
function hello() {
console.log("This line is highlighted"); // [!code highlight]
console.log("Normal");
}
```Use // [!code highlight:N] where N is the number of lines to highlight:
```javascript
function hello() {
console.log("Start highlighting"); // [!code highlight:3]
console.log("This is highlighted");
console.log("This is also highlighted");
console.log("Normal");
}
```Use // [!code focus] for a single line or // [!code focus:N] for multiple lines:
```typescript
const [count, setCount] = useState(0); // [!code focus:2]
const [step, setStep] = useState(1);
export function formatDate(date: string) {
return new Date(date).toLocaleDateString("en-US", { // [!code focus:3]
year: "numeric",
month: "short",
});
}
```Use backticks for inline code: `const x = 10;`
MIT License - feel free to use this project for any purpose. Attribution is appreciated!
For issues, feature requests, or questions, please open an issue on GitHub.