sveltekit-static-template Svelte Themes

Sveltekit Static Template

Template for building static websites using SvelteKit, Tailwind, and TypeScript

SvelteKit Static Template

A minimal template for building static sites using SvelteKit and TailwindCSS. This template uses the adapter-static package to generate static files in the build directory.

Overview

Quick Start

Click the "Use this template" button at the top of the repository to create your own project. For more details, check GitHub's guide on template repositories.

Install the dependencies with npm i (or pnpm i or yarn), then start the development server with npm run dev or build the project for production with npm run build.

[!NOTE]
Both the development server and the build process require a .env file in the root of the project. Make sure to create this file and define any necessary environment variables before running the project.

Features

  • CMS Integration: Integrates with Contentful to fetch data at build time.
  • Asset Optimization: Utilizes the vite-imagetools package to optimize images, automatically generating multiple sizes based on Contentful asset descriptions.
  • SEO & Metadata: Retrieves metadata such as page titles, descriptions, and Open Graph tags from Contentful to enhance SEO.
  • Accessibility: Improves accessibility and SEO by including Published and Updated dates on each page. Also features a Skip to content link for better keyboard navigation.

Components

  • Image: A responsive image component that uses the srcset attribute to load the most suitable image size lazily.
  • Link: A flexible link component that renders either an <a> or <button> element based on whether the href prop is provided.

Static Files

The static directory contains essential files such as robots.txt, favicon images, and fonts.

License

This project is open source and available under the MIT License.

Contributing

If you have any suggestions or find a bug, please create an issue or submit a pull request as needed. For more information, see the contributing guidelines. I'm always happy to receive contributions and feedback to make this project better!

Top categories

svelte logo

Need a Svelte website built?

Hire a professional Svelte developer today.
Loading Svelte Themes