ブログを Gatsby で作り直した
ここ最近、個人サイトがアツい。
このブログは 2010 年に開設したときは WordPress、2014 〜 2018 年は Middleman、2018 年からははてなブログを使っていた。
はてなブログに大きな不満はなかったが、プラットフォームに依存せず手元にデータを持っておきたい、という気持ちがあった。Middleman とはてなブログの記事が分かれていたので統一したかったというのもある。
今回はフロントエンドの技術をキャッチアップしたいのと、情報が多い Gatsby を使ってブログを作り直すことにした。
構成
ざっくり技術というか構成について。
プロジェクトのテンプレート
プロジェクトのテンプレートには gatsby-starter-default というシンプルなものを使っている。ブログの構築に最適そうな gatsby-starter-blog というテンプレートもあるが、ある程度は自分で作りたかったので使っていない。
TypeScript
Gatsby には gatsby-plugin-typescript パッケージが含まれているため、最初から TypeScript に対応している。
一部で TypeScript を使っているが、型の指定を any で妥協していたり、JavaScript のままだったりするので、徐々に移行していきたい。
CSS
スタイリングにはデフォルトの CSS Modules を使っている。styled-components も検討したが、CSS を多用するデザインではないので後回しにした。
CSS リセットには modern-css-reset を使っている。
Netlify
ホスティングには Netlify を使っている。GitHub に push したらビルドが動いて、自動でデプロイされる。実際に使ってみるとやはり便利。
今のところ Starter プランでまかなえているが、転送量が 100GB を超えたり、ビルド時間が 300 分を超えると Pro プランに切り替える必要がある。このブログ程度ならまだまだ大丈夫だと思う。
DNS も Netlify に移行した。Netlify の DNS を使うことによって HTTPS や IPv6 も自動で対応してくれる。
デザイン
大したデザインではないが、Figma でデザインを作成した。
画像
画像が少ないので、いまのところは Git リポジトリに含めている。 gatsby-image が画像を最適化してくれるので、できるだけ運用を複雑にしたくない気持ち。
記事の移行
記事数はそんなに多くないので、手で書き換えた。
Middleman の記事は Markdown のタグや画像のパスを変更したり、はてなブログの記事は Markdown ファイルを作成して画像をダウンロードする必要があった。
はてなブログの機能 (リンクをペーストしたらカードを生成する機能や、脚注などの記法) は便利だったが、移行するときは大変だった。
記事のパスは Middleman と同じ /blog/yyyy/mm/dd/slug にしている。将来 Gatsby 以外の仕組みに移行するときも対応しやすいと思う。
旧ブログからのリダイレクト
ドメインを chocoby.jp (Middleman), blog.chocoby.com (はてなブログ) から chocoby.com に変更した。
リダイレクトは Netlify の機能を使っている。
以下のように netlify.toml を作成することでパスごとリダイレクトできる。
[[redirects]]
from = "/*"
to = "https://chocoby.com/:splat"
status = 301Middleman の記事はパスごとリダイレクトできたが、はてなブログは難しかったのでトップページにリダイレクトしている。
コメントについて
以前は Disqus でコメントできるようにしていたが、コメントが付いたことがほとんどなかったので、今は設置していない。 何かあれば Twitter やメールアドレスに送ってもらうのが良いのかなと考えている。
まとめ
表示が非常に速くなり満足。課題はライブラリの更新についていけるかだと思う。
いろいろと手を入れたいところがあるので、盆栽を育てるようにやっていきたい。