Self-host blog with 178 posts migrated from Hashnode

Replaces the Hashnode-hosted blog with a fully self-hosted Next.js static
export. Hashnode shut down free API access; this migration keeps content
under our control and preserves every existing backlink.

Content
- 178 posts imported from saiyam1814/hashnode-backup with frontmatter
  normalized (title, slug, date, tags, author, cover)
- 1469 post images downloaded into public/img/blog/<slug>/ (no CDN deps)
- 61 unique authors resolved from Hashnode dashboard paste, with 60
  avatars and 37 bios scraped from Wayback Machine archives
- content/authors.json as the multi-author registry

Routes
- /blog (Latest 3, Series, Topic hubs, Browse by tag, paginated archive)
- /blog/<slug> (post with TOC, share rail, reading progress, comments)
- /blog/page/[2..12] (Docker-blog-style 3-col grid, 15 posts per page)
- /blog/tag/[tag], /blog/author/[handle], /blog/authors
- /blog/hub/[slug] (6 curated topic hubs: kubernetes, docker, ai-ml,
  devops, security, linux)
- /blog/series, /blog/series/[slug] (7 Days of Docker shipped,
  7 Days of DGX Spark placeholder)
- /blog/write (PR-based contributor guide)

Backlink preservation
- vercel.json: 179 explicit 301s mapping kubesimplify.com/<old-slug> to
  /blog/<slug>, plus host-based rewrites for blog.kubesimplify.com
- public/_redirects: 381-line Cloudflare Pages config that serves clean
  /<slug> URLs on the blog subdomain and 301s any /blog/<slug> hits back
  to the canonical short form
- /blogs (legacy index) 301s to /blog
- not-found.js retains its client-side fallback for typo'd slugs

SEO / AEO / GEO
- BlogPosting + Person + Organization + BreadcrumbList JSON-LD on every
  post, with sameAs, image, isPartOf (for series), about
- CollectionPage + ItemList schema on tag/hub/author/series pages
- ProfilePage schema on individual author pages
- Self-referencing canonicals pointing to blog.kubesimplify.com
- Open Graph + Twitter Card on every page
- Dynamic sitemap.xml covering posts, tags, hubs, authors, pagination,
  series (~280 URLs)
- robots.txt with explicit allowlist for GPTBot, ClaudeBot, anthropic-ai,
  PerplexityBot, OAI-SearchBot, Google-Extended, Applebot-Extended, CCBot,
  meta-externalagent, cohere-ai
- llms.txt with full site map, hubs, top contributors, recent posts
- RSS + Atom feeds at /rss.xml and /atom.xml

Reading experience
- ReactMarkdown via unified pipeline (remark-gfm + rehype-pretty-code)
- Shiki github-dark code highlighting in both light and dark site themes
- Sticky desktop TOC, collapsible mobile TOC
- Share bar (X, LinkedIn, Hacker News, copy)
- Reading progress bar
- Related posts via tag overlap
- Author bio card with socials + Edit on GitHub link
- Pagefind static search (20,500+ words indexed, no service required)
- Substack newsletter CTA (saiyampathak.substack.com/s/kubesimplify-diaries)
- Giscus comments wired (GitHub Discussions backend, repo IDs configured)

Build pipeline
- npm run build runs generate-feeds + generate-redirects, then next build,
  then pagefind --site out
- All deploys idempotent; scripts/ directory contains the migration tools
  for repeatability

vercel.json + wrangler.toml + public/_redirects let the same static
output deploy unchanged to both Vercel (kubesimplify.com) and Cloudflare
Pages or Workers (blog.kubesimplify.com).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: saiyam1814

app/blog/[slug]/page.js

