公開日

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

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

お久しぶりの更新です。ブログをリニューアルしました。

お久しぶりです。

久しぶりのブログ更新です。

ブログのデザインをリニューアルしたいなーと思い立ち、リニューアルを推進するために自分自身にブログのデザインを刷新するまではブログを更新しないぞ、という制約をかけてました。

その過程で TTIL なんていう雑メモ置き場的なサブ・ブログを初めてしまい、本家のこちらの更新をサボっておりました。

が、一念発起してブログをリニューアルしました。

技術スタック

ブログの技術スタック…という程大きな技術スタックの変化はないのですが、今回のリニューアルで使った技術を紹介します。

（🆕 が付いているのが今回のリニューアルでの新たな取り組み）

tailwind-nextjs-starter-blogが好みのシンプルでスッキリとしたデザインに仕上がっていたので、それをベースに Jekyll に合わせて改変を加えでデザインを仕上げた。

最初はお手製のtoshimaru/jekyll-theme-classless-simpleを使ってデザイン組んでいたけど、今後のカスタマイズ性を考えて Tailwind CSS で組む方向に方針転換した。

HostingはGitHub Pagesと基本は変わっていないが、開発中のPrivateなホスティング（ログインしたら開発中のブログv2が閲覧できる）は Cloudflare Pages を使った。

他にも検討したこととして、ブログエンジンを Jekyll から卒業して Next.js、Hugo、Astro あたりに乗り換えることを検討したが、コアライブラリのアップデート追従でエターナる未来が見えたので、一番慣れている Ruby 製の Jekyll で落ち着いた（加齢とともに新たな技術的チャレンジが腰が重くなる今日この頃）。

変更点・工夫ポイント

  • Google Analytics タグを GA4 タグにアップデート
  • ダークモードに対応
    • JavaScirpt を使ってワンボタンで切り替えられるように
    • 最初は切り替えをさせずにブラウザのテーマをベースにスイッチするようにしようかと思ったけど、気分によってライトモード・ダークモードが切り替えられたほうが嬉しいので切り替え可能にした
  • ブログタイトルを変えた
    • ゼロ年代の慣習としてブログタイトルをオシャレなもにする、というものがあるがもはや今となってはそれは死んだ文化になっているので簡素なものにした
    • (before)Hack Your Design 👉 (after)toshimaru/blog
  • Jekyll を Ruby 3.3 でビルドするように変更
  • Tailwind CSS導入に伴い、リポジトリにpackage.jsonを導入
  • ソースコードは旧デザインと同じリポジトリを使って公開
    • toshimaru/blog.toshimaru.net
    • 積年のコミットログで重くなっていたので、これを機に過去のデザインは別リポジトリにアーカイブし、新デザインでゼロからコミットログを積むことにした

今後対応したいこと

下記あたりは今後のアップデートで対応したいと思っています。

  • 記事シェアボタン設置
    • X(ex-Twitter)
    • Hatebu
  • コメントフォーム設置 (giscus使いたい)
  • 検索ページが味気ないのでアップデートしたい
  • SVGロゴの刷新
    • favicon用のSVGを作成
    • ロゴのリニューアル
  • AboutページをGitHubのプロフィールを使いまわしているのでブログ用に作成したい
  • ダークモードスイッチャーをオシャレに
  • Google Adsense を再導入
  • OG画像をいい感じに生成するやつ
  • タグページを追加
  • フッターのアップデート
  • HTML/CSSの最適化

ブログ更新していくぞ

リニューアルもしたことだし、わりと長めの文章や技術記事とかはこちらを更新していこうと思います。💪

日々の学びを綴るサブブログもよろしくです 👉 TTIL

参考資料

関連記事