A modern, bilingual blog platform built with Next.js, Tailwind CSS, and MDX. Perfect for creators, developers, and writers who want a lightweight, customizable blogging solution with Vietnamese and English language support.
Write your blog in Markdown with bilingual content support and ship it to everyone on the internet! ✨
- Framework: Next.js 15 with App Router
- Deployment: Vercel
- Styling: Tailwind CSS
- Content: MDX with metadata
- Languages: Vietnamese & English with dynamic switching
- Package Manager: pnpm
- 📝 Write posts in MDX format with YAML frontmatter
- 🌐 Bilingual support - Vietnamese and English with language switcher
- 🔄 Smart language detection - Auto-detects browser language preference
- 💾 Language persistence - Saves language choice to localStorage
- 📄 Multilingual blog posts - Support for tagged bilingual content in a single file
- ⚡ 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 system-based dark mode
- 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.
# 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:checkInkspired/
├── src/
│ ├── app/ # Next.js App Router pages
│ │ ├── blog/ # Blog posts directory
│ │ │ ├── [slug]/ # Dynamic blog post folders
│ │ │ │ └── page.mdx # Individual blog post content
│ │ │ ├── layout.tsx # Blog layout wrapper
│ │ │ └── page.tsx # Blog index page
│ │ ├── layout.tsx # Root layout with LanguageProvider
│ │ ├── page.tsx # Homepage
│ │ └── not-found.tsx # 404 page
│ ├── components/ # React components
│ │ ├── bilingual-content.tsx # Bilingual content components
│ │ ├── blog-post-layout.tsx # Blog post wrapper with "Back" link
│ │ ├── footer.tsx # Footer with translations
│ │ ├── header.tsx # Header with language switcher
│ │ ├── language-switcher.tsx # Language toggle button
│ │ └── ... # Other components
│ ├── contexts/ # React contexts
│ │ └── language-context.tsx # Language state management
│ ├── locales/ # Translation files
│ │ ├── en.json # English UI translations
│ │ └── vi.json # Vietnamese UI translations
│ ├── lib/ # Utility functions
│ │ ├── blog.ts # Blog metadata helpers
│ │ └── utils.ts # Common utilities
│ └── styles/ # Global styles
│ └── globals.css # Tailwind CSS imports
├── mdx-components.tsx # MDX component overrides
└── .env.local # Environment variables
All UI strings are stored in JSON files (src/locales/en.json and src/locales/vi.json). Components use the useLanguage() hook to access translations:
import { useLanguage } from "@/contexts/language-context";
function MyComponent() {
const { t } = useLanguage();
return <button>{t.nav.home}</button>;
}The LanguageProvider wraps the entire app and provides:
- Current language state (
en|vi) - Language switcher function
- Translations object
- Auto-detection of browser language
- LocalStorage persistence
Blog posts can include content in both languages using tagged components. The content automatically switches based on the selected language without page reload.
# Start development server
pnpm dev
# Build for production
pnpm build
# Start production server
pnpm start
# Lint code
pnpm lint
# Format code
pnpm format
### Single-Language Posts
1. Create a new directory in `src/app/blog/`:
```bash
mkdir src/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/
For posts with Vietnamese and English content, use the bilingual components:
-
Add Vietnamese metadata to frontmatter:
--- title: "My First Post" titleVi: "Bài viết đầu tiên của tôi" description: "A brief description of the post" descriptionVi: "Mô tả ngắn gọn về bài viết" date: 2024-01-15 ---
-
Import bilingual components:
import { T, P, H2, H3, Bilingual } from "@/components/bilingual-content";
-
Use components for bilingual content:
<H2 en="Introduction" vi="Giới thiệu" /> <P en={<p>This is English content.</p>} vi={<p>Đây là nội dung tiếng Việt.</p>} /> <Bilingual en={<ul><li>English list item</li></ul>} vi={<ul><li>Mục danh sách tiếng Việt</li></ul>} />
📚 Check out the bilingual example post for a complete demonstration!
<T>- Inline bilingual text<P>- Bilingual paragraphs<H2>,<H3>,<H4>- Bilingual headings<Bilingual>- Generic bilingual wrapper for any content<BilingualSection>- For complex multi-element sections
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.