build: configure base path for GitHub Pages deployment

- Update astro.config.mjs with the repository name as base
- Use import.meta.env.BASE_URL for all links to support sub-path routing

Author: zhongyangxun

astro.config.mjs

@@ -8,7 +8,8 @@ import react from '@astrojs/react';
 // https://astro.build/config
 export default defineConfig({
   site: 'https://zhongyangxun.github.io',
-  base: '/',
+  // can access this value via `import.meta.env.BASE_URL`
+  base: '/blog/',
 
   vite: {
     plugins: [tailwindcss()],

src/components/Navigation.tsx

@@ -5,18 +5,20 @@ import {
   NavigationMenuLink,
 } from './ui/navigation-menu';
 
+const { BASE_URL } = import.meta.env;
+
 type NavigationProps = {
   pathname: string;
 };
 
 const Navigation = ({ pathname }: NavigationProps) => {
   const links = [
     {
-      href: '/',
+      href: BASE_URL,
       label: 'Home',
     },
     {
-      href: '/about',
+      href: `${BASE_URL}about`,
       label: 'About',
     },
   ];

src/components/PostItem.tsx

@@ -9,7 +9,7 @@ const PostItem = ({ id, title, pubDate, description }: PostItemProps) => {
     <div className="flex-col mb-4">
       <div>
         <a
-          href={`/posts/${id}`}
+          href={`${import.meta.env.BASE_URL}posts/${id}`}
           className="font-semibold text-sm hover:underline line-clamp-2"
         >
           {title}