sveltekit-gh-pages

Minimal SvelteKit set-up made deployable to GitHub Pages.

1) Use the static adapter

Install the SvelteKit static adapter to prerender the app.

package.json

  "devDependencies": {
+   "@sveltejs/adapter-static": "^2.0.2",
    "@sveltejs/kit": "^1.15.7",
    "gh-pages": "^5.0.0",
    "svelte": "^3.58.0",
    "vite": "^4.3.1"
  }

svelte.config.js

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

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
+   adapter: adapter(),
  },
};

export default config;

Ensure your top-level +layout.js exports prerender = true.

// src/routes/+layout.js
export const prerender = true;

2) Modify paths.base in the config

• kit.paths.base should be your repo URL subpath (see the Vite docs)

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

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

export default config;

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>

3) Add a .nojekyll file to the build

The last step is to add a .nojekyll file to the build folder to bypass Jekyll on GitHub Pages.

package.json

{
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "deploy": "touch build/.nojekyll && gh-pages -d build -t true"
  }
}

Quick start

Use degit to quickly scaffold a new project:

npx degit metonym/sveltekit-gh-pages my-app
cd my-app && yarn install

Deploying to GitHub Pages

First, build the app by running yarn build.

Then, run yarn deploy to deploy the app to GitHub Pages.