Silent Foreign Perspective

SvelteKit + MicroCMS + Vercelでブログをつくる

Tags:

Published at 2022-12-23 05:46:47

前々からどうでもいいことを書ける場所が欲しいと思っていたが、いまさら広告まみれのブログサービスを借りるのも嫌だった。
一応プログラマー的な業務でご飯を食べてる身なので自分で作ってみようと思い手を出した。
結局テンプレートまんまみたいな出来だが……

雑感

SvelteKit

普段の業務ではたまにNext.jsを利用しているくらいだが、どうせならと思いSvelteKitを利用することにした。
前々から噂は聞いており、ちょうどこれを書いている十日ほど前に1.0になったらしいので出来立てほやほやではある。
書いている印象としては雑に書けるVue.jsといった感じ。このくらいの規模だと特に比較することもないかも。
Vueだと$emitとかを読むのも書くのも苦労した記憶があるがSvelteでもそれはそんなに変わらないっぽい?

ルーティングはNext.jsと同じファイルシステムベースだが、ファイルの命名や1ページに+page.server.ts, +page.ts, +page.svelteと複数ファイル書くあたりがちょっと独特。
1ファイルにgetServerSidePropsgetStaticPropsが入ってくるNextとは対照的。

MicroCMS

なんとなく選択。GUIでAPIスキーマ組み立てるのはレゴブロック感あって楽しい。
ただし時刻がISO 8601 UTCで返ってきて変更できないとか、コンテンツIDがランダム文字列か手入力の2択とか、細かい部分でちょっと嫌だなと思うところはあり。
(後者については作成日時のunix timestampとかになってほしい)
気分の問題なので別に我慢すればいい話ではある。
リッチテキストエディタが入っていて、吐き出したHTMLをSvelte側でそのまま表示するだけなのは手軽。

Vercel

これもなんとなく。独自ドメインの設定が簡単で驚いた。
気付いたらプロジェクトが分裂して通知メールが2倍来たりしていたが多分自分が悪い。

課題

SvelteのHTMLレンダリング

公式にある通りサニタイズされず、また同じファイルにスタイルを書いても{@html ...}の中には効かせられない。大きい画像を張るとはみ出したりしてしまう。
今書いてて思ったがレンダリング直前に直接imgタグを置換してスタイル当てればそれで済む可能性はあるかもしれない。
→ 試したがSCSSが自動付与するクラス名が付けられず不可能だった。 h1とかは当たるのに何故……?
→themeのSCSSで指定するかファイル内のstyleに書くかの違いで、前者ではうまくいった。よしよし

MarkdownとSSGにすればS3やGitHub Pagesにポン置きでいいのでは?

MDsveXとかあるので。今はSSR + Prerenderingだがそんなに爆速という感じでもないのがちょっと不満。
記事検索とか入れだすと話が変わってくるのかな

デザイン

めんどい。
とりあえずSMUIとか@material/typographyとかを適当にいれている