How to Deploy a Static Website to AWS

{
  "scripts": {
    "dev": "next dev",
    "prebuild": "node scripts/generate-og-images.js && node scripts/convert-svg-to-png.js",
    "build": "next build",
    "generate-og": "node scripts/generate-og-images.js && node scripts/convert-svg-to-png.js"
  },
  "dependencies": {
    "next": "14.1.0",
    "react": "^18",
    "tailwindcss": "^3.3.0",
    "framer-motion": "^11.0.0",
    "lucide-react": "^0.309.0"
  },
  "devDependencies": {
    "sharp": "^0.34.5"
  }
}

/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'export',           // Generates static HTML files
    trailingSlash: true,        // URLs end with / (e.g., /about/)
    images: {
        unoptimized: true       // Required for static export
    }
};

module.exports = nextConfig;

const fs = require('fs');
const path = require('path');

const articles = {
    'my-article': {
        title: 'Article Title Here',
        description: 'Brief description for social media preview.',
        category: 'Technical Guide'
    }
};

function generateSVG(slug, article) {
    return `<svg width="1200" height="630" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#1e293b"/>
      <stop offset="100%" style="stop-color:#0f172a"/>
    </linearGradient>
  </defs>
  
  <rect width="1200" height="630" fill="url(#bg)"/>
  <rect x="0" y="0" width="8" height="630" fill="#0d9488"/>
  
  <text x="60" y="80" font-family="system-ui" font-size="14" 
        font-weight="600" fill="#0d9488">${article.category.toUpperCase()}</text>
  
  <text x="60" y="180" font-family="system-ui" font-size="48" 
        font-weight="300" fill="white">${article.title}</text>
  
  <text x="60" y="280" font-family="system-ui" font-size="20" 
        fill="#94a3b8">${article.description}</text>
  
  <text x="60" y="560" font-family="system-ui" font-size="24" 
        font-weight="600" fill="white">Your Brand</text>
</svg>`;
}

// Generate all OG images
const outputDir = path.join(__dirname, '../public/og');
if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir, { recursive: true });

Object.entries(articles).forEach(([slug, article]) => {
    const svg = generateSVG(slug, article);
    fs.writeFileSync(path.join(outputDir, `${slug}.svg`), svg);
    console.log(`Generated: ${slug}.svg`);
});

const sharp = require('sharp');
const fs = require('fs');
const path = require('path');

const ogDir = path.join(__dirname, '../public/og');

async function convertSvgToPng() {
    const files = fs.readdirSync(ogDir).filter(f => f.endsWith('.svg'));
    
    for (const file of files) {
        const svgPath = path.join(ogDir, file);
        const pngPath = path.join(ogDir, file.replace('.svg', '.png'));
        
        await sharp(svgPath)
            .resize(1200, 630)
            .png()
            .toFile(pngPath);
        
        console.log(`Converted: ${file} → ${file.replace('.svg', '.png')}`);
    }
}

convertSvgToPng().catch(console.error);

# 1. Build the site
npm run build

# 2. Upload to S3 (using AWS CLI)
aws s3 sync out/ s3://your-bucket-name --delete

# 3. Invalidate CloudFront cache
aws cloudfront create-invalidation \
    --distribution-id YOUR_DIST_ID \
    --paths "/*"