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 likeapp
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
step 2 is all that is required for configuration. If you are deploying tohttps://[username].github.io/your-repo-name
you will need to supply apaths.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 yourstatic
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.
"scripts": { "build": "vite build" }
Configure GitHub pages to deploy your app with the repo settings.
And that is it! You should be good to go and see your site live! This is how I deploy my personal site seancoughlin.me. If you want to check out a code example you can find that in my Git repo.