@@ -0,0 +1,331 @@
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import { getAllSlugs, getPostBySlug, getRelatedPosts, SITE, postUrl, blogIndexUrl } from '@/lib/blog';
+import { getSeriesForPost } from '@/lib/series';
+import SeriesBanner from '@/components/SeriesBanner';
+import { extractToc } from '@/lib/mdx-options';
+import { renderMarkdown } from '@/lib/markdown';
+import BlogReadingProgress from '@/components/BlogReadingProgress';
+import BlogToc from '@/components/BlogToc';
+import BlogShareBar from '@/components/BlogShareBar';
+import CodeBlockEnhancer from '@/components/CodeBlockEnhancer';
+import NewsletterCTA from '@/components/NewsletterCTA';
+import AuthorSocials from '@/components/AuthorSocials';
+import Comments from '@/components/Comments';
+
+export const dynamicParams = false;
+
+export async function generateStaticParams() {
+  return getAllSlugs().map((slug) => ({ slug }));
+}
+
+export async function generateMetadata({ params }) {
+  const post = getPostBySlug(params.slug);
+  if (!post) return {};
+  const url = postUrl(post.slug);
+  const ogImage = post.cover
+    ? post.cover.startsWith('http')
+      ? post.cover
+      : `${SITE.url}${post.cover}`
+    : `${SITE.url}${SITE.defaultOgImage}`;
+  return {
+    title: post.seoTitle || post.title,
+    description: post.seoDescription || undefined,
+    keywords: post.tags,
+    authors: [{ name: post.author.name, url: post.author.url }],
+    alternates: { canonical: url },
+    openGraph: {
+      type: 'article',
+      url,
+      title: post.seoTitle || post.title,
+      description: post.seoDescription || undefined,
+      siteName: SITE.name,
+      images: [{ url: ogImage, width: 1200, height: 630, alt: post.title }],
+      publishedTime: post.datePublished,
+      authors: [post.author.name],
+      tags: post.tags,
+    },
+    twitter: {
+      card: 'summary_large_image',
+      site: SITE.twitter,
+      title: post.seoTitle || post.title,
+      description: post.seoDescription || undefined,
+      images: [ogImage],
+    },
+  };
+}
+
+function formatDate(iso) {
+  return new Date(iso).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' });
+}
+
+export default async function BlogPost({ params }) {
+  const post = getPostBySlug(params.slug);
+  if (!post) notFound();
+
+  const toc = extractToc(post.content);
+  const rendered = await renderMarkdown(post.content);
+  const related = getRelatedPosts(post.slug, 3);
+  const seriesInfo = getSeriesForPost(post.slug);
+  const url = postUrl(post.slug);
+  const ogImage = post.cover
+    ? post.cover.startsWith('http')
+      ? post.cover
+      : `${SITE.url}${post.cover}`
+    : `${SITE.url}${SITE.defaultOgImage}`;
+
+  const jsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'BlogPosting',
+    headline: post.title,
+    description: post.seoDescription || undefined,
+    image: [ogImage],
+    datePublished: post.datePublished,
+    dateModified: post.datePublished,
+    inLanguage: 'en-US',
+    isAccessibleForFree: true,
+    author: {
+      '@type': 'Person',
+      '@id': post.author.url,
+      name: post.author.name,
+      url: post.author.url,
+      image: post.author.avatar?.startsWith('http') ? post.author.avatar : `${SITE.url}${post.author.avatar}`,
+      sameAs: post.author.sameAs?.length ? post.author.sameAs : undefined,
+      ...(post.author.bio ? { description: post.author.bio } : {}),
+    },
+    publisher: {
+      '@type': 'Organization',
+      '@id': 'https://kubesimplify.com#org',
+      name: 'Kubesimplify',
+      url: 'https://kubesimplify.com',
+      logo: { '@type': 'ImageObject', url: `${SITE.url}/img/color.svg`, width: 64, height: 64 },
+      sameAs: [
+        'https://www.youtube.com/@kubesimplify',
+        'https://x.com/kubesimplify',
+        'https://github.com/kubesimplify',
+        'https://www.linkedin.com/company/kubesimplify/',
+      ],
+    },
+    mainEntityOfPage: { '@type': 'WebPage', '@id': url },
+    keywords: post.tags,
+    wordCount: post.words,
+    timeRequired: `PT${post.readMinutes}M`,
+    articleSection: post.tags[0] || 'Cloud Native',
+    about: post.tags.map((t) => ({ '@type': 'Thing', name: t })),
+    ...(seriesInfo
+      ? {
+          isPartOf: {
+            '@type': 'CreativeWorkSeries',
+            name: seriesInfo.series.name,
+            url: `${SITE.url}/series/${seriesInfo.series.slug}`,
+            numberOfItems: seriesInfo.total,
+          },
+          position: seriesInfo.position,
+        }
+      : {}),
+  };
+
+  const breadcrumbLd = {
+    '@context': 'https://schema.org',
+    '@type': 'BreadcrumbList',
+    itemListElement: [
+      { '@type': 'ListItem', position: 1, name: 'Blog', item: blogIndexUrl() },
+      { '@type': 'ListItem', position: 2, name: post.title, item: url },
+    ],
+  };
+
+  const editUrl = `https://github.com/${SITE.githubRepo}/blob/main/content/blog/${post.slug}.md`;
+
+  return (
+    <>
+      <BlogReadingProgress />
+      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
+      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbLd) }} />
+
+      <main className="pt-24 pb-20">
+        <div className="max-w-7xl mx-auto px-6 lg:px-8">
+          <nav aria-label="Breadcrumb" className="mb-8 text-sm">
+            <Link href="/blog" className="text-[var(--accent)] hover:underline">
+              &larr; All posts
+            </Link>
+          </nav>
+
+          <article
+            className="grid grid-cols-1 lg:grid-cols-[1fr_minmax(0,42rem)_1fr] gap-8"
+            data-pagefind-body
+            data-pagefind-meta={`title:${post.title}, author:${post.author.name}, date:${post.datePublished}, slug:${post.slug}, cover[src]:${post.cover || ''}, read:${post.readMinutes} min`}
+            data-pagefind-filter={`tag:${post.tags.join(',')}`}
+            itemScope
+            itemType="https://schema.org/BlogPosting"
+          >
+            <aside className="hidden lg:block">
+              <div className="sticky top-28">
+                <BlogShareBar url={url} title={post.title} />
+              </div>
+            </aside>
+
+            <div className="min-w-0">
+              <header className="mb-10">
+                <div className="flex flex-wrap gap-2 mb-5">
+                  {post.tags.map((tag) => (
+                    <Link
+                      key={tag}
+                      href={`/blog/tag/${encodeURIComponent(tag)}`}
+                      className="px-2.5 py-0.5 rounded-full bg-[var(--accent)]/10 text-[var(--accent)] text-[10px] font-bold uppercase tracking-wider hover:bg-[var(--accent)]/20 transition-colors"
+                    >
+                      {tag}
+                    </Link>
+                  ))}
+                </div>
+                <h1
+                  className="text-4xl md:text-5xl font-bold leading-tight mb-6"
+                  style={{ color: 'var(--text-primary)' }}
+                >
+                  {post.title}
+                </h1>
+                {post.seoDescription && (
+                  <p className="text-lg leading-relaxed mb-6" style={{ color: 'var(--text-secondary)' }}>
+                    {post.seoDescription}
+                  </p>
+                )}
+                <div className="flex items-center gap-3 text-sm" style={{ color: 'var(--text-muted)' }}>
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img src={post.author.avatar} alt="" className="w-8 h-8 rounded-full" />
+                  <div>
+                    <Link
+                      href={`/blog/author/${post.author.handle}`}
+                      className="font-semibold hover:text-[var(--accent)] transition-colors"
+                      style={{ color: 'var(--text-primary)' }}
+                    >
+                      {post.author.name}
+                    </Link>
+                    <span className="mx-2">·</span>
+                    <time dateTime={post.datePublished}>{formatDate(post.datePublished)}</time>
+                    <span className="mx-2">·</span>
+                    <span>{post.readMinutes} min read</span>
+                  </div>
+                </div>
+
+                <div className="md:hidden mt-6">
+                  <BlogShareBar url={url} title={post.title} />
+                </div>
+              </header>
+
+              {post.cover && (
+                /* eslint-disable-next-line @next/next/no-img-element */
+                <img
+                  src={post.cover}
+                  alt={`Cover image for ${post.title}`}
+                  className="w-full rounded-xl md:rounded-2xl mb-8 md:mb-10 border"
+                  style={{ borderColor: 'var(--border-subtle)' }}
+                  fetchPriority="high"
+                  itemProp="image"
+                />
+              )}
+
+              <SeriesBanner info={seriesInfo} />
+
+              {/* Mobile TOC (desktop has it in the right sidebar) */}
+              {toc.length > 2 && (
+                <details className="lg:hidden mb-8 rounded-xl border p-4" style={{ borderColor: 'var(--border-subtle)', background: 'var(--bg-elevated)' }}>
+                  <summary className="cursor-pointer text-sm font-bold uppercase tracking-wider" style={{ color: 'var(--text-secondary)' }}>
+                    On this page ({toc.length})
+                  </summary>
+                  <ul className="mt-3 space-y-1.5 text-sm border-l" style={{ borderColor: 'var(--border-subtle)' }}>
+                    {toc.map((h) => (
+                      <li key={h.id} style={{ paddingLeft: `${(h.depth - 2) * 12 + 12}px` }}>
+                        <a href={`#${h.id}`} className="block py-0.5 hover:text-[var(--accent)]" style={{ color: 'var(--text-secondary)' }}>
+                          {h.text}
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                </details>
+              )}
+
+              <div className="prose-blog">{rendered}</div>
+
+              <CodeBlockEnhancer />
+
+              <hr className="my-12" style={{ borderColor: 'var(--border-subtle)' }} />
+
+              <section className="glass-card rounded-2xl p-6 mb-10 flex items-start gap-4 flex-wrap">
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img src={post.author.avatar} alt="" className="w-14 h-14 rounded-full object-cover" />
+                <div className="flex-1 min-w-0">
+                  <Link
+                    href={`/blog/author/${post.author.handle}`}
+                    className="font-bold mb-1 inline-block hover:text-[var(--accent)] transition-colors"
+                    style={{ color: 'var(--text-primary)' }}
+                  >
+                    {post.author.name}
+                  </Link>
+                  {post.author.bio && (
+                    <p className="text-sm mb-3" style={{ color: 'var(--text-secondary)' }}>
+                      {post.author.bio}
+                    </p>
+                  )}
+                  <AuthorSocials socials={post.author.socials} />
+                </div>
+              </section>
+
+              <NewsletterCTA variant="inline" />
+
+              <p className="text-sm mb-10 mt-10" style={{ color: 'var(--text-muted)' }}>
+                Spotted a typo or want to improve this post?{' '}
+                <a
+                  href={editUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-[var(--accent)] font-semibold hover:underline"
+                >
+                  Edit on GitHub &rarr;
+                </a>
+              </p>
+
+              <Comments />
+
+              {related.length > 0 && (
+                <section className="mt-12">
+                  <h2 className="text-2xl font-bold mb-6" style={{ color: 'var(--text-primary)' }}>
+                    Related posts
+                  </h2>
+                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    {related.map((p) => (
+                      <Link
+                        key={p.slug}
+                        href={`/blog/${p.slug}`}
+                        className="glass-card rounded-xl p-4 transition-all hover:-translate-y-1"
+                      >
+                        <p
+                          className="text-[10px] font-bold uppercase tracking-wider text-[var(--accent)] mb-2"
+                        >
+                          {p.tags[0] || 'Article'}
+                        </p>
+                        <p
+                          className="font-semibold leading-snug mb-2 line-clamp-3"
+                          style={{ color: 'var(--text-primary)' }}
+                        >
+                          {p.title}
+                        </p>
+                        <p className="text-xs" style={{ color: 'var(--text-muted)' }}>
+                          {p.readMinutes} min read
+                        </p>
+                      </Link>
+                    ))}
+                  </div>
+                </section>
+              )}
+            </div>
+
+            <aside className="hidden lg:block">
+              <div className="sticky top-28 max-h-[calc(100vh-8rem)] overflow-y-auto pr-2">
+                <BlogToc toc={toc} />
+              </div>
+            </aside>
+          </article>
+        </div>
+      </main>
+    </>
+  );
+}