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

以前からNext.jsでブログを作成していましたが、デザインがあまり気に入らなかったのでいったん最初から作り直すことにしました。
以前のブログではReactのUIライブラリであるChakraUIを使用したのですが、凝ったデザインを作ってみたいなとなったときに、いろいろやり辛い部分があったので作り直しました。
(なかなかさくっと作れたので良いUIライブラリではあると思うのですが。。。）

使用技術

SSG

今回はNext.jsではなく、静的サイトジェネレーターであるGatsbyを使用しています。
選定理由については以下のQiita記事が代弁してくれている感があったのでそのまま引用します。
自分の中ではgatsby-imageと同等の機能を自前で実装出来るかと思うと自信がないのと、GatsbyのPluguinの仕組みを使用して効率よく開発が出来るというところが大きかったです。
Gatsby.jsとNext.jsはどちらが優秀か比較してみた

Deploy

デプロイはNetlifyを使用しています。Gatsby×Netlifyの構成はネット上に知見が比較敵多く見られますし、Gatsbyという面でみるとIncremental Build(Beta)などの機能が提供されているので将来的にも期待大ということで採用してみました(使用可能なCMSはまだ限られているようですが。。。)
Netlify

CMS

コンテンツ管理には以前のブログと同様にmicroCMSを使用しています。UIの使いやすさという意味でとても満足しているので続けて採用しました。カスタムフィールドなど機能もどんどん追加されていてとても期待しています。
microCMS

Style

CSSは CSSinJSを採用しています。今回はEmotionを使ってみました。なるべくCSSinJSに依存しないような書き方になるように気をつけて管理しています。また別に記事にできればと思います。
Emotion

TypeScript

TypeScriptを使って実装しています。
詳しくは以下の記事をご覧ください！
Gatsbyで型安全なブログ開発

このように、以前と同様にJamstackで構成されています。
Jamstackとは何を指すのか今一度考えてみる

こだわりポイント

可愛さ

可愛いにこだわってサイトを作っています。まだまだイラストは練習中ですが、サイトを訪問して下さった方が癒されるようなサイトを目指しています。
技術ブログという面では可愛さは不要なきもしますが。。。趣味なので目をつぶってください（笑)
クールなサイトも作れるようになりたいです。

コンテンツ管理

コンテンツの管理をなるべくmicroCMS側で管理するようにしています。Jamstack構成ではなるべくAPI通信を減らすのが原則ではありますが、コンテンツの管理のしやすさを優先して実装しています。
例えば、
ABOUTページの技術スタック一覧や

WORKのサイト一覧など、

正直、microCMS側で管理する必要ある？という部分もAPI管理しています。
これは私の業界がとてもIT化がとても遅れており(コードを更新出来る人なんて一人もいない)、また職場の移動も多いため、コンテンツ管理をしやすい環境を優先してサイトを運営しています。

今後

今後も以前のサイト同様にサイト制作をしながら、いろいろな技術を試し打ちする場にもしたいと思っています。
最近はCSS,SVGアニメーションに興味があるので楽しいコンテンツが作れるようにがんばって更新します。