SvelteKit + Cloudflare Pages でポートフォリオサイトの構築した際の備忘録

- first commit

以下の情報は2024年10月現在のものです

要するにこのサイトの構築について。 リポジトリはこちら。

きちんとした技術記事というよりかは、制作時に考えていたことのメモと要素技術の簡単な紹介のみに留めた記事。

Svelte と SvelteKit について

Svelte は主にフロントエンドを書くためのコンパイラとその記法、その公式フレームワークが SvelteKit、という感じらしい。

公式サイトにインタラクティブなチュートリアルがあり、更に実行環境すらある。 至れり尽くせりだね。

素に近い HTML, CSS, JavaScript (TypeScript) が書け、フレームワークそのものの学習に比較的手間取らないというウワサを聞いたので試してみた。 だいたい合っていると思う。

Cloudflare Pages へのデプロイ

Svelte と Cloudflare は相思相愛なので、それぞれのドキュメントにデプロイ手順の解説ページがある。 GitHub リポジトリにコードをプッシュしたら、勝手に処理が走ってビルドしてくれる CI/CD 環境を（GitHub Actions すら書くことなく）かなり簡単にセットアップできる。

上記のドキュメントに書いていないこととしては、Cloudflare Pages のデフォルト設定の Node.js のバージョンが古いせいで、ビルドが失敗することがある。 環境変数 NODE_VERSION によって、お使いの SvelteKit に対応したバージョンが走るよう指定できる。 これはそのうち問題ではなくなる気がする。

ブログの実装

バックエンドはほとんど何もしていないに等しいのだが、かなりシンプルなブログを付けている（こういう記事を書くために）。 タグ機能や前後の記事に飛ぶボタンすらないが、これらは気が向いたら実装したい。

このブログは特定ディレクトリに放り込んだ Markdown ファイルを読み込んでレンダリングすることで生成しており、各ファイルには以下のような YAML ヘッダを付けている：

title: "example"
description: "this is an example of a YAML blog header."
date: "2000-01-01"
draft: "true"

draft キーが "true" の場合は下書き扱いでレンダリングしないようにしているのだが、これは Hugo のブログテンプレートを弄ったときにこのパラメータがあって、良いと思ったから真似した。 date キーは記事を日時が新しい順にソートするのに使用している。

サイトデザイン

Figma などでのプロトタイピングはせず、出たとこ勝負で作っていった。 CSS は多少書けるからなんとかなるだろうと思いながら。

過度な装飾はラクをしたいからせず、なるべくシンプルで軽いサイトにしたかったので、俺なりの Brutalist Website をやる気持ちで作っていた。 上手くいったかどうかは良く分からない。

アクセシビリティ

興味があるがキャッチアップが追い付いていないところで、多少配慮したつもり。

Lighthouse と axe DevTools の診断を思い出したタイミングで実施して、何か指摘されないか、は確認した。 ただ、これらは「これさえ通れば問題なし」という類のテストではなく、「これすら通らないのはヤバい」部類のものと認識している。

カラーコントラストは Adobe のカラーコントラストチェッカーアナライザーツール を使って確認した。 このサイトを作るときには使わなかったが、カラーホイールのほうにも度々お世話になっている。

参考資料

SvelteKit を使うにあたり、公式ドキュメントとMDN以外で特にお世話になったのは以下：