SvelteKit으로 Static Site 빌드하기

SvelteKit으로 웹페이지를 만들면서 SSR(server-side rendering) 같은 서버 기능이 필요 없다면, SvelteKit은 SSG(static site generation, 정적 사이트 생성)를 지원하기에 이걸 한번 활용해 보는 것도 좋아 보인다.

 

SSG 설정

정적 사이트를 만들기 위해선 이에 맞는 adaptor를 사용해야 한다. Bun은 bun add -d @sveltejs/adapter-static, npm은 npm i -D @sveltejs/adapter-static 명령어를 통해 SSG에 필요한 adaptor를 설치한다.

 

이후 프로젝트의 svelte.config.js 파일 내용을 다음과 같이 바꿔준다.

import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter({
            pages: 'build',
            assets: 'build',
            fallback: undefined,
            precompress: false,
            strict: true
        })
    }
};

export default config;

마지막으로 src/routes/+layout.js 또는 src/routes/+layout.ts 파일(없으면 새로 만들자. ※ src/routes/+layout.svelte 파일 아님)에 다음 내용을 추가하면 끝이다.

export const prerender = true;

 

빌드 및 사용법

Bun은 bun run build, npm은 npm run build 명령어를 통해 프로젝트를 빌드한다. 결과물은 프로젝트 내 build 디렉터리에 생성되며 build/ 안의 index.html을 포함해 필요한 파일과 디렉터리를 이용해 사이트를 돌릴 수 있다.

 

결과물을 로컬에서 간단히 돌려보려면 cd build 명령어로 작업 디렉터리를 바꾸고 로컬 서버를 실행하면 된다. 파이썬이 있다면 python3 -m http.server(혹은 python -m http.server) 명령어로 로컬 서버를 실행할 수 있다.