Fix GitHub Pages deployment: correct basePath and assetPrefix configuration for CSS and assets loading

Author: ubenabdelkrim

.github/workflows/deploy.yml

@@ -32,6 +32,8 @@ jobs:
         run: npm ci
 
       - name: Build project
+        env:
+          GITHUB_ACTIONS: true
         run: npm run export
 
       - name: Add .nojekyll file

next.config.ts

@@ -4,8 +4,8 @@ const nextConfig: NextConfig = {
   // Configuración para GitHub Pages
   output: 'export',
   trailingSlash: true,
-  basePath: process.env.GITHUB_ACTIONS ? '/dataplug_web' : '',
-  assetPrefix: process.env.GITHUB_ACTIONS ? '/dataplug_web/' : '',
+  basePath: process.env.NODE_ENV === 'production' ? '/dataplug-web' : '',
+  assetPrefix: process.env.NODE_ENV === 'production' ? '/dataplug-web/' : '',
 
   turbopack: {
     rules: {

src/app/components/Footer.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { Layout, Row, Col, Typography, Space, Divider, List } from 'antd';
 import { GithubOutlined } from '@ant-design/icons';
 import Image from 'next/image';
+import { getAssetPath } from '../utils';
 
 const { Footer: AntFooter } = Layout;
 const { Title, Paragraph } = Typography;
@@ -24,7 +25,7 @@ export default function Footer({ showPyRun = true }: FooterProps) {
           <Col xs={24} md={6}>
             <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: 16 }}>
               <Image
-                src="/logo.svg"
+                src={getAssetPath("/logo.svg")}
                 alt="DataPlug Logo"
                 width={28}
                 height={28}

src/app/components/Header.tsx

@@ -5,6 +5,7 @@ import { Layout, Row, Col, Typography, Space, Button } from 'antd';
 import { BookOutlined } from '@ant-design/icons';
 import Link from 'next/link';
 import Image from 'next/image';
+import { getAssetPath } from '../utils';
 
 const { Header: AntHeader } = Layout;
 const { Title } = Typography;
@@ -29,7 +30,7 @@ export default function Header({ showPyRun = true }: HeaderProps) {
         <Col>
           <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
             <Image
-              src="/logo.svg"
+              src={getAssetPath("/logo.svg")}
               alt="DataPlug Logo"
               width={90}
               height={90}

src/app/components/sections/HeroSection.tsx

@@ -5,6 +5,7 @@ import { Typography, Space, Button } from 'antd';
 import { RocketOutlined, PlayCircleOutlined, DatabaseOutlined, CloudOutlined } from '@ant-design/icons';
 import Link from 'next/link';
 import Image from 'next/image';
+import { getAssetPath } from '../../utils';
 
 const { Title, Paragraph, Text } = Typography;
 
@@ -95,7 +96,7 @@ export default function HeroSection() {
               filter: 'drop-shadow(0 0 30px rgba(100, 200, 255, 0.3))'
             }}>
               <Image
-                src="/logo.svg"
+                src={getAssetPath("/logo.svg")}
                 alt="DataPlug Logo"
                 width={200}
                 height={200}

src/app/docs/page.tsx

@@ -44,6 +44,7 @@ import {
 import Link from 'next/link';
 import Image from 'next/image';
 import { dataCockpitInstallation, dataCockpitInstallationWithExtras } from '../data/dataCockpit';
+import { getAssetPath } from '../utils';
 import { pyrunUrl } from '../data/pyrun';
 import { formatExamples, allExamplesUrl } from '../data/examples';
 
@@ -296,7 +297,7 @@ results = bag.map(lambda slice: len(slice.get().split('>')) - 1).compute()`;
                         <Link href="/" style={{ textDecoration: 'none' }}>
                             <div style={{ display: 'flex', alignItems: 'center', gap: '12px', cursor: 'pointer' }}>
                                 <Image
-                                    src="/logo.svg"
+                                    src={getAssetPath("/logo.svg")}
                                     alt="DataPlug Logo"
                                     width={28}
                                     height={28}

src/app/utils/index.ts

@@ -26,4 +26,10 @@ export const formatDuration = (seconds: number): string => {
   const hours = Math.floor(seconds / 3600);
   const minutes = Math.floor((seconds % 3600) / 60);
   return `${hours}h ${minutes}m`;
+};
+
+// Utility function to handle asset paths for GitHub Pages
+export const getAssetPath = (path: string): string => {
+  const basePath = process.env.NODE_ENV === 'production' ? '/dataplug-web' : '';
+  return `${basePath}${path}`;
 };