Svelte Deployment On Github Pages

Jeremias0618

Svelte Deployment on GitHub Pages

Minimal Svelte single-page app built with Vite and TypeScript, set up so it can be hosted on GitHub Pages under a project site URL (https://<user>.github.io/<repository>/).

Repository: github.com/Jeremias0618/Svelte-Deployment-on-GitHub-Pages

Live site (after you enable GitHub Pages on gh-pages or Actions): jeremias0618.github.io/Svelte-Deployment-on-GitHub-Pages

[!NOTE] The live URL only works after you configure GitHub Pages in the repository settings and publish the built dist folder (for example via GitHub Actions).

Tech stack

Area	Technology	Role
UI	Svelte 5	Components and reactivity
Bundler / dev server	Vite 7	Fast HMR, optimized production builds
Language	TypeScript	Static typing
Tooling	svelte-check	Svelte + TS diagnostics

Dev dependencies also include @sveltejs/vite-plugin-svelte, @tsconfig/svelte, and @types/node. See package.json for exact versions.

Prerequisites

Node.js (LTS recommended)
npm (bundled with Node)

Getting started

git clone https://github.com/Jeremias0618/Svelte-Deployment-on-GitHub-Pages.git
cd Svelte-Deployment-on-GitHub-Pages
npm install
npm run dev

Open the URL Vite prints (usually http://localhost:5173/).

Scripts

Command	Description
`npm run dev`	Start the dev server with HMR
`npm run build`	Production build to `dist/`
`npm run preview`	Preview the production build locally
`npm run check`	Run `svelte-check` and TypeScript on Node config

GitHub Pages and `vite.config.ts`

GitHub project sites are served from a subpath: /<repository-name>/. Vite must emit asset URLs with that prefix, which is what base does.

[!IMPORTANT] The minimal snippet you often see in docs only shows base for brevity. In this project you still need plugins: [svelte()] from @sveltejs/vite-plugin-svelte. The correct shape is both: base and the Svelte plugin (plus any other options you add later).

If you rename the repository, update the repoName constant in vite.config.ts so base stays correct.

[!TIP] For a user or organization site (username.github.io with the repo named username.github.io), the site is served from the root; in that case use base: '/' instead.

Deploying (overview)

Run npm run build and upload the contents of dist/ to the branch or artifact GitHub Pages uses, or
Add a GitHub Actions workflow that runs npm ci, npm run build, and deploys dist with actions/upload-pages-artifact / actions/deploy-pages.

Ensure the repository Settings → Pages source matches how you publish.

Project structure

├── public/          # Static assets copied as-is
├── src/
│   ├── assets/
│   ├── lib/         # Example components (e.g. Counter)
│   ├── App.svelte
│   └── main.ts
├── index.html
├── vite.config.ts
├── svelte.config.js
└── tsconfig*.json

Recommended IDE setup

Visual Studio Code with the Svelte extension.

Top categories