lyteflo-site

Lyte Marketing Site

A lightweight marketing site built with HTMX for component reusability.

Setup

Install dependencies:

npm install

Development

Start the development server:

npm run dev

This will start Vite dev server at http://localhost:8000 and open it in your browser.

Build

Build for production:

npm run build

This creates an optimized dist/ folder with all assets bundled and ready to deploy.

Preview the production build:

npm run preview

Project Structure

src/
├── components/          # Reusable HTMX components
│   ├── header.html     # Site header component
│   └── footer.html     # Site footer component
├── styles/             # CSS stylesheets
├── fonts/              # Font files
├── index.html          # Main page
└── guide.html          # Style guide page

Using Components

Components are loaded using HTMX’s hx-get attribute:

<div hx-get="./components/header.html" hx-trigger="load" hx-swap="innerHTML"></div>

hx-get: The URL to fetch the component from
hx-trigger="load": Load the component when the page loads
hx-swap="innerHTML": Replace the inner HTML of the div with the fetched content

Adding New Components

Create a new HTML file in src/components/
Add the component HTML (without <html>, <head>, or <body> tags)
Include it in your pages using HTMX:

<div hx-get="./components/your-component.html" hx-trigger="load" hx-swap="innerHTML"></div>

CMS

This project uses Cursor as the CMS - edit content directly in the HTML files and components.