MENU

ブログサイトを制作 (Svelte / SvelteKit)

私はこれまでの個人開発の実績や趣味の活動をブログ形式で発信するためのサイトを制作しました。このサイトの目的は、技術的な学びやプロジェクトの進捗を記録し、同じ関心を持つ人々と共有することです。

デザインの工夫とオリジナリティの追求

デザインについては、基本的なレイアウトを友人に依頼し、その後、自分なりのアレンジを加えてオリジナリティを出しました。特にこだわったのは以下の点です。

  • フォントとアイコンの選定: 読みやすさとデザイン性を両立させるために、視認性の高いフォントと適切なアイコンを選びました。
  • サイトロゴの編集: オリジナルのベクター画像を作成し、ブランドのアイデンティティを確立しました。
  • インタラクティブ性のあるUI: タイピングアニメーションや、マウス操作に応じた動的なダークモードを実装することで、ユーザーが直感的に楽しめる体験を提供しました。

コンテンツ管理にNewtを採用

ブログのコンテンツ管理には、ヘッドレスCMSの Newt を採用しました。Newtはシンプルで直感的な管理画面を持ち、開発者向けの柔軟なAPIを提供しているため、Svelteとの統合もスムーズに行えました。具体的には、以下のような機能を活用しました。

  • 記事の投稿・編集機能: 管理画面上で簡単に記事を作成し、自動的にサイトに反映できるようにしました。
  • カテゴリ・タグ機能: 記事を整理しやすくするために、カテゴリやタグを設定し、ユーザーが興味のある内容をすぐに見つけられるようにしました。
  • API経由でのデータ取得: SvelteのフロントエンドとNewtのAPIを連携し、動的に記事を取得して表示する仕組みを構築しました。

Svelteを採用した理由

フレームワークには Svelte を採用しました。Svelteを選んだ理由としては、以下の点が挙げられます。

  • 軽量で高速: 仮想DOMを使用せず、コンパイル時に最適化されるため、ページの読み込み速度が速くなります。
  • シンプルなコード構造: コンポーネントの記述が簡潔で、開発の負担を減らせます。
  • リアクティブなデータバインディング: 記事の表示やフィルタリングをスムーズに行うことができ、ユーザーエクスペリエンスを向上させられます。

Cloudflareを活用した高速ホスティング

ホスティングには Cloudflare を採用しました。Cloudflareを利用することで、以下のメリットを得ることができました。

  • CDNによる高速配信: 世界中のエッジサーバーを活用し、どこからアクセスしてもページの読み込み速度を向上。
  • DDoS対策とセキュリティ強化: 悪意のあるトラフィックを自動でブロックし、サイトの安全性を確保。
  • コスト管理の最適化: 無料プランでも高品質なパフォーマンスを提供し、運用コストを抑えることが可能。

サイト運営を通じて得た学び

このブログサイトの開発を通じて、多くの学びがありました。

  • ヘッドレスCMSの柔軟性: NewtのAPIを活用することで、フロントエンドと分離されたコンテンツ管理の利便性を実感しました。
  • Svelteの使いやすさ: 開発効率が高く、軽量なフレームワークとしての強みを活かした実装ができました。
  • パフォーマンスチューニングの重要性: Cloudflareを活用し、最適なキャッシュ戦略を組むことで、ユーザー体験を向上させることができました。

まとめ

今回制作したブログサイトは、個人開発の記録や技術的な学びを発信する場として設計しました。デザインの工夫、Newtを活用したコンテンツ管理、Svelteによる軽量で高速なフロントエンド構築、そしてCloudflareを用いたホスティングによって、パフォーマンスと運用のしやすさを両立しました。

今後も記事を追加しながら、より多くの人に役立つ情報を発信していきたいと考えています。

JSフレームワーク：Svelte/Sveltekit (TypeScript)
API：Newt (CMS)
インフラ：Cloudflare Pages
リンク：https://mtkwtnb.jp/