/

[Svelte][Vercel] 本サイトの技術面の解説・選定理由

本サイトの構築にあたり、技術面の解説とそれぞれの選定理由を書いていきたいと思います。
特に私と近いキャリアのプログラマーや、フリーランサーの方々は個人のホームページをどう作っていくか？そもそも必要なのか？などなど…
よく悩むところだと思うので、参考になれば幸いです。

技術スタック

最終的には次のような構成を選択しました。

  • Urara テンプレート
    本サイトのデザインテンプレートです。
    概ね以下の技術で構成されており、このテンプレートをベースにカスタマイズを加えています。
    （元々ブログ専用だったけど魔改造してポートフォリオサイト＋ブログにした）
  • Vercel によるホスティング

この選定の背景について、以下に書いていきます。

コンセプト・要件

一番の目的は個人事業にも使えるポートフォリオサイトであり、個人制作の成果物も僅かながら仕事に関係することを考慮する必要がありました。
またブログとしても使いたかったのは、見栄えが統一できること（無論外部のブログプラットフォームにはできない）と、ブログ記事からホームへの流入を期待できるためです。
※SEO 的にもサイト内にブログを含めた方が良いかなーというのもあり

ただ、Qiita, Zenn などのブログプラットフォームのほうが類似する記事からの流入が期待できるメリットなどがあるので、ここらへんは一長一短かと思います。

また本業がプログラマーなので、WordPress や適当な CMS を使うのではなく、フロントエンドの技術を使って作りたい気持ちがありました。

SvelteKit / SvelteJS

はじめは GatsbyJS(Next SSG) がいいところかなーと思ったのですが、どうせなら新出の SvelteKit を使ってみようと思いました。
またちょうど最近 SvelteKit 1.0.0 がリリース されたので、これを機に使ってみようという発想です。
使用感としては、ステートフルな思想は変わらず純粋に React(Next) / Vue(Nuxt) の問題を解決した代替という印象で、React/Vue の知識はそのまま活かせますし、個人的には使えるところで積極的に使いたいと思ってます。

Svelte について気になる方は、ぜひチェックしてみてください。

デザイン

個人制作していたり、ゲーム・エンタメ系の仕事に関わってるのもあり「とりあえず作ってみました感」が出てしまうのだけは最低限避けたいと思いました。
またレスポンシブ対応はフロントエンドプログラマーの矜持としてマスト。

なのでめちゃめちゃ凝りたい気持ちはあったのですが、おそらく数年かけてもプロのセンスにはどうしても敵いません。（個人的には純然たる事実として受け入れています）
というわけでテンプレートを探して使うことにしました。
この発想は、業務系 Web でよくデザインフレームワーク(古くは BootStrap とか) を使っていたのですぐにピンときた感じです。

Urara テンプレート, Tailwind CSS

ブログの仕組みが入ってれば単純なページ（ポートフォリオなど）は簡単に実現できるので、とりあえずブログのデザインテンプレートから探すことにしました。 あとできればブログは Markdown -> HTML の変換で作りたかった（GatsbyJS でよくあるやつ）のでそこらへんも観点の一つです。

良さげなものが見つからなければどうしようもなかったのですが、SvelteKit, GatsbyJS あたりのテンプレートを探していたところ、幸い好みに近い Urara テンプレート にたどり着きました。

ざっくり以下のカスタマイズをしています。

  • ルーティングの変更。ブログは /blog 以下に移動。 / や他コンテンツは自由な Web ページへのルーティングに。
  • 基本のカラーバリエーションの変更
  • ほか、いろいろ・・（覚えてない）

ホームや他コンテンツのページは Tailwind / DaisyUI を使っています。初めて使いましたがいわゆるユーティリティクラスを使ってデザインするスタイルはかなり合理的でいいなーと思いました。

プログラマーがデザインもする場合や、ちゃんと融通の利くデザイナーと一緒に仕事をする場合は積極的に使っていきたい気持ちです。

Vite

Urara テンプレートが Vite を使っていたので自動的に使ってるだけですが、ブログの Markdown -> HTML 変換をかませていたりしてもホットリロードが即座に反映されるので、快適に作業できました。
ちなみに作業環境としては WSL2 Ubuntu + VSCode (Remote Development) です。 (Docker は使ってない)

Vercel

最初はどこでもよくて、S3 あたりにホスティングすればいいかなーと思っていたのですが、Urara テンプレートが Vercel をサポートしてた(Vercel が SvelteKit に対応してるというが背景にありそう)ので、試しに使ってみたらめちゃめちゃ良かったです。
あと無料枠が無いと思ってたんですが、ありました。（純粋にこれはありがたい・・）
Vercel の料金体系

登録から GitHub と連携、デプロイまで直感的にできました。(ほぼ Urara テンプレートが対応してたおかげですが)
また Vercel のサブドメインを払いだしてくれるので、独自ドメインを持ってなくてもとりあえず公開できます。 （知らなくて避けてた）

あと個人的には、CDN への浸透も早いなと感じました。

Web アプリのプロトタイピングなんかをする場合は今後も使ってみたい気持ちです。

問題点

ブログにコメント機能がつけられない

あくまで静的サイト（Static Site）なので当然ですが。

少し考えましたがここは潔く切り捨てました。
ブログの内容としては主に技術系（ある程度普遍的な内容）なので、会話の場として積極的に使うイメージがないのと、
コメントがつくことはほとんどない（と思っている）ので、Twitter(X)などで引用されるのをエゴサしてニッコリしたり、ソーシャルのリンクはホームにあるのでコンタクトが必要ならそっちから連絡してもらえればいいかな～という感じです。
※記事ごとのソーシャルリンクはそのうちつけたい

以上です。同様のお悩みを抱えてる方の参考になれば幸いです。
また度々トラブルシューティングが必要になったので、そちらに関しては別途記事を書く予定です。

更新履歴

  • 2023-09-19: 初稿
  • 2023-09-20: 細かな修正（誤字脱字・文章校正）

Copyright © 2024 Nagitch
Powered by Urara