Deploy SvelteKit project to GitHub Pages

sveltekit-github-pages.md

Prerequsites

• You already have a project
• You uploaded the source code to github

Make your website static

To deploy your SvelteKit project, you need an adapter, Github Pages hosts static websites, so we will use adapter-static, to install it, run:

npm install @sveltejs/adapter-static@next --save-dev

Now we have to modify our svelte.config.js file

-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-static';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess(),

	kit: {
		adapter: adapter({
+		  pages: 'build',   // This tells in which folder to build the static files to
+		  assets: 'build',  // This tells in which folder to build the static files to
+		  fallback: null
		}),
+		paths: {
+		  base: '/repository-name' // The github repository name
+		},
+		prerender: {
+			default: true
+		}
	}
};

export default config;

Now try your website with

npm run build

it should create a build folder in your directory and then

npm run preview

make sure that everything is working fine. You may get an error, that is because your website is under localhost:port/repository-name now.

Deploying to GitHub Pages

To make sure GitHub Pages doesn't use Jekyll as site generator, add empty .nojekyll file in your /static folder

We weill install gh-pages dependency now, to make it easier to deploy, it's job will be to create a new empty branch in your repository where you host your code and upload the contents of the newly made /build folder to it.

npm install gh-pages --save-dev

then add this in the package.json

"scripts": {
  ...
  "deploy": "node ./gh-pages.js"
}

then create gh-pages.js file in the root of the project:

import { publish } from 'gh-pages';

publish(
	'build', // which directory to upload
	{
		branch: 'gh-pages', // to which branch (it will create it, if it doesn't exist)
		dotfiles: true // should it include `.file`, yes, because of `.nojekyll`
	},
	() => {
		console.log('Deploy Complete!');
	}
);

Run again

npm run build

then

npm run deploy

Now if you go to your github repository, you should see a new branch called gh-pages, now go to the settings of the repository, under Pages set the branch to gh-pages. Wait for it to be deployed and try it.

If you followed until now, you should probably have 2 branches, main where your source code of the app is and gh-pages where the compiled static website is.