Deployment Guide

on:
  push:
    branches: ["main"]
  workflow_dispatch:

jobs:
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Pages
        uses: actions/configure-pages@v5
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: '.'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

[build]
  publish = "."
  command = "echo 'No build required'"

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"
    X-Content-Type-Options = "nosniff"
    Referrer-Policy = "strict-origin-when-cross-origin"

[[headers]]
  for = "/assets/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

# Install Wrangler CLI
npm install -g wrangler

# Login to Cloudflare
wrangler login

# Deploy
wrangler pages publish . --project-name=klef-sonatta

# Sync to S3 bucket
aws s3 sync . s3://your-bucket-name \
  --exclude ".git/*" \
  --exclude ".github/*" \
  --exclude "docs/*" \
  --cache-control "public, max-age=31536000" \
  --exclude "index.html"

# Upload HTML with different cache settings
aws s3 sync . s3://your-bucket-name \
  --exclude "*" \
  --include "*.html" \
  --cache-control "public, max-age=3600"

/* Critical CSS is inlined */
/* Non-critical CSS loaded asynchronously */
<link rel="preload" href="assets/styles/design-system.css" as="style">
<link rel="stylesheet" href="assets/styles/design-system.css" media="print" onload="this.media='all'">

<script src="assets/scripts/mega-menu-spa.js" defer></script>

<!-- DNS Prefetch for external resources -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">

<!-- Preconnect to critical origins -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Preload critical assets -->
<link rel="preload" href="assets/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="assets/styles/design-system.css" as="style">

<!-- Primary Meta Tags -->
<title>Klef Agency - Branding, Strategy & Development</title>
<meta name="title" content="Klef Agency - Branding, Strategy & Development">
<meta name="description" content="Award-winning agency specializing in branding, digital strategy, and web development in Cabo San Lucas, Mexico.">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://klef.agency/">
<meta property="og:title" content="Klef Agency">
<meta property="og:description" content="Award-winning agency specializing in branding, digital strategy, and web development.">
<meta property="og:image" content="https://klef.agency/assets/images/og-image.jpg">

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://klef.agency/">
<meta property="twitter:title" content="Klef Agency">
<meta property="twitter:description" content="Award-winning agency specializing in branding, digital strategy, and web development.">
<meta property="twitter:image" content="https://klef.agency/assets/images/twitter-image.jpg">

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Klef Agency",
  "url": "https://klef.agency",
  "logo": "https://klef.agency/assets/images/logo.png",
  "description": "Award-winning agency specializing in branding, digital strategy, and web development",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Cabo San Lucas",
    "addressCountry": "MX"
  },
  "contactPoint": {
    "@type": "ContactPoint",
    "email": "[email protected]",
    "contactType": "Customer Service"
  }
}
</script>

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://klef.agency/</loc>
    <lastmod>2026-03-04</lastmod>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://klef.agency/portfolio/casa-valentina-los-cabos-restaurant-brand/</loc>
    <lastmod>2026-03-04</lastmod>
    <priority>0.8</priority>
  </url>
  <!-- Add more portfolio items -->
</urlset>

User-agent: *
Allow: /

Sitemap: https://klef.agency/sitemap.xml

# Run Lighthouse audit
lighthouse https://your-site.com --view

Strict-Transport-Security: max-age=31536000; includeSubDomains
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: geolocation=(), microphone=(), camera=()

# Development workflow
git checkout -b feature/new-portfolio-item
# Make changes
git commit -m "Add new portfolio item"
git push origin feature/new-portfolio-item
# Create PR → Preview deployment generated
# After review → Merge to main → Production deployment

# Revert to previous commit
git revert HEAD
git push origin main

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

// Portfolio image loaded event
document.addEventListener('image-loaded', (e) => {
  console.log('Image loaded:', e.detail.index);
  // Send to analytics
  gtag('event', 'image_loaded', {
    'image_index': e.detail.index
  });
});