Publishing a SvelteKit App to GitHub Pages
Tags: svelte, sveltekit, github, staticwebsite
Published: 2023-10-08 14:23:24

---
title: Publishing a SvelteKit App to GitHub Pages
published: true
date: 2023-10-08 14:08:35 UTC
tags: #svelte #sveltekit #github #staticwebsite
canonical_url: https://blog.seancoughlin.me/publishing-a-sveltekit-app-to-github-pages
---

Learn the step-by-step guide to effortlessly deploy your SvelteKit application to GitHub Pages and make your web project accessible to the world.

![SvelteKit Logo](https://cdn.hashnode.com/res/hashnode/image/upload/v1696773973033/9dbab7b7-9cab-4942-b35d-908a6f3d6f75.png)

### What is SvelteKit?

[SvelteKit](https://kit.svelte.dev/docs/introduction) is a framework for building web applications that are built on top of Svelte, a modern JavaScript UI library. Unlike traditional frameworks that operate mainly on the client side, SvelteKit provides a unified approach to building apps that can be rendered on the server, statically generated at build time, or even rendered client-side. It comes with built-in features like routing, layouts, and server-side rendering (SSR), making it a comprehensive solution for building everything from small, static websites to large, complex web applications. With a focus on performance and a simplified developer experience, SvelteKit aims to streamline the process of building robust and scalable web apps.

### Build a SvelteKit App!

This tutorial just spells out how to configure and deploy a SvelteKit web app to GitHub Pages. If you never have created a Svelte application before, the [docs](https://kit.svelte.dev/docs/creating-a-project) are great!

### Configuring SvelteKit for GitHub Pages

Build your application using Svelte and SvelteKit

GitHub Pages is a static site host. Therefore, we need to install the [Svelte static site adapter](https://kit.svelte.dev/docs/adapters).

```bash
# NPM install
npm i -D @sveltejs/adapter-static
# YARN install
yarn add @sveltejs/adapter-static --dev

```

After installing the static adapter, at that to your `svelte.config.js`.

```javascript
import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        appDir: 'app', // Required as the default is _app
        adapter: adapter()
    },
    preprocess: vitePreprocess()
};
export default config;

```

Add an app directory output to the `svelte.config.js`. The typical output is `_app` so I think something like `app` makes sense but this can be anything without an underscore. GitHub Pages cannot serve content from directories with special characters like underscores.

If you are deployed to `https://[username].github.io` that is all that is required for configuration. If you are deploying to `https://[username].github.io/your-repo-name` you will need to supply a `paths.base`. See the [SvelteKit docs](https://kit.svelte.dev/docs/adapter-static#github-pages) for more details.

```javascript
import adapter from '@sveltejs/adapter-static';

const dev = process.argv.includes('dev');

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter(),
        paths: {
            base: dev ? '' : process.env.BASE_PATH,
        }
    }
};

```

Add an empty `.nojekyll` file in your `static` folder to prevent GitHub Pages provided Jekyll configurations from managing the site.

![No-Jekyll](https://cdn.hashnode.com/res/hashnode/image/upload/v1696772807659/1143e923-067a-4f8c-bf25-72291a131ac9.png)

Manually build and push your output directory to GitHub or use a tool like [gh-pages](https://dev.to/scc33/deploying-to-github-pages-using-gh-pages-2d95).

Configure GitHub pages to [deploy your app with the repo settings](https://blog.seancoughlin.me/building-a-personal-website-with-github-pages).

---

Originally published at https://blog.seancoughlin.me.