svelte-ghpages.md

Notes to self about deploying SvelteKit to Github Pages

So there is a handy npm package called gh-pages that'll handle most of the gross stuff, you just have to configure it.

Prerequisites

Get to the point where npm run build compiles a working version of your website in the build/ directory. Also be in a git repo connected to Github (obv).

Adding gh-pages

1. Install it 2. Make a file to deploy it

Add a script to configure its deployment. I'll call this gh-pages.js

// gh-pages.js
import { publish } from 'gh-pages';

publish(
  'build',
  (err) => {
    if (err) {
      console.log(err);
    } else {
      console.log('Published!');
    }
  }
);

3. Add it to package.json

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

Now when you run npm run build npm run deploy, you should push the build/ dir to a branch called gh-pages in your repo on Github.

Disable Jekyll

Having jekyll enabled seems to break everything, so in the end we want a .nojekyll file in our build/ dir.

1. Add a .nojekyll file to static/

2. Enable dotfiles in your gh-pages config

To do this add a dotfiles option to the gh-pages.js file made earlier

// gh-pages.js
import { publish } from 'gh-pages';

publish(
  'build',
  {
    dotfiles: true
  },
  (err) => {
    if (err) {
      console.log(err);
    } else {
      console.log('Published!');
    }
  }
);

Now when you npm run build, you should see a .nojekyll file in your build/ directory.

---

Source: I'm basically paraphrasing this post