Skip to content

DEPLOYMENT.md

Latest commit

 

History

History
239 lines (178 loc) · 6.1 KB

DEPLOYMENT.md

File metadata and controls

239 lines (178 loc) · 6.1 KB

🚀 Quick Deployment Guide for Creedence Clearwater Industrial

✅ What's Been Completed

Your website is fully built and ready to deploy! Here's what you have:

Pages Built (8 total)

  • ✅ Home Page - Hero section, services overview, why choose us
  • ✅ Services Overview - All services with navigation cards
  • ✅ 6 Individual Service Pages:
    • Industrial Cleaning
    • Hydro Excavation
    • Vacuum Truck Services
    • Line Jetting
    • Sewer Jetting
    • Pipe Repair
  • ✅ About Page - Company story, mission, values
  • ✅ Gallery Page - Photo grid (ready for your images)
  • ✅ Careers Page - Job listings and application form
  • ✅ Contact Page - Contact form and company details

Features

  • ✅ Responsive design (mobile, tablet, desktop)
  • ✅ Custom brand colors (#f66400 orange & black)
  • ✅ Professional navigation with mobile menu
  • ✅ Contact and career application forms
  • ✅ SEO metadata on all pages
  • ✅ Zero TypeScript errors (Vercel-ready)
  • ✅ Code pushed to GitHub: https://github.com/casestedham/cci.git

🌐 Deploy to Vercel (5 minutes)

Step 1: Go to Vercel

Visit vercel.com and click "Sign Up"

Step 2: Sign in with GitHub

Click "Continue with GitHub" and authorize Vercel

Step 3: Import Your Repository

  1. Click "Add New Project"
  2. Find "cci" in your repository list
  3. Click "Import"

Step 4: Configure (auto-detected)

Vercel will automatically detect:

  • Framework: Next.js
  • Build Command: npm run build
  • Output Directory: .next

You don't need to change anything! Just click "Deploy"

Step 5: Wait 2 minutes

Your site will build and deploy automatically.

Step 6: Get Your URL

You'll get a URL like: https://cci-yourname.vercel.app

🔧 Next Steps After Deployment

1. Update Contact Information (Priority)

Replace placeholder contact details in these files:

  • components/layout/Footer.tsx (footer contact info)
  • app/contact/page.tsx (contact page details)

Current placeholders:

  • Phone: (555) 123-4567
  • Email: info@ccind.com
  • Address: 123 Industrial Way, City, State 12345

2. Add Your Logo (Recommended)

  1. Add logo file to /public/images/logo.png
  2. Update components/layout/Header.tsx:
import Image from "next/image";

// Replace the text logo with:
<Image 
  src="/images/logo.png" 
  alt="Creedence Clearwater Industrial" 
  width={200} 
  height={60}
/>

3. Connect Forms to Email (Important)

Forms currently log to console. To receive submissions:

Option A - Use Formspree (Easiest, Free)

  1. Go to formspree.io
  2. Create account and get form endpoint
  3. Update forms to POST to that endpoint

Option B - Use Resend (Professional)

npm install resend

Create app/api/contact/route.ts:

import { Resend } from 'resend';

const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST(request: Request) {
  const data = await request.json();
  
  await resend.emails.send({
    from: 'website@yourcompany.com',
    to: 'info@ccind.com',
    subject: 'New Contact Form',
    html: `<p><strong>Name:</strong> ${data.name}</p>
           <p><strong>Email:</strong> ${data.email}</p>
           <p><strong>Phone:</strong> ${data.phone}</p>
           <p><strong>Message:</strong> ${data.message}</p>`
  });
  
  return Response.json({ success: true });
}

Add to .env.local:

RESEND_API_KEY=your_key_here

Update form action in components/forms/ContactForm.tsx

4. Add Gallery Photos

  1. Add images to /public/images/gallery/
  2. Update app/gallery/page.tsx to display them
  3. Recommended: Use Next.js Image component for optimization

5. Add Google Maps (Optional)

Replace map placeholder in app/contact/page.tsx:

  1. Get embed code from Google Maps
  2. Replace the placeholder div with iframe

6. Custom Domain (Optional)

In Vercel dashboard:

  1. Go to your project settings
  2. Click "Domains"
  3. Add your domain (e.g., ccind.com)
  4. Follow DNS setup instructions
  5. Vercel provides free SSL certificate

📱 Test Your Site

Local Testing

Your dev server is running at: http://localhost:3000

Test all pages:

  • Home page loads correctly
  • All 6 service pages work
  • Navigation menu works (desktop & mobile)
  • Contact form submits
  • Career form submits
  • All links work

Production Testing (After Deploy)

  1. Visit your Vercel URL
  2. Test on mobile device
  3. Test all forms
  4. Check page load speed

💰 Costs

  • Vercel Hosting: FREE (hobby plan)

    • Unlimited bandwidth
    • Automatic SSL
    • Git-based deployments
    • 100GB bandwidth/month

  • Custom Domain: ~$12/year (if you don't have one)

    • Buy from Namecheap, Google Domains, etc.

  • Email Service (if needed):

    • Formspree: FREE for 50 forms/month
    • Resend: FREE for 3,000 emails/month

Total: $0-12/year for a professional website! 🎉

🆘 Troubleshooting

Build Fails on Vercel

  • Check build logs in Vercel dashboard
  • Most common: missing environment variables
  • Solution: Add env vars in Vercel project settings

Forms Not Working

  • Check browser console for errors
  • Verify form action endpoint
  • Make sure API route is created

Images Not Loading

  • Verify images are in /public folder
  • Use /images/name.jpg (not public/images/name.jpg)
  • Check file names are correct (case-sensitive)

📞 Quick Reference

GitHub Repository: https://github.com/casestedham/cci.git

Project Location: /Users/casestedham/Desktop/cci

Dev Server: npm run dev → http://localhost:3000

Build: npm run build

Deploy: Push to GitHub → Auto-deploys on Vercel

🎯 Marketing Checklist (After Launch)

  • Set up Google Analytics
  • Add Google My Business listing
  • Submit sitemap to Google Search Console
  • Add business to Yelp, industry directories
  • Create social media profiles
  • Add testimonials to home page
  • Start collecting project photos for gallery

You're all set! 🎉

Your website is professional, fast, and ready to generate leads. Good luck with Creedence Clearwater Industrial!