Sveltekitを使ってblogを作り直した

blogを作ってから大して記事も書かなかったけど、ちょっと触っているsvelteを使ってなんか作ってみたいなと思いブログをリニューアルした。 調べるとsveltekitっていうframeworkがあったのでそれを使用したが、やっていてフロントエンドの知識のなさからか色々ハマる多くて時間がかかった。 そんな暇があるならブログの記事を書いた方がいいんじゃないかという話もあるけど、まぁなんとか形になったのでよしとします。

静的なファイルを置いておくだけのblogにしたくて、そのために@sveltejs/adapter-staticを使ったんだけど、 静的なサイトをビルドするためには、書いてはダメなパターンとか、しなくていけない設定とかがあって、そこでめちゃくちゃ時間を使ってしまった。 svelte kitはnpm run devでdevサーバーが立ち上がって、そこで作ってるサイトが確認できるのだけど、devサーバーではちゃんと動いてるけど実際にbuildするとこけるみたいなのが多かった。

試行錯誤しすぎて原因の切り分けがうまくできてないけど、ハマったところは

• ブログ記事の一覧を持ってきたい -> ファイルの一覧を持ってくるときはviteのimport.meta.globを使う
• prerenderするには、ページは全てtopから辿れる？必要があるから一覧ページから作る
• svelte.config.jsにprerender.entriesの設定が必要（ただし何が適切なのかはわかってない..

とかかなー

このgithubがとてもやりたいことに近くいて参考になった。

このブログは作る前にfigmaで自分でデザインしてそのあと実際にコードを書いたんだけど、やっぱ自分で簡単なものを作る場合でもfigmaとかでデザインした方が、 CSSとかを考えながらデザインするよりも切り替えがはっきりして良い。

まぁfigmaを使ったからといってデザインの実力が上がらなかったけどね