Building your static website with Svelte, SvelteKit and TailwindCSS
Tags: svelte, tailwindcss, prerendering, staticsitegenerator
Published: 2021-09-25 12:37:00

In this post, I would like to share with you my process for starting to build a new website for launching my next open source project.

My goal is to build a website with few pages, a home page and some pages for explaining the project.

To achieve that, I need to:

- use a kit to help me to structure pages/modules/layout (a couple of pages that share some modules like header, footer, nav bar, etc.);
- on-demand file serving over native ESM;
- fast Hot Module Replacement;
- optimized build;
- serve static pre-render files (no server-side logic/language);
- use Tailwind CSS for styling;
- follow the same old and boring SEO guidelines.

I decided to use Svelte for developing the frontend part, and I was starting to use Vite Js with Svelte template. But I see that Svelte ships SvelteKit, based on Vite Js, more optimized for Svelte features. So I decided to proceed with SvelteKit.

The goal of this post is to show you all basics step to have an environment for creating pages, it is not focused on HTML, CSS, and JS development. So I'm going to:

- install Svelte Kit;
- create index and about pages;
- add Tailwind in the "SvelteKit" way;
- setup correctly the process in order to have a static build, ready to be deployed on service, with no server-side language.

## Install Svelte Kit

Usually, I use NPM for managing packages and node modules:

```sh
npm init svelte@latest my-app
cd my-app
npm install
npm run dev -- --open
```

![Creating your first SvelteKit web application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/47wu9szdii82lagm1gqj.png)

The *npm init* command will set up a blank Svelte project. In *src/routes* you will find your index page. By convention, the index page is named *+page.svelte*.

## Create the "about" page

If you want to create a new page accessible via the path */about*, you must create an *+page.svelte* file in *src/routes/about/* directory. There is an implicit convention that the *src/routes* structure determines the URL path.

For example:

- URL */* is for *src/routes/+page.svelte*
- URL */about* for *src/routes/about/+page.svelte*

> If you used SvelteKit in the past and need some clarification about this naming convention, it's because something was changed in the routing mechanism of SvelteKit before the stable version was released. For more information, take a look at this discussion: [https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3294867](https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3294867)


So now you can create *src/routes/about/+page.svelte*

```html
<h1>About page</h1>
<div>Ciao!</div>
```

If you have your "*npm run dev*"  up and running now, you can go to *http://localhost:5173/about*

## Add Tailwind CSS

Now, we can focus on the style, including Tailwind CSS. To do that, I'm going to use "*svelte-add*" instead of installing manually the tailwind and PostCSS packages.
So the commands are:

```sh
npx svelte-add tailwindcss
npm install
```

Now, you can use your new Tailwind CSS style.

To do that, update your *src/routes/about/+page.svelte* file, using some TailwindCSS classes with:

```html
<section class="text-center w-full h-screen bg-gradient-to-r from-yellow-200 via-red-300 to-pink-300">
<h1 class="pt-10 text-7xl">About page</h1>
<div class="font-serif pt-12 text-2xl">Ciao!</div>
</section>
```
And make sure that you have your *src/routes/+layout.svelte* includes the lines:

```html
<script>
  import "../app.css";
</script>

<slot />
```

If you are using `PostCSS` you have to import `app.postcss` instead of `app.css`:

```html
<script>
  import "../app.postcss";
</script>

<slot />
```

If you have your "*npm run dev*" up and running, you can see the result on *http://localhost:5173/about*.

## Build statics pages (*Static Site Generator*) 

In order to serve your pages with no server-side language (node or something else), you need to **pre-render** pages. In this way, you can use any platform for delivering static assets (surge.sh, Vercel, Netlify, GitHub Pages, Amazon S3 + Amazon CloudFront,  etc.).
To do that, SvelteKit needs an "adapter" to use during the building process.
```shell
npm i -D @sveltejs/adapter-static@latest
```
In *svelte.config.js* you have to:

- replace *sveltejs/adapter-auto* with the *sveltejs/adapter-static*;
- configure the adapter with pages, assets, fallback
- add prerender section.

So, your *svelte.config.js* file will be something like this one:
```javascript
import preprocess from "svelte-preprocess";
//import adapter from "@sveltejs/adapter-auto";
import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter({
      // default options are shown
      pages: 'build',
      assets: 'build',
      fallback: null
    }),
  },

  preprocess: [
    preprocess({
      postcss: true,
    }),
  ],
};

export default config;
```

Now you have to set some parameters in `+layout.js` file. If in your project the `+layout.js` file doesn't exist you have to create it as `src/routes/+layout.js`. The file has to define:
```javascript
// if you want to generate a static html file
// for your page.
// Documentation: https://kit.svelte.dev/docs/page-options#prerender
export const prerender = true;

// if you want to Generate a SPA
// you have to set ssr to false.
// This is not the case (so set as true or comment the line)
// Documentation: https://kit.svelte.dev/docs/page-options#ssr
export const ssr = true;

// How to manage the trailing slashes in the URLs
// the URL for about page witll be /about with 'ignore' (default)
// the URL for about page witll be /about/ with 'always'
// https://kit.svelte.dev/docs/page-options#trailingslash
export const trailingSlash = 'ignore';

```
Now you can build your static files (in the build directory according with the configuration) with the command:
```shell
npm run build
```

For testing locally your built files, you can use
```shell
npm run preview
```

Essentially, it serves locally your built files (not the svelte files, but the built files in your build directory).

To publish your files on the public server (Netlify, Vercel, Surge.sh, GitHub pages etc.) you need to copy the content of the build/ directory.

If you are using some service for publishing your website, that force you to use a subdirectory to serve your static files (for example GitHub pages), you can use *paths* in *config.kit* section:

```
paths: {
    base: '/your-repo-name',
},
```

## Wrap up ...
I hope that these steps help you to install and set up an environment with Svelte Kit (based on Vite JS) and Tailwind CSS.
Feel free to provide any feedback...