YouTube Summaries Blog

Build a multilingual static blog optimized for YouTube video summaries with Next.js 16, intelligent language routing, and GitHub Pages deployment.

What This Skill Does

Creates a production-ready static blog with:

Instructions

1. Project Setup

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"

}

```

2. Configure Next.js for Static Export

Update `next.config.ts`:

```typescript

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {

output: 'export',

images: { unoptimized: true },

trailingSlash: true,

};

export default nextConfig;

```

3. Create Language Configuration

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';

```

4. Build Content System

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

}

```

5. Create Internationalization System

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

}

```

6. Build Routing Structure

**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

```

7. Create Content Directory Structure

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:

```

8. Configure GitHub Actions Deployment

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).

9. Styling Guidelines

Use Tailwind CSS 4 patterns:

10. Important Implementation Details

**Language Fallback Logic:**

**Static Generation:**

**Type Safety:**

**Build Optimization:**

Extension Points

**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

```

Common Issues

Success Criteria

Your implementation should:

Example Usage

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`