Svelte + Vercel でブログサイトを構築してみた

環境構築が簡単

本当に簡単です。

npx sv create を実行するだけです。

実行したあとは、自分が必要としているライブラリをチェックして同時にインストールするだけです。

チェックをしてインストールすれば、必要な設定がされている状態で環境構築が完了します。

ここまで簡単に環境構築が出来るのは本当にありがたいです。

Svelte + Vercel のデプロイが簡単

こちらも、ビックリするぐらい簡単です。

環境構築後、とりあえず GitHub リポジトリを作成して、 first commit します。

その後、 Vercel にアクセス、GitHubアカウントでアカウント登録を進めていきます。

上記の流れについては、以下のQiita記事が大変参考になりましたので、これ見れば楽勝です。

Svelte + Vercel 爆速でサイトを公開する - Qiita

Ateam Brides Inc. Advent Calendar 2020の5日目は株式会社エイチームブライズ サイト開発部 20卒エンジニアの@takaHALが担当します！はじめにVerc…

qiita.com

一度環境が出来てしまえば、あとは main ブランチにプッシュするたびに自動的にデプロイが走ってくれます。

しかも Vercel がすごいのは、デプロイの簡単さだけでなく、機能面でも充実しています。

• アクセスログの確認が可能
• Speed Insights でSEO的に優れているかの確認が可能
• 監視も可能
• その他も…

Svelte 自体の学習コストがさほど高くない。

Svelte ファイルは以下のような構成となっています。

<script>
  // js(ts) 処理を記載
</script>

<!-- HTML を記載 -->

<style>
  /* CSS を記載 */
</style>

Vue.js の単一ファイルコンポーネント（SFC）に近い構成だなーというのが感想です。

一つのファイルで基本的に完結するため、まとまりもあって管理しやすいです。

また、固有の記法という部分も React や Vue に比べると少ないため、生のHTML, CSS, JS が分かっていればスムーズに学習を進めることが可能だと思います。

とにかくお金がかからない。

本当にお金がかかりません。

固有ドメインを使用したいため、お名前.com でドメインを取得した 1000円程度です。

Vercel は hobby プランという商用利用禁止の最低スペックプラン（hobbyプラン）であれば無料で利用できます。

また、フロントエンドのみのアプリケーションということもあり、DB等も持つ必要はないため、イニシャルコストもランニングコストも基本的に掛かりません。

お金が掛かるだけで開発/運用することに躊躇いが生まれますが、基本0円なので気軽に始めることが出来るのは大きなメリットでした。

Vercel デプロイが可能な Node バージョンについて

執筆時点でのNode の最新バージョンは、 v23.3.0 です。

とりあえず最新が良いだろうという気持ちで進めていましたが、ビルド時にエラーが発生しました。

error during build:
Error: Unsupported Node.js version: v23.3.0. Please use Node 18 or Node 20 to build your project, or explicitly specify a runtime in your adapter configuration.
    at get_default_runtime (file:///vercel/path0/node_modules/@sveltejs/adapter-vercel/index.js:15:8)
    at Object.adapt (file:///vercel/path0/node_modules/@sveltejs/adapter-vercel/index.js:155:67)
    at Object.adapt (file:///vercel/path0/node_modules/@sveltejs/adapter-auto/index.js:106:19)
    at adapt (file:///vercel/path0/node_modules/@sveltejs/adapter-auto/index.js:117:31)
    at async adapt (file:///vercel/path0/node_modules/@sveltejs/kit/src/core/adapt/index.js:38:2)
    at async finalise (file:///vercel/path0/node_modules/@sveltejs/kit/src/exports/vite/index.js:954:7)
    at async Object.handler (file:///vercel/path0/node_modules/@sveltejs/kit/src/exports/vite/index.js:984:5)
    at async PluginDriver.hookParallel (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:20796:17)
    at async Object.close (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:21774:13)
    at async build (file:///vercel/path0/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:65466:17)
Error: Command "npm run build" exited with 1

開発時点でサポートされているNode.js は、 v18 or v20 でした。

そのため、 svelte.config.js の config.kit.adapter を以下のように修正しました。

import adapter from "@sveltejs/adapter-vercel";

...

  kit: {
    adapter: adapter({
      runtime: "nodejs20.x",
    }),
  }

これで、node v20 でビルドが走るようになり、解決です。

Vercel 環境下で Markdown ファイルのリアルタイム読み込み。

プロジェクトルート直下の /articles で管理している .md ファイルを、実行時に fs ライブラリを使用してファイル読み込みし、そこから MDsveX を通して HTML に変換し、描画するという方法を取っていました。

// 一例
import fs from "fs";
import path from "path";

const ARTICLE_DIR = path.resolve("articles");
const articleFiles = fs.readdirSync(ARTICLE_DIR);

このやり方で、ローカル環境では問題なく機能していました。

しかし、これらを Vercel にデプロイしてみると、Markdownで作成した記事が1件も取得することが出来ませんでした。

Vercel > Source を確認してみると、ビルド後のファイルに Markdown のファイルが含まれないことが判明し、それが原因であると突き止めました。

Vercel デプロイ時に npm run build を実行するのですが、プロジェクトルート直下の articles ディレクトリは対象にならないようです。

何か工夫をすればビルド対象にできたのかもしれないのですが、シュッと解決することが難しかったので、代案を考えました。

それは、 /articles の Markdownファイルを JSONファイルに変換し、ビルド対象である src 配下に出力する という方法です。

色々すっ飛ばしているような気がするので、この解決法に至った理由を記載します。

• 記事情報はアプリを構成する src 情報として（何となく）扱いたくなかった。
• 読み込み時に都度Markdownファイルを読み込んで整形して…という一連の処理が煩わしかった。

{
  ...,
  "scripts": {
    ...,
    "build": "npm run build:article && vite build",
    ...,
    "build:article": "node scripts/build-articles.js",
  }
}

import allArticles from "$build/articles.json";

// svelte.config.js

const config = {
  kit: {
    alias: {
      $build: "./src/.build",
    },
  },
};

Tailwind CSS を使用した style の実装について

一瞬だけ躓いた、というものです。

svelte ファイルで style を当てることが可能なのですが、そのときに生CSSではなく、Tailwind CSS を使用して当てたいと考えました。

理由は、Tailwind CSSのクラスを使用した統一的なスタイルで管理したかったためです。

要所要所で生CSS を使った微妙なスタイルの当て方（ 例: padding: 7px ）をしてしまうと、変なズレが生じてしまったり、管理が面倒になりそうという感想を持ちました。

そのため、以下のようにstyle を当てました。

<style>
  .passive-page-link {
    @apply cursor-not-allowed rounded bg-gray-100 px-4 py-2 text-gray-400;
  }
</style>

この @apply は、Tailwind CSS のクラスを使ってstyleを当てる方法です。

しかし、これだと反映されませんでした。

HTML上で指定したクラス名だと適用されているため、Tailwind CSS の設定がおかしいということでは無さそうです。

その原因ですが、 Style が postcss になっていなかった ことです。

style lang を設定してないため、生CSSとして認識されていました。

正しくは以下です。

<style lang="postcss">
  .passive-page-link {
    @apply cursor-not-allowed rounded bg-gray-100 px-4 py-2 text-gray-400;
  }
</style>

地味にハマったので、紹介です。