SvelteKitで個人サイトを作成

個人サイトをSvelteKitで構築しました。この記事では、その過程で学んだことを共有します。

経緯

まず個人サイトを作ってみようと思った経緯なのですが、
2026年になり、仕事以外で何か技術的なことやってみたいなとかは特にあるわけではなく、
とにかく何か作ってみたかっただけです:)

ZennやQiitaとかに何か投稿してみようとかも考えたりしたのですが
年始にXでZenn等へのコメント等々で荒れていたので新参者にはハードルが高かったので断念しました。

SvelteKitとは？

SvelteKitは、SvelteフレームワークのためのフルスタックWebアプリケーションフレームワークです。

主な特徴

1. ファイルベースルーティング - src/routes/ディレクトリにファイルを配置するだけでルーティングが自動生成されます
2. SSR・SSG対応 - サーバーサイドレンダリングと静的サイト生成の両方をサポート
3. 高速なビルド - Viteを使用した高速な開発体験
4. 型安全 - TypeScriptとの統合が優れている

このサイトの技術スタック

• フレームワーク: SvelteKit
• スタイリング: Tailwind CSS v4
• ブログ: mdsvex (Markdown)
• デプロイ: (お好みのプラットフォーム)

なぜSvelteKitを選んだか

• シンプルで学習コストが低い
• パフォーマンスが高い
• モダンな開発体験

Markdownブログの実装

mdsvexを使うことで、Markdownファイルから簡単にブログ記事を生成できます。

npm install -D mdsvex

設定も簡単です:

// svelte.config.js
import { mdsvex } from 'mdsvex';

export default {
  extensions: ['.svelte', '.md'],
  preprocess: [mdsvex()]
};

まとめ

SvelteKitは個人サイト構築に最適なフレームワークだと感じました。 ぜひ試してみてください！