本ブログ 山猫のま は今月で2周年！
その記念にブログをリニューアルしてみました！
何が変わったの？
まずはじめに、今回のリニューアルでは見た目はほとんど変わっていません。
ページ構成もほとんど変わっていません。おすすめ記事のページが追加されたくらい
じゃあ何が変わったのかというと… ページの表示速度が圧倒的に改善されました！
もともとホームを開くのに1.2秒ほどかかっていたのが、一瞬で開けるようになりました。 ページを切り替え時の待ちがなくなり ノンストレスで閲覧できます。
技術的なコト
この速さを実現するため、NuxtからHugoにブログを移植しました。
SSG+SSRのハイブリット構成から高速化のためにSSGにしようと思ったのでHugoを選びました。
NuxtからHugoに移植したワケ
本来NuxtはSSGを使用できるのでわざわざ移植しなくても高速化できるはずなのですが…
マークダウンで記事を書くために必要なプラグイン Nuxt Content を使用するとホームページの記事一覧表示がおかしくなることがよくありました。
本来は４つしか表示されないのですが、全記事が表示されています。 各カテゴリのところにも全記事が表示されてしまうのでとてもみにくい
Nuxt Content 以外の方法はどれもイマイチでしたし、マークダウンで記事を書ける環境は手放したくなかったのでNuxtをやめざるを得ませんでした。
また、Nuxtだと謎のjsが大量に生成・使用されるのも不満でした。 なんかごちゃごちゃしていて嫌ですし、PageSpeed Insights的にもよくありませんし。
Hugoのいいところ
マークダウンで記事が書けることと余計なjsが生成されないことは当然として…
Hugoのいいところはビルドが高速なところと、ショートコードという省略記法が使えるところです。
Nuxtでも最初は短時間でビルドできていたのですが、記事数が増えると1分もかかっていました。 対して Hugo は0.1秒で終わります。 信じられないくらい早いですよね
ショートコードはこんな感じの要素を
{{< link-blog blog_renewal >}}
こんなふうに記述できるものです。 NuxtだとHTMLを直書きしてたので、記述量をだいぶ減らすことができました。
AWSからCloudflareに移行
Hugoへの移植に合わせて、諸々のホスティング先をAWSからCloudflareへと移しました。
S3はエグレスの無料枠がないので毎月コストがかかっていました。（といっても数円ですけどね）
また、いつDDoS攻撃を受けて請求額が跳ね上がるかとビクビクしていました。
Cloudflareに移植したことでエグレス無料のR2がつかえるようになり、CDNやサイト本体のホスティング(Cloudflare Pages)も含めて無料枠に収められるようになりました。
バックエンドの検索APIもお家サーバー上で動かすようにしたのでクラウド破産の心配もなし！
これで夜もぐっすり眠れます。
移植ついでにいくつか修正を行ったので、PageSpeed Insights で測定してみました。
移植前
移植後
読み込み速度がだいぶ改善されたことがわかると思います。
2年間ブログを書いてみて
ブログを書き始めてからのこの2年間で、なんと50もの記事を書くことができました。
最初は「アプリの宣伝のために…」なんていやいやながら、半義務感で始めたこのブログ。
でもいつのまにやら楽しくなってきて電子工作やレビューなどの記事も書くように！
なんなら、ネタのためにものをつくったり買ったりすることも増えてきました。（これはいいのかわるいのか…）
まだまだ文体が定まらず、「個人ブログらしい味が出てないなぁ」と思いますが、自分らしいブログ を目指してどんどん書いていきたいです！！
アプリなどを作ったりしています! よかったらみていってください→
つくったもの
今のイチオシ↓
