2020/11/01

Gatsbyでブログをリニューアルした

放置気味だった個人ブログをGatsbyとNetlifyCMSでリニューアルしました。

リニューアルした理由

前の個人ブログはVuePressで作っており、割と気に入っていたのですが、ローカルでMarkdownを書いて画像をフォルダにリサイズし配置して…という作業が結構負荷だったので、あまり更新出来ていませんでした。

また、技術記事はQiitaやZennのようなプラットフォームに書いたほうが、書き手も、読者も便利なんじゃないかなと思っています。

そこで、記事を書く負荷を下げるために、NetlifyCMSを導入しました。 記事のプレビューが出来るだけでなく、画像の管理がより簡単だったりします。

Netlify CMS

Gatsbyを選んだ理由

VuePressも良かったのですが、テーマを別パッケージで当てていたため、カスタマイズがしづらいという欠点がありました。また、Vueコンポーネントが使えるというメリットもありましたが、特に使うこともなかったので、有名所のGatsbyをという使ってみました。

また、Gatsbyにはgatsby-imageという強力な画像最適化プラグインがあるので、これも選択理由のひとつです。このプラグインはのサイズやローディング時の小さな画像を生成してくれたりと、すごい高機能です!

Gatsbyはプラグインがたくさん公開されているので、それらを導入することで簡単に機能追加することが出来ます。

デザイン

とりあえず、シンプルに作ってみました。

Gatsbyのテンプレートがコーヒーショップのデモサイトだったので、思いつきでカフェっぽい雰囲気のデザインにしてみました。

あとは、読みやすいように明朝体のフォントをにしてみましたが、まだ違和感を感じます… MediumやNewYorkTimesのような英語圏の文章を中心に扱っているサイトは、セリフフォントがよく使われていますが、日本語の場合、Noteや新聞社はほとんどゴシック体ですね。

デザインはこれから少しづつ変更を加えてみます。

最後に

内容は技術記事というよりも、個人的なことやネットに関することなどを週1くらいで書いていきたいなと思っています。

とりあえず、ブログで書きたいことをいくつかストックしてあるので、しばらくはネタには困らなそうです。