From b1fff130f11847b2bcfcd822d3bcf240c2d779d8 Mon Sep 17 00:00:00 2001 From: thinh Date: Tue, 21 Oct 2025 09:54:05 +0700 Subject: [PATCH 1/2] Fixed: url image on page --- .env.production | 3 ++ .github/workflows/deploy.yml | 5 ++- ...temap.config.js => next-sitemap.config.cjs | 6 ++-- next.config.mjs | 13 ++++--- package.json | 6 ++-- public/robots.txt | 11 ++++++ public/sitemap.xml | 6 ++++ scripts/build-gh-pages.sh | 35 +++++++++++++++++++ src/components/Footer/Footer.tsx | 3 +- src/components/Header/Header.tsx | 7 ++-- .../Home/AboutSection/AboutSection.tsx | 13 +++---- .../Home/HomeSection/HomeSection.tsx | 25 ++++++------- .../Home/ProductSection/ProductSection.tsx | 10 ++++-- .../TestimonialsSection.tsx | 3 +- src/lib/getImagePath.ts | 19 ++++++++++ src/lib/imageLoader.ts | 19 +++++++--- 16 files changed, 142 insertions(+), 42 deletions(-) create mode 100644 .env.production rename next-sitemap.config.js => next-sitemap.config.cjs (84%) create mode 100644 public/robots.txt create mode 100644 public/sitemap.xml create mode 100755 scripts/build-gh-pages.sh create mode 100644 src/lib/getImagePath.ts diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..b9d6747 --- /dev/null +++ b/.env.production @@ -0,0 +1,3 @@ +# GitHub Pages Configuration +NEXT_PUBLIC_SITE_URL=https://trinhquocthinh.github.io/foodhub +NEXT_PUBLIC_BASE_PATH=/foodhub diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 9a67b0e..a39950f 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -51,7 +51,10 @@ jobs: run: | export GITHUB_ACTIONS=true export GITHUB_REPOSITORY=${{ github.repository }} - yarn build + export NODE_ENV=production + export NEXT_PUBLIC_SITE_URL=https://trinhquocthinh.github.io/foodhub + export NEXT_PUBLIC_BASE_PATH=/foodhub + yarn build:gh - name: Add .nojekyll file run: touch ./out/.nojekyll diff --git a/next-sitemap.config.js b/next-sitemap.config.cjs similarity index 84% rename from next-sitemap.config.js rename to next-sitemap.config.cjs index c88432a..afb4d88 100644 --- a/next-sitemap.config.js +++ b/next-sitemap.config.cjs @@ -1,6 +1,8 @@ /** @type {import('next-sitemap').IConfig} */ module.exports = { - siteUrl: process.env.NEXT_PUBLIC_SITE_URL || 'https://foodhub.com', + siteUrl: + process.env.NEXT_PUBLIC_SITE_URL || + 'https://trinhquocthinh.github.io/foodhub', generateRobotsTxt: true, generateIndexSitemap: false, exclude: ['/api/*', '/admin/*'], @@ -13,7 +15,7 @@ module.exports = { }, ], additionalSitemaps: [ - `${process.env.NEXT_PUBLIC_SITE_URL || 'https://foodhub.com'}/sitemap.xml`, + `${process.env.NEXT_PUBLIC_SITE_URL || 'https://trinhquocthinh.github.io/foodhub'}/sitemap.xml`, ], }, transform: async (config, path) => { diff --git a/next.config.mjs b/next.config.mjs index f5920a8..c121da5 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -4,12 +4,12 @@ const bundleAnalyzer = withBundleAnalyzer({ enabled: process.env.ANALYZE === 'true', }); -const repoName = process.env.GITHUB_REPOSITORY?.split('/')[1]; -const isGH = process.env.GITHUB_ACTIONS === 'true'; +const repoName = process.env.GITHUB_REPOSITORY?.split('/')[1] || 'foodhub'; +const isDeploy = process.env.NODE_ENV === 'production'; -// prefer explicit client-visible var if bạn muốn dùng trong code +// For GitHub Pages, always use the repo name as base path in production const publicBasePath = - process.env.NEXT_PUBLIC_BASE_PATH || (isGH && repoName ? `/${repoName}` : ''); + process.env.NEXT_PUBLIC_BASE_PATH || (isDeploy ? `/${repoName}` : ''); /** @type {import('next').NextConfig} */ const nextConfig = { @@ -30,8 +30,6 @@ const nextConfig = { // Image optimization images: { unoptimized: true, // Required for static export - loader: 'custom', - loaderFile: './src/lib/imageLoader.ts', formats: ['image/avif', 'image/webp'], // Modern image formats deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840], imageSizes: [16, 32, 48, 64, 96, 128, 256, 384], @@ -115,7 +113,8 @@ const nextConfig = { // Environment variables that should be available on the client env: { NEXT_PUBLIC_SITE_URL: - process.env.NEXT_PUBLIC_SITE_URL || 'https://foodhub.com', + process.env.NEXT_PUBLIC_SITE_URL || + 'https://trinhquocthinh.github.io/foodhub', NEXT_PUBLIC_BASE_PATH: publicBasePath || '', }, diff --git a/package.json b/package.json index 026bd3b..d8764fb 100644 --- a/package.json +++ b/package.json @@ -7,9 +7,11 @@ "scripts": { "dev": "next dev", "build": "next build", + "build:gh": "./scripts/build-gh-pages.sh", "export": "next build", "start": "next start", - "deploy": "yarn export && touch out/.nojekyll && git add -f out/ && git commit -m 'Deploy to GitHub Pages' && git subtree push --prefix out origin gh-pages", + "deploy": "yarn build:gh && git add -f out/ && git commit -m 'Deploy to GitHub Pages' && git subtree push --prefix out origin gh-pages", + "test:deploy": "yarn build:gh && npx serve out -l 3000", "lint": "next lint", "lint:fix": "next lint --fix", "lint:strict": "next lint --max-warnings 0", @@ -17,7 +19,7 @@ "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"", "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"", "analyze": "cross-env ANALYZE=true next build", - "postbuild": "next-sitemap --config next-sitemap.config.js", + "postbuild": "next-sitemap --config next-sitemap.config.cjs", "clean": "rm -rf .next out dist", "release:patch": "./scripts/release.sh patch", "release:minor": "./scripts/release.sh minor", diff --git a/public/robots.txt b/public/robots.txt new file mode 100644 index 0000000..a866f41 --- /dev/null +++ b/public/robots.txt @@ -0,0 +1,11 @@ +# * +User-agent: * +Allow: / +Disallow: /api/ +Disallow: /admin/ + +# Host +Host: https://trinhquocthinh.github.io/foodhub + +# Sitemaps +Sitemap: https://trinhquocthinh.github.io/foodhub/sitemap.xml diff --git a/public/sitemap.xml b/public/sitemap.xml new file mode 100644 index 0000000..3579b39 --- /dev/null +++ b/public/sitemap.xml @@ -0,0 +1,6 @@ + + +https://trinhquocthinh.github.io/foodhub/robots.txt2025-10-20T08:53:40.815Zmonthly0.7 +https://trinhquocthinh.github.io/foodhub2025-10-20T08:53:40.816Zdaily1 +https://trinhquocthinh.github.io/foodhub/sitemap.xml2025-10-20T08:53:40.816Zmonthly0.7 + \ No newline at end of file diff --git a/scripts/build-gh-pages.sh b/scripts/build-gh-pages.sh new file mode 100755 index 0000000..57d4ea6 --- /dev/null +++ b/scripts/build-gh-pages.sh @@ -0,0 +1,35 @@ +#!/bin/bash + +# Build script for GitHub Pages deployment +# This ensures all environment variables are properly set + +# Set environment to production +export NODE_ENV=production + +# Set GitHub Pages specific variables +export NEXT_PUBLIC_SITE_URL="https://trinhquocthinh.github.io/foodhub" +export NEXT_PUBLIC_BASE_PATH="/foodhub" + +# Clean previous builds +rm -rf .next out + +echo "🏗️ Building for GitHub Pages..." +echo " Site URL: $NEXT_PUBLIC_SITE_URL" +echo " Base Path: $NEXT_PUBLIC_BASE_PATH" +echo "" + +# Run Next.js build +yarn next build + +# Add .nojekyll file +if [ -d "out" ]; then + touch out/.nojekyll + echo "" + echo "✅ Build complete! Output in ./out directory" + echo "📁 Images location: ./out/images/" + echo "🌐 Test locally: npx serve out -l 3000" + echo " Then visit: http://localhost:3000/foodhub" +else + echo "❌ Build failed - out directory not found" + exit 1 +fi diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index f33cf4a..99a7dea 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -7,6 +7,7 @@ import { IoLogoYoutube, } from 'react-icons/io5'; +import { getImagePath } from '@/lib/getImagePath'; import './Footer.scss'; const socialLinks = [ @@ -22,7 +23,7 @@ const Footer = () => {
Foodhub {
Foodhub { aria-controls="cart" > Shopping cart {
{item.name} { @@ -8,7 +9,7 @@ const AboutSection = () => {
Foodhub interior {
Decorative shape Decorative shape Decorative shape Decorative shape { directly to your table.

Chef signature { @@ -18,7 +19,7 @@ const HomeSection = () => {
Our menu { About us {
Colorful salad bowl { priority /> Gourmet dish Fresh dessert { /> Foodhub review Foodhub ratings { /> Decorative shape Decorative shape Decorative shape Decorative shape Decorative shape { >
{product.name} { className="btn btn-primary btn-icon" aria-label="View full menu" > - Menu icon + Menu icon Full menu diff --git a/src/components/Home/TestimonialsSection/TestimonialsSection.tsx b/src/components/Home/TestimonialsSection/TestimonialsSection.tsx index f2d9a8c..b520cd7 100644 --- a/src/components/Home/TestimonialsSection/TestimonialsSection.tsx +++ b/src/components/Home/TestimonialsSection/TestimonialsSection.tsx @@ -1,6 +1,7 @@ import Image from 'next/image'; import { IoStar } from 'react-icons/io5'; +import { getImagePath } from '@/lib/getImagePath'; import type { Testimonial } from '@/types'; import './TestimonialsSection.scss'; @@ -33,7 +34,7 @@ const TestimonialsSection = ({ testimonials }: TestimonialsSectionProps) => {
{testimonial.name} { + // Don't modify external URLs + if (src.startsWith('http://') || src.startsWith('https://')) { + return src; + } + + // In production (GitHub Pages), add the base path + const basePath = process.env.NODE_ENV === 'production' ? '/foodhub' : ''; + + // Ensure the src starts with a slash + const cleanSrc = src.startsWith('/') ? src : `/${src}`; + + return `${basePath}${cleanSrc}`; +}; diff --git a/src/lib/imageLoader.ts b/src/lib/imageLoader.ts index 55aa0a8..087e8e9 100644 --- a/src/lib/imageLoader.ts +++ b/src/lib/imageLoader.ts @@ -1,16 +1,25 @@ import type { ImageLoaderProps } from 'next/image'; /** - * Custom image loader to make Next.js Image component work with static exports - * and optional base paths (e.g. GitHub Pages deployments). + * Custom image loader for static exports with GitHub Pages support. + * + * This loader adds the base path to image URLs for GitHub Pages deployments. + * The basePath is determined at build time from NODE_ENV. */ + const imageLoader = ({ src }: ImageLoaderProps): string => { - if (src.startsWith('http')) { + // If the source is an absolute URL, return it as-is + if (src.startsWith('http://') || src.startsWith('https://')) { return src; } - const basePath = process.env.NEXT_PUBLIC_BASE_PATH ?? ''; - return `${basePath}${src}`; + // For GitHub Pages production builds, always use /foodhub as base path + // For development, use empty string + const basePath = process.env.NODE_ENV === 'production' ? '/foodhub' : ''; + + // Ensure we don't double-add slashes + const cleanSrc = src.startsWith('/') ? src : `/${src}`; + return basePath ? `${basePath}${cleanSrc}` : cleanSrc; }; export default imageLoader; From 92a69ee9a27d7af00e5ae97b02753f5c82659464 Mon Sep 17 00:00:00 2001 From: thinh Date: Tue, 21 Oct 2025 09:54:35 +0700 Subject: [PATCH 2/2] chore: bump version to v1.0.3 --- CHANGELOG.md | 6 ++++++ package.json | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index de2190e..95d712b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Security +## [1.0.3] - 2025-10-21 + +### Fixed + +- Url image on page + ## [1.0.2] - 2025-10-20 ### Added diff --git a/package.json b/package.json index d8764fb..d444360 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "foodhub-website", - "version": "1.0.2", + "version": "1.0.3", "private": true, "type": "module", "packageManager": "yarn@1.22.19",