README.md

SvelteKit & Github Pages Setup

SvelteKit set-up deployable to GitHub Pages.

Create a Sveltekit project

npm create svelte@latest my-app
cd my-app
npm install
npm run dev

Install adapter-static & gh-pages

npm i -D @sveltejs/adapter-static gh-pages

package.json

  "devDependencies": {
+   "@sveltejs/adapter-static": "^2.0.3",
    "@sveltejs/kit": "^1.22.6",
    "gh-pages": "^5.0.0",
    "svelte": "^4.2.0",
    "vite": "^4.4.9"
  }

Modify paths.base in the config

kit.paths.base should be your repo URL subpath (see the Vite docs). In the example below, replace /repository-name with your repository name.

svelte.config.js

+import adapter from "@sveltejs/adapter-static";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter(),
+   paths: {
+     base: process.env.NODE_ENV === "production" ? "/repository-name" : "",
+   },
  },
};

export default config;

src/routes/+layout.js

export const prerender = true;

Note: You will also need to prepend relative paths with the SvelteKit base path so that your app can build successfully for production.

<script>
  import { base } from "$app/paths";
</script>

<a href="{base}/about">About</a>

Access assets in static folder in CSS

vite.config.js

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig(({ mode }) => ({
  plugins: [sveltekit()],
+  resolve: {
+    alias: {
+      $static: mode === "production" ? "./static/" : "../..",
+    },
+  },
}));

src/routes/styles.css

:root {
  --icon-close: url($static/images/icon_close.svg);
}

Add a .nojekyll file to the /static folder

The last step is to add an empty .nojekyll file to the static folder to bypass Jekyll on GitHub Pages. SvelteKit will copy static assets to the final build folder.

Add the deploy script

package.json

{
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
+    "deploy": "gh-pages -d build -t true"
  }
}

The deploy script instructs gh-pages to do the following:

• -d build: Publish the build folder
• -t true: Include dotfiles (e.g., .nojekyll)