SvelteKit 으로 블로그를 개설해 보았다

Table of Contents

• 소개
• Features
  • 🔥 Open Props 도입
  • 🔥 Dark/Light mode
  • 🔥 Code block syntax highlighting
  • 🔥 Markdown rendering
  • 🔥 Reading time UX 추가
  • 🔥 Page transition effect
  • 🔥 RSS xml 을 반환하는 API route 추가

소개

SvelteKit 2 + Svelte 5(preview) 조합으로 뭔 만들어볼까 생각하다가.. 마침 블로그를 시작해야겠다 싶은 생각이 들어서 이 조합으로 블로그를 만들어 보기로 결정했다.

블로그 만드는 법은 다음 영상을 참고했다.

Features

🔥 Open Props 도입

요번에는 늘상 쓰던 TailwindCSS 대신에 Open Props라는 것을 써보았다. TailwindCSS가 주는 verbose하고 inline-style 같은 느낌을 덜 받으면서 design token 기반으로 CSS를 관리할 수 있는 방식이다.

🔥 Dark/Light mode

일단 어느 블로그에나 있는 theme toggle 기능은 기본적으로 탑재했다. 개인적으로는 어떤 소프트웨어든 dark theme을 default로 놓고 사용하고 있어서 light theme을 쓰진 않지만.. 그냥 넣어뒀다.

🔥 Code block syntax highlighting

아래처럼 code block에 대해 syntax highlighting이 잘 되도록 설정해주었다. syntax highlighting을 해주기 위해서 shiki 라는 라이브러리를 활용했고, light theme에서는 github-light 을, dark theme에서는 github-dark 를 사용했다. code관련 font는 JetBrains Mono font를 사용했다.

function greet(name: string) {
	console.log('Hello, Sveltekit!')
}

🔥 Markdown rendering

기본 markdown 문법에 더해, Svelte component를 .md 파일 안에서 렌더링 할 수 있도록 해줬다.

즉, 아래처럼 Svelte component를 .md 파일 내에서 직접 import 할 수 있다.

// markdown file

<script>
  import Counter from './counter.svelte'
</script>

<Counter />

그러면 아래와 같이 svelte component가 동작하는 것을 볼 수 있다.

🔥 Reading time UX 추가

mdsvex plugin을 통해 post를 읽는데 걸릴 예상 소요시간을 표시해주는 UX를 추가해주었다.

🔥 Page transition effect

svelte에 내장된 transition 관련 도구로 url이 변경될 때 마다 GNB, footer를 제외한 영역에 transition 효과가 적용되도록 했다.

🔥 RSS xml 을 반환하는 API route 추가

뭐.. 내 블로그를 RSS 리더에 넣고 챙겨볼 사람은 없겠지만 심심해서 넣어봄.

---

일단 기본적인것만 갖추어 두고, 추후 점진적으로 개선해 나갈 예정!