sylux6 / sylux

My portfolio

sveltekit-gh-pages

Minimal static, pre-rendered 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.3",
    "@sveltejs/kit": "^1.22.6",
    "gh-pages": "^5.0.0",
    "svelte": "^4.2.0",
    "vite": "^4.4.9"
  }

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). In the example below, replace /sveltekit-gh-pages with your repository name.

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

package.json

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

The deploy script

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

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

---

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.