← Back to Blog

Building a Portfolio with SvelteKit & GitHub Pages

·
SvelteKitGitHub PagesTutorial

If you’re reading this, you’re looking at the result — a fully static portfolio site built with SvelteKit and deployed to GitHub Pages. Here’s how I put it together.

The Stack

This site is built with a deliberately minimal stack:

  • SvelteKit — Full-stack framework with excellent static site generation
  • mdsvex — Markdown preprocessor for Svelte (this blog post is a .md file!)
  • adapter-static — Generates a fully static site, no server needed
  • GitHub Actions — Automated build and deployment pipeline

Why SvelteKit?

I chose SvelteKit for a few reasons:

  1. Performance — Svelte compiles away the framework, shipping minimal JavaScript
  2. Developer experience — File-based routing, built-in SSR/SSG, TypeScript support
  3. Flexibility — Works as a SPA, SSR app, or fully static site

The Blog System

Blog posts are plain markdown files with YAML frontmatter:

---
title: My Post Title
date: '2026-01-15'
description: A brief summary
tags:
  - Tag1
  - Tag2
published: true
---

Your content here...

The mdsvex preprocessor turns these into Svelte components at build time. The blog listing page uses import.meta.glob to discover all posts:

const posts = import.meta.glob('/src/content/blog/*.md', { eager: true });

This means adding a new blog post is as simple as creating a new .md file — no database, no CMS, no API calls.

Static Generation

The key to making this work with GitHub Pages is @sveltejs/adapter-static. It pre-renders every page at build time into plain HTML files.

The configuration is straightforward:

adapter({
  pages: 'build',
  assets: 'build',
  fallback: '404.html'
})

Deployment

The site deploys via GitHub Actions. I can either push to main for automatic deployment, or manually trigger it from the Actions tab. The workflow:

  1. Checks out the code
  2. Installs dependencies
  3. Builds the static site with the correct base path
  4. Uploads to GitHub Pages

Design Philosophy

The design is inspired by Apple.com — clean typography, generous whitespace, and a focus on content. The dark/light theme toggle respects system preferences and persists the user’s choice.

Wrapping Up

If you want to build something similar, the entire source code is available on GitHub. Feel free to fork it and make it your own!