はじめに
「自分だけのブログが欲しい！」
そう思い立って、折角Cloudflareでドメインを契約したのもありCloudflare Workers + Next.jsでブログを構築してみたけど、管理者ダッシュボードをサイト上に構築したら、ファイルサイズ制限が無料枠に収まらなくて、なくなく断念(ﾉД`)
そもそもこの程度のブログサイト構築には、Nextの勝手によしなに具合がベリースーパーオーバースペックだったので、ビルドサイズが小さくなるSvelteKit を使ってこのブログを作りました。(ほぼ静的サイトなので、Pagesにデプロイしています)
この記事では、ブログ構築の過程で使った技術スタックや、実装したこだわりの機能について紹介します。
技術スタック
このブログは以下の技術で構成されています：
| カテゴリ | 技術 |
|---|---|
| フレームワーク | SvelteKit |
| ホスティング | Cloudflare Workers (Pages) |
| スタイリング | TailwindCSS v4 |
| アニメーション | Three.js, GSAP + ScrollTrigger |
| UIコンポーネント | shadcn-svelte |
| マークダウン処理 | mdsvex, remark,rehype |
| 画像ストレージ | Cloudflare R2 |
| パッケージマネージャー | Bun |
デザインのこだわり
パステルブルーの世界観
「かわいい」けど「読みやすい」を両立したい
メインカラーには #7DD3FC (パステルブルー) を採用。背景には格子状のラインとThree.jsを使って、オブジェクトの色は薄いながらも動きを持たせて、ふわっとした印象に仕上げました。
/* メインカラーの定義の例 */
--color-main-blue: #7dd3fc;
--color-accent-pink: #f9a8d4;
--color-accent-yellow: #fde68a;ヘッダーアニメーション
スクロールに応じてヘッダーが見え隠れするアニメーションを GSAP で実装しました。
onMount(() => {
gsap.registerPlugin(ScrollTrigger);
const header = document.getElementById("main-header");
let lastScroll = 0;
ScrollTrigger.create({
start: "top top",
end: 99999,
onUpdate: (self) => {
const currentScroll = self.scroll();
if (currentScroll > lastScroll && currentScroll > 50) {
header?.classList.add("hide");
} else {
header?.classList.remove("hide");
}
lastScroll = currentScroll;
},
});
});Zenn風マークダウン記法
このブログでは、Zennをパクってマークダウン記法を実装しました。
メッセージボックス
:::message
これは情報メッセージです。重要なお知らせに使えます。
:::↓実際の表示
これは情報メッセージです。重要なお知らせに使えます。
:::message alert
これは警告メッセージです。注意が必要な内容に使います。
:::↓実際の表示
これは警告メッセージです。注意が必要な内容に使います。
折りたたみセクション
:::details クリックして展開
隠れたコンテンツがここに表示されます。
長いコードブロックや補足情報を隠すのに便利です。
:::↓実際の表示
クリックして展開
隠れたコンテンツがここに表示されます。 長いコードブロックや補足情報を隠すのに便利です。
数式サポート
$$
E = mc^2
$$↓実際の表示
インライン数式も のように書けます。
開発者ダッシュボード
執筆体験を向上させるため、開発環境専用のダッシュボードを実装しました。
記事管理機能
- 公開記事・下書きの一覧表示
- 各記事へのクイックアクセス
- 公開状態のフィルタリング
メディア管理機能
画像アップロード機能では以下をサポートします。
- ドラッグ&ドロップでアップロード
- CanvasAPIを用いてクライアントサイドWebP変換でファイルサイズ削減
- Cloudflare R2 への自動保存
- ワンクリックでMarkdown形式をコピー
// WebP変換の実装例
canvas.toBlob((blob) => resolve(blob), "image/webp", quality / 100);記事の公開フロー
記事の公開は frontmatter の published フラグで制御しています：
---
title: "記事タイトル"
published: false # true にすると公開
---開発環境では下書き記事もプレビューでき、本番環境では自動的に非表示になります。
テンプレート生成スクリプト
新しい記事は以下のコマンドで作成できます：
bun run new-article --slug my-article-slugこれにより、デフォルトの frontmatter が含まれたテンプレートファイルが生成されます。
まとめ
初めてSvelteKitを使ってサイトを作成してみましたが、最初にNextで作ったブログより遥かに小さいビルドサイズで、より快適な執筆環境が作れました。
デザインもAIと壁打ちして作ってもらったのですが、結構気に入っています！
これからもこのブログを育てていきたいと思います。読んでくれてありがとうございました！