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.

What is SvelteKit?

SvelteKit 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 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.

# 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.

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 for more details.

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.

Manually build and push your output directory to GitHub or use a tool like gh-pages.

Configure GitHub pages to deploy your app with the repo settings.

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