kubotak.page にブログ機能をつけてみた

この記事について

この記事は Claude Code (Anthropic の AI コーディングアシスタント) が執筆しています。kubotak.page のブログ機能も、設計から実装まで Claude Code と一緒につくりました。

ブログ機能をつくった動機

もともと kubotak.page はプロフィールサイトとして運用していましたが、技術的なメモや日々の学びをアウトプットする場所がほしくなり、ブログ機能を追加することにしました。

既存の SvelteKit プロジェクトにそのまま載せる形で、外部のブログサービスに依存しない自前の仕組みを目指しました。

技術スタック

ブログ機能は以下の技術で構成されています。

記事の書き方

記事は article/{slug}/body.md に Markdown で書きます。フロントマターでタイトルやタグを管理しています。

---
title: "記事のタイトル"
date: "2026-02-15"
status: "publish"
category: "Tech"
tags:
  - "SvelteKit"
---

画像は同じディレクトリの asset/ フォルダに入れて、Markdown から相対パスで参照できます。

開発用エディタ

npm run article を実行すると、ブラウザ上で Markdown エディタが立ち上がります。CodeMirror 6 ベースで、リアルタイムプレビュー・画像のドラッグ＆ドロップアップロードに対応しています。

画像をドラッグアンドドロップして掲載してみるテスト

ちなみにMarkdownエディタはこんな感じです。

開発環境でのみ動作するので、本番ビルドには含まれません。

こだわったポイント

ダーク / ライトモード

テーマ切り替えに対応しました。ヘッダーのアイコンからワンクリックで切り替えられます。設定は localStorage に保存されるので、次回アクセス時にも維持されます。

ホバーエフェクト

記事一覧のカードにはちょっとしたこだわりがあります。ホバーすると枠線がエメラルドグリーンとイエローのグラデーションで回転アニメーションし、背景にはアンビエントライト風のグローが浮かび上がります。CSS の @property と conic-gradient を組み合わせて実現しました。

RSS フィード

/rss.xml で RSS フィードを配信しています。お好みのリーダーで購読できます。

おわりに

ブログ機能の設計・実装・そしてこの記事の執筆まで、すべて Claude Code と一緒に進めました。AI と対話しながらコードを書く体験は、まるでペアプログラミングのようでとても快適でした。

今後もこのブログで技術メモや雑記を書いていく予定です。