Open Blog is a blogging platform built with Next.js, App Router, Tailwind CSS, and MDX to deliver minimal, clean, fast, customizable blogs, portfolios, or personal websites.
It processes Markdown files with YAML frontmatter and converts them into static HTML files that achieve perfect Core Web Vitals scores.
You write content in a familiar format and get automatic RSS feeds, Open Graph images, sitemaps, and structured data for search engines.
The platform handles technical SEO requirements while you focus on writing.
Features
📝 MDX Content Format: Write posts in MDX with YAML frontmatter for metadata organization.
⚡ Static Generation: Renders all pages as static HTML files that load instantly and score 100% on Core Web Vitals.
🖼️ Dynamic OG Images: Generates Open Graph images automatically for better social media sharing.
📰 Feed Generation: Creates RSS and Atom feeds automatically for content syndication.
🗺️ Sitemap Creation: Builds XML sitemaps automatically for search engine crawling.
🔍 Structured SEO: Implements JSON-LD structured data and semantic HTML for better search visibility.
♿ Accessibility Standards: Meets WCAG 2.2 compliance requirements with proper semantic markup.
🎨 Author Customization: Configure personal branding and social media links through environment variables.
📱 Responsive Design: Adapts to all screen sizes with automatic light and dark mode based on system preferences.
💻 Shiki Highlighting: Provides syntax highlighting for code blocks with focus and highlight annotations.
Use Cases
- Technical Documentation: Developers can publish project documentation and tutorials with code examples.
- Personal Blogging: Writers maintain a minimal publishing platform without complex CMS overhead.
- Team Knowledge Base: Small teams share internal updates and technical notes.
- Portfolio Integration: Developers add a blog section to their professional portfolio sites.
How to Use It
1. Clone the repository from GitHub and install dependencies.
git clone https://github.com/dvbtrung2302/open-blog.git
cd open-blog2. Copy the environment template file to create your local configuration. This file contains all the personal information and site settings that the platform needs.
cp .env.example .env.local3. Edit the .env.local file with your actual information. Set your site URL, name, description, author details, and social media links. These variables populate metadata throughout your blog and appear in generated feeds and Open Graph tags.
# Site Configuration
NEXT_PUBLIC_SITE_URL=https://yourblog.com/
NEXT_PUBLIC_SITE_NAME=Your Blog Name
NEXT_PUBLIC_SITE_DESCRIPTION=Your blog description
# Author Information
NEXT_PUBLIC_AUTHOR_NAME=Your Name
[email protected]
NEXT_PUBLIC_AUTHOR_IMAGE_URL=https://github.com/yourusername.png
# Social Links
NEXT_PUBLIC_GITHUB_URL=https://github.com/yourusername/
NEXT_PUBLIC_LINKEDIN_URL=https://www.linkedin.com/in/yourprofile/
NEXT_PUBLIC_TWITTER_HANDLE=@yourhandle
# Copyright
NEXT_PUBLIC_COPYRIGHT_YEAR=20254. Install all required packages and start the development server. The blog will be available at localhost port 3000.
pnpm install
pnpm dev5. Create new blog posts by adding directories inside the app/blog/ folder. Each post needs its own directory with a page.mdx file containing frontmatter and content.
mkdir app/blog/my-first-post6. Add frontmatter metadata at the top of your MDX file.
---
title: "My First Post"
description: "A brief description of the post"
date: 2024-01-15
---
Your content here...7. The platform automatically detects new posts and adds them to your blog index, RSS feeds, and sitemap. Posts appear at URLs matching their directory names, such as /blog/my-first-post/.
8. Use Shiki syntax highlighting in code blocks by specifying the language after the opening backticks. Add comments like // [!code highlight] on any line to highlight it in the rendered output.
```javascript
function hello() {
console.log("This line is highlighted"); // [!code highlight]
console.log("Normal");
}
```9. Highlight multiple consecutive lines by adding a number after the highlight comment. The number indicates how many lines to highlight starting from the comment line.
```javascript
function hello() {
console.log("Start highlighting"); // [!code highlight:3]
console.log("This is highlighted");
console.log("This is also highlighted");
console.log("Normal");
}
```10. Focus specific lines using the focus comment syntax. This dims the surrounding code to draw attention to particular sections.
```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",
});
}
```11. Build your blog for production when ready to deploy. The build process generates optimized static files that Vercel or any static hosting service can serve.
pnpm build
pnpm start12. Run the platform in Docker by building an image and starting a container. This approach works for deployment environments that prefer containerization.
docker build -t open-blog .
docker run -d -p 3000:3000 open-blogRelated Resources
- Next.js Documentation covers the framework powering Open Blog’s routing and static generation.
- MDX Documentation explains how to write interactive content with JSX in Markdown files.
- Tailwind CSS Docs provides styling utilities used throughout the platform’s design system.
- Vercel Deployment Guide shows how to deploy Next.js applications with automatic builds and previews.
FAQs
Q: Can I use Open Blog with a database for dynamic content?
A: Open Blog generates static HTML files from MDX sources and does not include database integration. You would need to modify the codebase to add dynamic data fetching, which changes the core static generation approach.
Q: How do I customize the design beyond the default Tailwind styles?
A: Edit the Tailwind configuration file to adjust colors, fonts, and spacing. You can also modify component files in the app directory to change layouts and add custom React components.
Q: Does Open Blog support multiple authors or guest posts?
A: The default configuration sets a single author through environment variables. You can extend the frontmatter schema to include author fields per post and modify templates to display different author information.
Q: What happens to my existing URLs if I rename a blog post directory?
A: URLs match directory names, so renaming a directory changes the post URL. You need to set up redirects in next.config.js to preserve old URLs and avoid breaking external links.
Q: Can I add custom React components to my blog posts?
A: MDX supports importing and using React components directly in posts. Create components in your project and import them at the top of any MDX file where you want to use them.
Q: Does this support dynamic routing for tags or categories?
A: The base configuration focuses on a flat file structure. You would need to extend the Next.js routing logic to add tag-based filtering.
