Hutley Van Systems — Website

Modern static site built with Astro + Tailwind CSS, deployed to GitHub Pages.

Quick Start

# 1. Create the Astro project (run once)
npm create astro@latest . -- --template minimal
npm install

# 2. Add integrations
npx astro add tailwind
npx astro add sitemap

# 3. Start dev server
npm run dev
# → http://localhost:4321

Project Structure

hutley-vansystems/
├── .github/
│   └── workflows/
│       └── deploy.yml          # Auto-deploy to GitHub Pages on push to main
├── public/
│   ├── robots.txt
│   ├── favicon.png             # TODO: Add favicon
│   └── images/                 # Static images (logos, team photos, etc.)
├── src/
│   ├── components/
│   │   ├── SEO.astro           # Meta tags, OG, JSON-LD — used in every layout
│   │   ├── Header.astro        # Site header + nav
│   │   └── Footer.astro        # Site footer
│   ├── content/
│   │   └── blog/               # Blog posts as .md files
│   ├── data/
│   │   ├── config.ts           # Site-wide config (phone, address, nav links)
│   │   └── locations.ts        # Location page data (10 FL cities)
│   ├── layouts/
│   │   └── BaseLayout.astro    # HTML shell used by all pages
│   └── pages/
│       ├── index.astro         # Homepage
│       ├── get-a-quote.astro   # Quote form (Formspree)
│       ├── about.astro
│       ├── testimonials.astro
│       ├── gallery.astro
│       ├── locations/
│       │   ├── index.astro     # Locations overview
│       │   └── [city].astro    # Dynamic — generates 10 location pages
│       ├── services/
│       │   ├── local-moves.astro
│       │   ├── long-distance.astro
│       │   ├── corporate-relocation.astro
│       │   ├── storage.astro
│       │   ├── logistics.astro
│       │   └── auto-transport.astro
│       └── blog/
│           ├── index.astro     # Blog listing
│           └── [...slug].astro # Dynamic blog post pages
├── astro.config.mjs
├── CLAUDE.md                   # Full project context for Claude AI sessions
└── README.md

Key Commands

Command	Action
npm run dev	Start local dev server at localhost:4321
npm run build	Build production site to ./dist/
npm run preview	Preview production build locally

Content Updates

Adding a Blog Post

Create a new .md file in src/content/blog/:

---
title: "Your Post Title"
description: "SEO meta description"
pubDate: 2024-06-01
author: "Hutley Van Systems Team"
tags: ["moving tips", "Orlando"]
---

Your content here in markdown...

Adding a Location Page

Add a new object to src/data/locations.ts — the [city].astro template handles the rest automatically.

Updating Contact Info / Nav Links

Edit src/data/config.ts — changes propagate site-wide.

Deployment

GitHub Pages Setup (one-time)

1. Push repo to GitHub
2. Go to Settings → Pages
3. Set Source to GitHub Actions
4. The deploy.yml workflow handles everything on push to main

Custom Domain (Melbourne IT DNS)

Point your domain to GitHub Pages:

Type: CNAME
Name: www
Value: yourusername.github.io

Or for apex domain, add A records:

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

Then add your domain in Settings → Pages → Custom domain.

SEO Checklist

• Submit sitemap to Google Search Console: https://hutleyvansystems.com/sitemap-index.xml
• Claim Google Business Profile at business.google.com
• Verify site in Google Search Console
• Add OG image to /public/images/og-image.jpg (1200x630px)
• Add favicon to /public/favicon.png
• Set formspreeId in src/data/config.ts

Formspree Setup

1. Sign up free at formspree.io
2. Create a new form
3. Copy the form ID
4. Set formspreeId in src/data/config.ts