fix all internal links to use base path for GitHub Pages

Add withBase() helper that prepends import.meta.env.BASE_URL to all
hardcoded href paths across 17 files. This ensures all navigation,
pagination, tag/author/blog links work correctly when deployed to
the /python-insider-blog/ subdirectory on GitHub Pages.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: JacobCoffee

src/components/BaseHead.astro

@@ -5,15 +5,16 @@ interface Props {
   image?: string;
 }
 
+import { withBase } from "../lib/utils";
 const { title, description = "The official blog of the Python core development team.", image } = Astro.props;
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 ---
 
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
-<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-<link rel="sitemap" href="/sitemap-index.xml" />
-<link rel="alternate" type="application/rss+xml" title="Python Insider" href="/rss.xml" />
+<link rel="icon" type="image/svg+xml" href={withBase("/favicon.svg")} />
+<link rel="sitemap" href={withBase("/sitemap-index.xml")} />
+<link rel="alternate" type="application/rss+xml" title="Python Insider" href={withBase("/rss.xml")} />
 <link rel="canonical" href={canonicalURL} />
 
 <!-- Fonts: Plus Jakarta Sans (display) + Inter (body) + JetBrains Mono (code) -->

src/components/BlogPostCard.astro

@@ -1,5 +1,5 @@
 ---
