Skip to content
Home
Projects
Blog

Deploy Svelte app in Github Pages

Santhosh Balaji Ramesh
Santhosh Balaji Ramesh
Tech aficionado

With giants in the Frontend-Framework world like React and Angular, Svelte the underdog has seen an tremendous growth among the developers and within the community since its inception in 2016.

Take a look at the results of StateOfJs survey here

StateOfJs 2022 Results - Svelte popularity

Create a GitHub Project

After creating a new GitHub account or signing into your account, the dashboard page opens.

By clicking the New button, create a new project.

GitHub - new project

Enter a project name and the visibilty should be public. This is because, for Free account, only “public” projects can publish using GitHub Pages.

GitHub - project details

Enable GitHub Pages

In the GitHub project, do the following steps

  1. Navigate to Settings tab
  2. Select Pages from the sidebar
  3. Make sure under Source, GitHub Actions is selected

That all you need to do for now.

Enabling GitHub Pages

Setup a svelte project

In this post, we are going to look into a basic Svelte project and not SVELTEKIT based app.

  1. Create svelte project.

    npm init vite -- test-project

  2. Choose the option Svelte and language of your choice, here I have selected Typescript.

    Svelte project command

  3. Exceute the following commands, to check whether the development server starts.

    # navigate to the project folder
    cd test-project
    

    # Install the node modules
    npm install
    

    # Start the dev server
    npm run dev

  4. The server should be started at http://localhost:5173/

  5. Open the project in VS Code. The project structure should like this.

    • index.html
    • package.json
    • package-lock.json
    • Directorynode_modules/
      • …
    • Directorypublic
      • vite.svg
    • README.md
    • Directorysrc
      • app.css
      • App.svelte Starting point for svelte-projects
      • Directoryassets
        • svelte.svg
      • Directorylib
        • Counter.svelte
      • main.ts
      • vite-env.d.ts
    • svelte.config.js
    • tsconfig.json
    • tsconfig.node.json
    • vite.config.ts

Update vite.config.ts file

vite.config.ts
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'


// https://vitejs.dev/config/
export default defineConfig({
   base:'svelte-github-pages', // project slug from GitHub
  plugins: [svelte()],
})

Create workflow file

In order to deploy to GitHub Pages, create a file deploy.yml in the folder .github/workflows

  • Directory.github
    • Directoryworkflows
      • deploy.yml
  • index.html
  • package.json
  • …

Copy the following contents into the file.

deploy.yml
name: Deploying Svelte app


on:
  push:
    branches: [ main ]
  workflow_dispatch:


# Allow this job to clone the repo and create a page deployment
permissions:
  contents: read
  pages: write
  id-token: write


jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install and Build
        run: |
          npm install
          npm run build


      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          name: github-pages
          path: dist
          retention-days: 1


  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - name: Deploy to GitHub Pages
        uses: actions/deploy-pages@v4
        id: deployment

Upload the project

Now save its time to create the initial commit and upload the project to GitHub. Follow the following commands

  1. Initialize Git Repo 
    git init
  2. Add files and write the commit message 
    git add . && git commit -m "initial commit"
  3. Setup the remote origin. Change the URL according to your project. 
    git remote add origin https://github.com/santhosh2r2/svelte-github-pages.git
  4. Push the commit to remote repository 
    git push origin main

Reviewing GitHub Actions

After the initial commit, go to the project in GitHub website. Under the tab Actions, you can see a 1 workflow run.

A successfully completed job looks like this below. And the website is hosted under https://santhosh2r2.github.io/svelte-github-pages/

Workflow successfull

The final website should look below.

successfully deployed

Next steps

Now you have a svelte project deployed in GitHub and made available for everyone.

Have fun making your next project.

Tags: