Build a multilingual static blog for YouTube video summaries with Next.js 16, featuring smart language fallbacks, markdown content, and automated GitHub Pages deployment.
Build a multilingual static blog optimized for YouTube video summaries with Next.js 16, intelligent language routing, and GitHub Pages deployment.
Creates a production-ready static blog with:
Initialize Next.js 16 project with required dependencies:
```bash
npx create-next-app@latest youtube-summaries --typescript --app --tailwind --no-src-dir
cd youtube-summaries
npm install gray-matter
```
Configure `package.json` with ES modules:
```json
{
"type": "module"
}
```
Update `next.config.ts`:
```typescript
import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
output: 'export',
images: { unoptimized: true },
trailingSlash: true,
};
export default nextConfig;
```
Create `config/languages.ts`:
```typescript
export interface LanguageConfig {
code: string;
name: string;
flag: string;
}
export const languages: LanguageConfig[] = [
{ code: 'en', name: 'English', flag: 'π¬π§' },
{ code: 'ru', name: 'Π ΡΡΡΠΊΠΈΠΉ', flag: 'π·πΊ' },
{ code: 'pl', name: 'Polski', flag: 'π΅π±' },
];
export const defaultLanguage = 'en';
```
Create `lib/posts.ts` for markdown processing:
```typescript
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
import { languages } from '@/config/languages';
export interface Post {
slug: string;
language: string;
title: string;
date: string;
videoUrl?: string;
content: string;
availableLanguages: string[];
}
const contentDirectory = path.join(process.cwd(), 'content');
export function getAllPosts(lang: string): Post[] {
// Read all markdown files, filter by language, parse frontmatter
// Sort by date descending
// Include availableLanguages array for each post
}
export function getPostBySlug(slug: string, lang: string): Post | null {
// Load specific post with fallback logic
// If requested language not found, return available translation with warning
}
```
Create `lib/i18n.ts`:
```typescript
export const translations = {
en: {
siteTitle: 'YouTube Summaries',
allPosts: 'All Posts',
backToList: 'Back to list',
chooseLanguage: 'Choose Language',
notAvailable: 'This post is not available in {language}. Showing {fallback} version.',
availableIn: 'Available in:',
},
ru: {
siteTitle: 'ΠΠ±Π·ΠΎΡΡ YouTube',
// ... Russian translations
},
pl: {
// ... Polish translations
},
};
export function t(key: string, lang: string, replacements?: Record<string, string>): string {
// Translation helper with variable replacement
}
```
**Root Page** (`app/page.tsx`):
```typescript
// Language selector - shows all available languages with flags
// Links to /[lang] for each language
```
**Language Home** (`app/[lang]/page.tsx`):
```typescript
export async function generateStaticParams() {
return languages.map(lang => ({ lang: lang.code }));
}
// List all posts for selected language
// Show translation availability indicators
// Include language switcher
```
**Post Detail** (`app/[lang]/[slug]/page.tsx`):
```typescript
export async function generateStaticParams() {
// Generate all combinations of languages Γ posts
}
// Render markdown content
// Show YouTube video if videoUrl present
// Display language switcher with available translations
// Show fallback warning if needed
```
Establish content organization:
```
content/
βββ my-first-post.en.md
βββ my-first-post.ru.md
βββ my-first-post.pl.md
βββ another-post.en.md
βββ another-post.ru.md (Polish translation optional)
```
**Markdown Template:**
```markdown
---
title: "Understanding TypeScript Generics"
date: "2025-01-15"
videoUrl: "https://youtube.com/watch?v=abc123"
---
Your markdown content here. Supports:
```
Create `.github/workflows/deploy.yml`:
```yaml
name: Deploy to GitHub Pages
on:
push:
branches: [main]
workflow_dispatch:
permissions:
contents: read
pages: write
id-token: write
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: '20'
- run: npm ci
- run: npm run build
- uses: actions/upload-pages-artifact@v3
with:
path: ./out
- uses: actions/deploy-pages@v4
```
Create `.github/workflows/test.yml` for PR validation (same as deploy but without deploy step).
Use Tailwind CSS 4 patterns:
**Language Fallback Logic:**
**Static Generation:**
**Type Safety:**
**Build Optimization:**
**Add New Language:**
1. Add entry to `config/languages.ts`
2. Add translations to `lib/i18n.ts`
3. Create content files: `content/*.{code}.md`
4. Rebuild - all routes auto-generated
**Custom Domain:**
1. Add `public/CNAME` file with domain
2. Configure DNS CNAME to `username.github.io`
**Repository Path Deployment:**
Update `next.config.ts`:
```typescript
basePath: '/repo-name',
assetPrefix: '/repo-name/',
```
**Enhanced Markdown:**
Replace simple HTML conversion with `react-markdown`:
```bash
npm install react-markdown rehype-sanitize
```
Your implementation should:
User requests: "Create a YouTube summaries blog with English and Spanish support"
Expected workflow:
1. Initialize Next.js project with dependencies
2. Create language config with `en` and `es`
3. Build content system with fallback logic
4. Set up routing for `/`, `/[lang]`, `/[lang]/[slug]`
5. Create example content files
6. Configure GitHub Actions deployment
7. Test locally with `npm run dev` and `npm run build`
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/youtube-summaries-blog/raw