100% Serverless Website with Sveltekit,
Tailwind & Cloudflare Workers

A simple website built in a day with Sveltekit and Tailwind running on Cloudflare's workers. You can see the result at rep-it.nl.

Normally I don't do very plain websites but I did this for my brother and I wanted to play around with Sveltekit and Cloudflare Workers. So while this is a simple website from an HTML prespective, there are also complicated technologies involved. It's a serverless app running on Cloudflare's edge network. This means it's infinitely scalable, super secure, very fast for visitors where it doesn't matter if you are in Alaska or Zimbabwe and - in case of Cloudflare - can be deployed with a single command. (Actually, with the latest version of Cloudflare Workers/Pages, you only need to push it to a repository like Github or Gitlab)

This was my first attempt to build something with Sveltekit, a new web framework with a radically different approach than most other web frameworks.

Svelte is a component framework — like React or Vue — but with an important difference. Traditional frameworks allow you to write declarative state-driven code, but there's a penalty: the browser must do extra work to convert those declarative structures into DOM operations, using techniques like that eat into your frame budget and tax the garbage collector. Instead, Svelte runs at build time, converting your components into highly efficient imperative code that surgically updates the DOM. As a result, you're able to write ambitious applications with excellent performance characteristics.

Sveltekit can generate different types of websites, static and server side rendered and uses adapters to tailor the result to specific deployment types like Cloudflare Workers, Node.js, Netlify, Vercel, etc. In this case I used Cloudflare Workers. For styling I tried Tailwind, something I wanted to work with for a long time. With very little effort I got a perfect score on Google’s Lighthouse, a website performance toolkit, both on Desktop and Mobile.

The website was originally created with plain html/css. To rebuild it using Sveltekit was not very difficult. Each file in a routes folder automatically becomes a route so I just added a file per page. Additionally I added a special layouts file that contains the header, footer and side bar that will be repeated on every page. No specific Svelte code or Javascript was needed for this. The header navigation bar was built as a separate component and had to be included in the layout page. This navigation bar is the only part that has some specific Svelte code for showing and hiding the mobile drawer menu. The menu also uses Svelte specific transitions.

Thanks to Tailwind the website does not use a css file. All styling, including the responsive changes between the desktop and mobile pages, is done with Tailwind's utility classes. No media queries are used and no classes are defined.