I chose SvelteKit to build my portfolio website because I wanted to learn svelte or atleast get a feel for the framework. While utilising SvelteKit I came across some hurdles and challenges one of them being publishing the finished site, there are a plethora of resources available to publish a SvelteKit app to gh-pages however the approach via the svelteLand sveltekit blog site (Svelteland Link) did not work for me (NOTE: I am a moron who makes a lot of mistakes!!!)

You can find the git repository here (Repository Link)

I am assuming that you already have created a SvelteKit application and a git repo for that application. If not, create them now.

The approach on the svelteLand blog was to host the site on a separate gh-pages branch on the /root folder, this would be my suggested approach as well as having a separate branch for the deployed jargon code is better, the main branch remains relatively clutter free. However, due to an unrelated error, I mistakenly thought this approach was wrong and I hosted the site in the /docs folder on the main branch (NOTE: Both of these approaches would work just fine.)

You can configure it as follows: Go to the repository settings -> pages

First we need to install the SvelteKit Static Adapter. It will output our app as a static set of files instead of a dynamic app.

				
  npm i @sveltejs/adapter-static
							
			

Now you need to edit svelte.config.js as follows

				
  import adapter from '@sveltejs/adapter-static'; // was adapter-auto

  const dev = process.env.NODE_ENV === 'development'; // the first half is process->env->NODE_ENV
                                               // it is resolving to 'development'
                                               // (NOTE: use . instead of -> while typing in file for process env NODE_ENV)

  /** @type {import('@sveltejs/kit').Config} */
  const config = {
	  kit: {
		  adapter: adapter({
			  pages: 'docs',
			  assets: 'docs'
		  }),
		  paths: {
			  base: dev ? '' : '/dionpinto' //Your repo name here
		  },
		  prerender: {
			  default: true
		  }
	  }
  };

  export default config;
							
			

we target the /docs folder. (NOTE: this is beacuse of the approach I took hosting the site on main /docs on gh-pages)

Add a empty .nojekyll in the static folder.

We can finally deploy out application.

				
  npm run build
							
			

Commit and push your changes

				
  git add docs

  git commit -m "Changes commited"

  git push
							
			

gh-pages will then deploy your site