Svelte/Sapperで自作ブログをやってみる

2021-03-27

はじめに

これまではてなブログを使用していたのですが、以前から身の回りの方が自作ブログを作り始めており、自分も自作ブログに興味をもっておりました。

最初はLaravelを利用するか、自作のPHPフレームワークを開発して、それを利用してブログを作ろうと考えていたのですが、ありきたりだなと思いはじめ、なるべく他の方が使っていないような技術を使おうと思い始めました。

2021年2月の上旬にUIT INSIDEというPodcastを聞いていた際に、SvelteというJSフレームワークの存在を知り、まだまだ日本での普及率が少ないということを聞いたので、使ってみるのもいいかなと思い、今回の自作ブログに使わせていただきました。

構成

このサイトは、既に公式が公開しているSapperのテンプレートである、sveltejs/sapper-templateを元にしています。

ブログ部分は基本的には/src/routes/blog/_post.jsを書き換えて、別に作った/articlesというディレクトリからブログ記事であるMarkdownファイルを呼ぶように書いています。

最初はこちらの記事をもとに書き換えなどを行いました。

しかし、下記のような、Markdownファイルに書いたdateなどがうまく/src/routes/index.svelteなどで呼べないと言う問題に当たってしまったので、こちらの記事を元にslugの呼び方を変えたりdateが呼べるようにしました。

---
title: "Svelte/Sapperで自作ブログをやってみる"
date: "2021-03-27"
---

ホスティングにはvercelを利用しています。vercel自体も今回が初めての利用になったのですが、そもそもSvelteの公式ドキュメントに書いてあるデプロイ方法がvercelであることや、vercel/og-imageのようなOSSがあることを知っていたので、将来的に利用することを考え、このサイトのホスティングはvercelにしてみました。

Netlify CMSなどを使った運用も考えてみたのですが、また別の機会になにかしらのプロダクトで利用してみようと思います。

これからやりたいこと

まだまだこちらのサイトは完成とは言えないものなので、以下のようにもう少しやりたいことがあります。

  • ブログ記事のカテゴリ分け機能と月別記事機能
  • tailwindcssの導入
  • デザインの調整
  • vercel/og-imageを利用したブログ記事のOGP画像生成
  • SapperからSvelteKitへの移行
  • RSS
Share