Oct 23, 2024

Deploy Sveltekit app on Github-Pages

Github

#. Summary

So what we're gonna doing is, create a Github workflow and build our Sveltekit app and store that build output to a artifact then deploy from that build.
Let's see step-by-step.

I assume you already have a Sveltekit app ready to deploy or test. If you dont, create a new one.

#. Setup Sveltekit app

Since Github-Pages is a static site hosting solution, we need to use a static adapter.

bash
npm i -D @sveltejs/adapter-static

And update svelte.config.js with new adapter.

svelte.config.js
import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
  // for more information about preprocessors
  preprocess: vitePreprocess(),

  kit: {
    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
    // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
    adapter: adapter(),
  },
};

export default config;

#. Deploy to GitHub-Pages

There are a couple of ways to do this, but instead doing this manually every time, we're going to utilize Github actions. With a simple workflow, we can trigger a deployment every time a commit is made to the main branch.

NOTE: In this workflow, my Sveltekit app ain't on then root dir, so I'm changing directory to where it is. You can remove it, if your app is in same level as .github folder.

.github/workflows/pages.yml
name: Deploy to GitHub Pages

on:
  push:
    branches: 'main'

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
          cache-dependency-path: web/package-lock.json

      - name: Install dependencies
        run: |
          cd web
          npm install

      - name: build
        env:
          BASE_PATH: '/${{ github.event.repository.name }}'
        run: |
          cd web
          npm run build
      - name: Upload Artifacts
        uses: actions/upload-pages-artifact@v3
        with:
          path: 'web/build/'

  deploy:
    needs: build
    runs-on: ubuntu-latest

    permissions:
      pages: write
      id-token: write

    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    steps:
      - name: Deploy
        id: deployment
        uses: actions/deploy-pages@v4

Now push this to repository.
Congrats, you made your first deployment.

#. Helpful links