Coding
PromptBeginner5 minmarkdown
Nano Banana Pro
Agent skill for nano-banana-pro
6
This is a personal portfolio website built with Next.js 14 using the App Router, configured for static export and GitHub Pages deployment. The site features:
Sign in to like and favorite skills
This is a personal portfolio website built with Next.js 14 using the App Router, configured for static export and GitHub Pages deployment. The site features:
# Install dependencies npm ci # Start development server npm run dev # Build for production npm run build # Generate static export (for GitHub Pages) npm run export # Lint code npm run lint # Deploy to GitHub Pages (build + export + deploy) npm run deploy
Start development server:
npm run dev
Environment considerations:
/red-arrow.io basePath for GitHub PagesCreate directory:
src/app/articles/[slug]/
Add
page.mdx with required article metadata:
export const article = { title: 'Article Title', description: 'Brief description', author: 'Author Name', date: '2025-01-01', }
Include images in the same directory if needed
Articles automatically appear on
/articles page via dynamic import system
next-themes with class-based strategysrc/app/providers.tsxtailwind.config.ts support theme switchingpage.tsx or page.mdx (Next.js App Router)ArticleLayout.tsx)src/lib/ (formatDate.ts)@/ alias for src/ directory (configured in tsconfig.json)type keyword for better tree-shaking'use client'src/components/@tailwindcss/typography plugin# Full production build and export npm run build && npm run export
Build Configuration:
output: 'export' for static site generationbasePath: '/red-arrow.io' and assetPrefix for GitHub Pagesimages: { unoptimized: true } due to static export limitationsAutomatic deployment via GitHub Actions (
.github/workflows/static.yml):
main branchnpm run build with production environment.next directory to GitHub PagesManual deployment:
npm run deploy # Uses gh-pages package
NEXT_PUBLIC_SITE_URL: Set to 'https://www.red-arrow.io' in productionNODE_ENV: Determines basePath and assetPrefix configurationsrc/app/ ├── layout.tsx # Root layout with providers ├── page.tsx # Homepage ├── not-found.tsx # 404 page ├── articles/ # Article pages │ ├── page.tsx # Articles index │ └── [slug]/ │ └── page.mdx # Individual articles ├── feed.xml/ # RSS feed route handler └── [other-pages]/ # Static pages (about, projects, etc.)
Layout.tsx, ArticleLayout.tsx, SimpleLayout.tsxButton.tsx, Card.tsx, Container.tsxHeader.tsx, Footer.tsx, SocialIcons.tsxsrc/images/ with organized subdirectoriessrc/app/src/images/logos/ and src/images/photos/mdx-components.tsx)article object in each MDX filesrc/lib/articles.ts using fast-glob/feed.xml via route handlerfeed library for RSS generationcheerio for HTML extraction@mapbox/rehype-prismsrc/styles/prism.cssnpm run lint # Next.js ESLint configuration
prettier.config.js[component] Brief descriptionnpm run lint and npm run buildsrc/app/[page-name]/page.tsxSimpleLayout for basic pages or create custom layoutHeader.tsx if neededtailwind.config.ts for theme support@tailwindcss/typography classes for content stylingsrc/images/ subdirectoryImage componentnext.config.mjsunoptimized: true is setThemeProvider setup in providers.tsx@/ alias configuration in tsconfig.json