Vite Demo - Static Website Template

This project demonstrates a complete static website template built with Vite. The project is based on the built with Gulp, which you can find here.

The website code itself is not meant to make sense, but only serves the purpose of demonstrating the build. Nevertheless, I would like to thank my daughter for choosing the image and theme :)

Available Commands

# Start development server (Hot-reload on port 3000)
npm run dev

# Create production build
npm run build

# Preview production build locally
npm run preview

# Serve production build
npm run serve

Key Dependencies

• Vite - Fast build tool and dev server
• vite-plugin-svg-icons - SVG sprite generation
• vite-plugin-static-copy - Static asset copying
• Sass - SCSS preprocessing
• Autoprefixer - CSS vendor prefixing
• Terser - JavaScript minification

Project Structure

src/
├── index.html          # Entry HTML file
├── main.js             # Entry point (imports SCSS + JS)
├── scss/
│   └── main.scss       # Main SCSS file
├── js/
│   ├── accordion.js    # Accordion functionality
│   ├── title.js        # Title handling
│   └── year.js         # Year display
├── icons/
│   ├── favicon.svg     # Favicon
│   └── iconset/        # SVG icons for sprite
├── images/             # Responsive images
└── fonts/              # Web fonts

Build Output

dist/
├── css/all.min.css     # Compiled and minified CSS
├── js/bundle.min.js    # Bundled and minified JS
├── assets/             # Static assets (fonts, images, favicon)
├── fonts/              # Copied fonts
├── icons/
│   └── favicon.svg     # Copied favicon
├── images/             # Copied images
└── index.html          # Processed HTML with asset references

Key Features

SVG Sprite Generation

Icons from the iconset folder are automatically optimized and injected into the HTML during development with vite-plugin-svg-icons:

<!-- Use icons with xlink:href="#iconname" -->
<svg class="icon" role="img">
  <use xlink:href="#pets"></use>
</svg>

Available icons: pets, wow, right

Note: SVG sprites are injected inline during development for optimal performance.

SCSS Processing

• Native Vite Sass support with fast compilation
• PostCSS with Autoprefixer for vendor prefixes
• Automatic minification in production builds

Asset Optimization

• Static asset copying with vite-plugin-static-copy
• Automatic CSS and JS injection into HTML
• Modern ES module bundling with tree-shaking