-import { formatDate, slugify } from "../lib/utils";
+import { formatDate, slugify, withBase } from "../lib/utils";
 
 interface Props {
   slug: string;
@@ -18,13 +18,13 @@ const { slug, title, publishDate, author, description, tags, showEditLink = true
 <article class="post-card group relative px-5 py-4">
   <div class="flex items-start justify-between gap-4">
     <div class="min-w-0 flex-1">
-      <a href={`/blog/${slug}`} class="block">
+      <a href={withBase(`/blog/${slug}`)} class="block">
         <h3 class="text-base font-semibold leading-snug text-zinc-900 transition-colors group-hover:text-[#306998] dark:text-zinc-100 dark:group-hover:text-[#ffd43b]" style="font-family: var(--font-display);">
           {title}
         </h3>
       </a>
       <div class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-zinc-500 dark:text-zinc-400">
-        <a href={`/authors/${slugify(author)}`} class="font-medium text-zinc-600 hover:text-[#306998] dark:text-zinc-300 dark:hover:text-[#ffd43b] transition-colors">{author}</a>
+        <a href={withBase(`/authors/${slugify(author)}`)} class="font-medium text-zinc-600 hover:text-[#306998] dark:text-zinc-300 dark:hover:text-[#ffd43b] transition-colors">{author}</a>
         <span class="text-zinc-300 dark:text-zinc-600">&middot;</span>
         <time datetime={publishDate}>{formatDate(publishDate)}</time>
       </div>
@@ -35,7 +35,7 @@ const { slug, title, publishDate, author, description, tags, showEditLink = true
         <div class="mt-2.5 flex flex-wrap gap-1.5">
           {tags.slice(0, 4).map((tag) => (
             <a
-              href={`/tags/${tag}`}
+              href={withBase(`/tags/${tag}`)}
               class="tag-pill rounded-md bg-zinc-100 px-2 py-0.5 text-xs font-medium text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400"
             >
               {tag}
@@ -47,7 +47,7 @@ const { slug, title, publishDate, author, description, tags, showEditLink = true
 
     {isDev && showEditLink && (
       <a
-        href={`/keystatic/collection/posts/item/${slug}`}
+        href={withBase(`/keystatic/collection/posts/item/${slug}`)}
         class="edit-btn mt-1 flex-shrink-0 rounded-md p-1.5 text-zinc-300 hover:bg-zinc-100 hover:text-zinc-500 dark:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-400"
         title="Edit in Keystatic"
       >

src/components/CommandPalette.tsx

@@ -58,13 +58,20 @@ function formatDate(iso: string): string {
   });
 }
 
+/* ── Base path helper ──────────────────────────────── */
+
+const BASE = import.meta.env.BASE_URL.replace(/\/$/, "");
+function withBase(path: string): string {
+  return `${BASE}${path.startsWith("/") ? path : `/${path}`}`;
+}
+
 /* ── Navigation items with chord shortcuts ──────────── */
 
 const NAV_ITEMS = [
-  { label: "Go to Home", href: "/", icon: HomeIcon, chord: "H" },
-  { label: "Go to Blog", href: "/blog", icon: BlogIcon, chord: "B" },
-  { label: "Go to Tags", href: "/tags", icon: TagIcon, chord: "T" },
-  { label: "Go to RSS Feed", href: "/rss.xml", icon: RssIcon, chord: "R" },
+  { label: "Go to Home", href: withBase("/"), icon: HomeIcon, chord: "H" },
+  { label: "Go to Blog", href: withBase("/blog"), icon: BlogIcon, chord: "B" },
+  { label: "Go to Tags", href: withBase("/tags"), icon: TagIcon, chord: "T" },
+  { label: "Go to RSS Feed", href: withBase("/rss.xml"), icon: RssIcon, chord: "R" },
 ] as const;
 
 /* ── Component ──────────────────────────────────────── */
@@ -285,7 +292,7 @@ export default function CommandPalette({ open: controlledOpen, onOpenChange }: P
                   <Command.Item
                     key={post.id}
                     value={`post-${post.id}`}
-                    onSelect={() => navigate(`/blog/${post.id}`)}
+                    onSelect={() => navigate(withBase(`/blog/${post.id}`))}
                   >
                     <div className="cmdk-post-icon" aria-hidden="true">
                       <ArticleIcon />

src/components/Footer.astro

@@ -1,5 +1,6 @@
 ---
 import PythonLogo from "./PythonLogo.astro";
+import { withBase } from "../lib/utils";
 const isDev = import.meta.env.DEV;
 const year = new Date().getFullYear();
 ---
@@ -9,7 +10,7 @@ const year = new Date().getFullYear();
     <div class="grid grid-cols-1 gap-8 sm:grid-cols-3">
       <!-- Brand column -->
       <div>
-        <a href="/" class="flex items-center gap-2">
+        <a href={withBase("/")} class="flex items-center gap-2">
           <PythonLogo width={24} height={24} />
           <span class="text-sm font-semibold text-zinc-800 dark:text-zinc-200" style="font-family: var(--font-display);">Python Insider</span>
         </a>
@@ -34,15 +35,15 @@ const year = new Date().getFullYear();
         <h3 class="text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400">Subscribe</h3>
         <ul class="mt-3 space-y-2">
           <li>
-            <a href="/rss.xml" class="inline-flex items-center gap-1.5 text-sm text-zinc-600 transition-colors hover:text-orange-600 dark:text-zinc-300 dark:hover:text-orange-400">
+            <a href={withBase("/rss.xml")} class="inline-flex items-center gap-1.5 text-sm text-zinc-600 transition-colors hover:text-orange-600 dark:text-zinc-300 dark:hover:text-orange-400">
               <svg class="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M6.18 15.64a2.18 2.18 0 012.18 2.18C8.36 19 7.38 20 6.18 20 5 20 4 19 4 17.82a2.18 2.18 0 012.18-2.18zM4 4.44A15.56 15.56 0 0119.56 20h-2.83A12.73 12.73 0 004 7.27V4.44zM4 10.1a9.9 9.9 0 019.9 9.9h-2.83A7.07 7.07 0 004 12.93V10.1z"/></svg>
               RSS Feed
             </a>
           </li>
-          <li><a href="/tags" class="text-sm text-zinc-600 transition-colors hover:text-[#306998] dark:text-zinc-300 dark:hover:text-[#ffd43b]">Browse by Tag</a></li>
+          <li><a href={withBase("/tags")} class="text-sm text-zinc-600 transition-colors hover:text-[#306998] dark:text-zinc-300 dark:hover:text-[#ffd43b]">Browse by Tag</a></li>
           {isDev && (
             <li>
-              <a href="/keystatic" class="inline-flex items-center gap-1.5 text-sm text-zinc-600 transition-colors hover:text-amber-600 dark:text-zinc-300 dark:hover:text-amber-400">
+              <a href={withBase("/keystatic")} class="inline-flex items-center gap-1.5 text-sm text-zinc-600 transition-colors hover:text-amber-600 dark:text-zinc-300 dark:hover:text-amber-400">
                 <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
                 Keystatic CMS
               </a>

src/components/Header.astro

@@ -1,17 +1,18 @@
 ---
 import PythonLogo from "./PythonLogo.astro";
 import CommandPalette from "./CommandPalette";
+import { withBase } from "../lib/utils";
 const isDev = import.meta.env.DEV;
 const navItems = [
-  { label: "Home", href: "/" },
-  { label: "Blog", href: "/blog" },
+  { label: "Home", href: withBase("/") },
+  { label: "Blog", href: withBase("/blog") },
 ];
 const currentPath = Astro.url.pathname;
 ---
 
 <header class="sticky top-0 z-50 border-b border-zinc-200 bg-white/80 backdrop-blur-xl dark:border-zinc-800 dark:bg-[#0f1117]/80">
   <nav class="mx-auto flex max-w-6xl items-center justify-between px-6 py-3">
-    <a href="/" class="group flex items-center gap-2.5">
+    <a href={withBase("/")} class="group flex items-center gap-2.5">
       <PythonLogo width={30} height={30} class="transition-transform duration-300 group-hover:scale-110" />
       <span class="text-lg font-semibold tracking-tight text-zinc-900 dark:text-zinc-100" style="font-family: var(--font-display);">
         Python Insider
@@ -35,7 +36,7 @@ const currentPath = Astro.url.pathname;
 
       {isDev && (
         <a
-          href="/keystatic"
+          href={withBase("/keystatic")}
           class="ml-1 flex items-center gap-1.5 rounded-lg px-3 py-2 text-sm font-medium text-zinc-500 transition-all hover:bg-amber-50 hover:text-amber-700 dark:text-zinc-400 dark:hover:bg-amber-900/20 dark:hover:text-amber-400"
           title="Keystatic CMS"
         >
@@ -63,7 +64,7 @@ const currentPath = Astro.url.pathname;
       </button>
 
       <a
-        href="/rss.xml"
+        href={withBase("/rss.xml")}
         class="rounded-lg p-2 text-zinc-500 transition-colors hover:bg-orange-50 hover:text-orange-600 dark:text-zinc-400 dark:hover:bg-orange-900/20 dark:hover:text-orange-400"
         title="RSS Feed"
       >

src/layouts/BlogPostLayout.astro

@@ -1,6 +1,6 @@
 ---
 import BaseLayout from "./BaseLayout.astro";
-import { formatDate, slugify } from "../lib/utils";
+import { formatDate, slugify, withBase } from "../lib/utils";
 
 interface Props {
   title: string;
@@ -27,7 +27,7 @@ const { title, publishDate, updatedDate, author, description, tags, slug } = Ast
         </div>
         {isDev && slug && (
           <a
-            href={`/keystatic/collection/posts/item/${slug}`}
+            href={withBase(`/keystatic/collection/posts/item/${slug}`)}
             class="edit-btn-always mt-2 flex-shrink-0 rounded-lg bg-zinc-100 p-2.5 text-zinc-400 hover:bg-amber-100 hover:text-amber-700 dark:bg-zinc-800 dark:text-zinc-600 dark:hover:bg-amber-900/30 dark:hover:text-amber-400"
             title="Edit in Keystatic"
           >
@@ -39,7 +39,7 @@ const { title, publishDate, updatedDate, author, description, tags, slug } = Ast
       </div>
 
       <div class="mt-4 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-zinc-500 dark:text-zinc-400">
-        <a href={`/authors/${slugify(author)}`} class="font-medium text-zinc-800 hover:text-[#306998] dark:text-zinc-200 dark:hover:text-[#ffd43b] transition-colors">{author}</a>
+        <a href={withBase(`/authors/${slugify(author)}`)} class="font-medium text-zinc-800 hover:text-[#306998] dark:text-zinc-200 dark:hover:text-[#ffd43b] transition-colors">{author}</a>
         <span class="text-zinc-300 dark:text-zinc-600">/</span>
         <time datetime={publishDate}>{formatDate(publishDate)}</time>
         {updatedDate && (
@@ -54,7 +54,7 @@ const { title, publishDate, updatedDate, author, description, tags, slug } = Ast
         <div class="mt-5 flex flex-wrap gap-1.5">
           {tags.map((tag) => (
             <a
-              href={`/tags/${tag}`}
+              href={withBase(`/tags/${tag}`)}
               class="tag-pill rounded-md bg-zinc-100 px-2.5 py-1 text-xs font-medium text-zinc-600 dark:bg-zinc-700/60 dark:text-zinc-300"
             >
               {tag}
@@ -73,15 +73,15 @@ const { title, publishDate, updatedDate, author, description, tags, slug } = Ast
     <footer class="not-prose mt-14 border-t border-zinc-200 pt-8 dark:border-zinc-700">
       <div class="flex items-center justify-between">
         <a
-          href="/blog"
+          href={withBase("/blog")}
           class="group inline-flex items-center gap-2 text-sm font-medium text-[#306998] transition-colors hover:text-[#254f73] dark:text-[#ffd43b] dark:hover:text-[#f0c419]"
         >
           <span class="transition-transform group-hover:-translate-x-0.5">&larr;</span>
           Back to all posts
         </a>
         {isDev && slug && (
           <a
-            href={`/keystatic/collection/posts/item/${slug}`}
+            href={withBase(`/keystatic/collection/posts/item/${slug}`)}
             class="inline-flex items-center gap-1.5 rounded-lg bg-zinc-100 px-3 py-1.5 text-xs font-medium text-zinc-500 transition-colors hover:bg-amber-100 hover:text-amber-700 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:bg-amber-900/30 dark:hover:text-amber-400"
           >
             <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">

src/lib/utils.ts

@@ -14,6 +14,16 @@ export function formatDateShort(date: string): string {
   });
 }
 
+/**
+ * Prepends the configured Astro base path to an absolute path.
+ * Dev: "/" + "/blog" → "/blog"
+ * Prod: "/python-insider-blog/" + "/blog" → "/python-insider-blog/blog"
+ */
+export function withBase(path: string): string {
+  const base = import.meta.env.BASE_URL.replace(/\/$/, "");
+  return `${base}${path.startsWith("/") ? path : `/${path}`}`;
+}
+
 export function slugify(text: string): string {
   return text
     .normalize("NFD")

src/pages/404.astro

@@ -3,6 +3,7 @@ export const prerender = true;
 
 import BaseLayout from "../layouts/BaseLayout.astro";
 import PythonLogo from "../components/PythonLogo.astro";
+import { withBase } from "../lib/utils";
 ---
 
 <BaseLayout title="Not Found | Python Insider">
@@ -22,13 +23,13 @@ import PythonLogo from "../components/PythonLogo.astro";
     </p>
     <div class="mt-8 flex items-center gap-3">
       <a
-        href="/"
+        href={withBase("/")}
         class="inline-flex items-center gap-2 rounded-lg bg-[#306998] px-5 py-2.5 text-sm font-medium text-white shadow-md transition-all hover:bg-[#254f73] hover:shadow-lg dark:bg-[#ffd43b] dark:text-zinc-900 dark:hover:bg-[#f0c419]"
       >
         Go home
       </a>
       <a
-        href="/blog"
+        href={withBase("/blog")}
         class="inline-flex items-center gap-2 rounded-lg border border-zinc-300 px-5 py-2.5 text-sm font-medium text-zinc-700 transition-all hover:border-zinc-400 hover:bg-zinc-50 dark:border-zinc-600 dark:text-zinc-300 dark:hover:border-zinc-500 dark:hover:bg-zinc-800"
       >
         Browse posts

src/pages/authors/[author].astro

@@ -4,7 +4,7 @@ import type { CollectionEntry } from "astro:content";
 import BaseLayout from "../../layouts/BaseLayout.astro";
 import BlogPostCard from "../../components/BlogPostCard.astro";
 import { getCollection } from "astro:content";
-import { slugify } from "../../lib/utils";
+import { slugify, withBase } from "../../lib/utils";
 
 export const prerender = true;
 
@@ -48,7 +48,7 @@ const avatarUrl = author.avatar || (author.github ? `https://github.com/${author
 <BaseLayout title={`${author.name} | Python Insider`}>
   <div class="animate-fade-up">
     <a
-      href="/authors"
+      href={withBase("/authors")}
       class="group inline-flex items-center gap-1.5 text-sm font-medium text-[#306998] transition-colors hover:text-[#254f73] dark:text-[#ffd43b] dark:hover:text-[#f0c419]"
     >
       <span class="transition-transform group-hover:-translate-x-0.5">&larr;</span>
@@ -74,7 +74,7 @@ const avatarUrl = author.avatar || (author.github ? `https://github.com/${author
           </h1>
           {isDev && (
             <a
-              href={`/keystatic/collection/authors/item/${slug}`}
+              href={withBase(`/keystatic/collection/authors/item/${slug}`)}
               class="edit-btn-always mt-1 flex-shrink-0 rounded-lg bg-zinc-100 p-2 text-zinc-400 hover:bg-amber-100 hover:text-amber-700 dark:bg-zinc-800 dark:text-zinc-600 dark:hover:bg-amber-900/30 dark:hover:text-amber-400"
               title="Edit in Keystatic"
             >

src/pages/authors/index.astro

@@ -3,7 +3,7 @@ export const prerender = true;
 
 import BaseLayout from "../../layouts/BaseLayout.astro";
 import { getCollection } from "astro:content";
-import { slugify } from "../../lib/utils";
+import { slugify, withBase } from "../../lib/utils";
 
 const allPosts = await getCollection("posts");
 const publishedPosts = allPosts.filter((p) => p.data.published);
@@ -46,7 +46,7 @@ const maxCount = authorsWithCounts[0]?.count ?? 1;
       const pct = Math.round((author.count / maxCount) * 100);
       return (
         <a
-          href={`/authors/${author.slug}`}
+          href={withBase(`/authors/${author.slug}`)}
           class="group flex items-center gap-4 rounded-lg px-4 py-3 transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-800/60"
         >
           {author.github ? (