こんにちは！今日はブログをHugoベースからGatsby.jsベースに移行した話についてです。

2年前に立ち上げた時はNuxt.jsとContentfulで構成していたので、2回目の迷走リニューアルですね！前回リニューアルした時の話はこちら

Hugoに変えた理由

Nuxt+contentfulからHugoに変えた理由は以前も書きましたが、ざっくり要点をまとめると…

• Google adsenseがSPAを想定していない故の辛さがあるNuxtとそもそもMPAのHugo
• git管理のできないContentfulとmarkdownのHugo
• AMP使えないnuxtと使えるHugo
• OGP気になるnuxt(というかspa)と気にならないHugo
• ビルド遅いnuxtと超早いHugo

といった具合でHugoに移行しました。

Hugoで困ったこと

実際Hugoで半年ほどブログを書き続けました。閲覧数は3倍になり励ましの言葉もいくつか頂きまじで楽しかった。でもそれとこれとは別の話、Hugoに困らされたこともたくさんあった。

モダンフロントエンドとの乖離

これが一番の理由。

Hugoのエコシステムはモダンフロントエンドとは遠く切り離された場所にあります。React？vue？そんな知見は一切通用しません。全てが1から。

ちょっとJS系のフレームワーク入れたりなんてとてもできません。

そもそもgolang * フロントエンドなんてHugo以外で聞いたことありません。もともとgolang触ってたサーバーサイドのエンジニアなら触りやすいのかな。

ちょっとしたエラーでStack Overflowに突撃をしては精神を削る日々に憔悴しておりました。

せっかく作ったAMPが飾りに

本ブログ、AMPからの流入が全体の3%。 3%。 Hugoにした大きな目的の一つが脆くも崩れ去った瞬間であります。

元々このブログの閲覧は8割ちょいがPCから。AMPはほぼ不要でした。今回のリニューアルでもAMPは切った。

しかもHugoはどうやらAMPのページネーションを完璧にはサポートしていないようで…

Hugoはトレンドではない(おそらく)

モダンフロントエンドは光です。流行り廃りは一瞬。そんな中Hugoを使うことへの葛藤がありました。

GoogleトレンドでHugoで調べてみてください。右下がりのグラフが… と言いたいけどHugoで検索かけると人名ばっか出てくる。

でも自分の周りではホットな技術ではなくなったなーっていう印象です。

重い

これもかなりの理由。重い。ビルドは早いのに。ロードが重い。MPAの限界を見た。

OGPそんなに強くない

これは自分の知見の無さもあるけど、こういう時にJSでゴリ押しできるNuxtとそもそもどこ触って良いかすらわからないHugoの差が出た。

たまーにtwitterで記事拡散されてりするときにOGP画像出ないのが忍びない。

Gatsby.jsに変更して良かった所

本ブログは2020年4月28日にgatsby.jsに移行しました。

フレームワークの完成度

SPA最高。ページ遷移が早い。いくら早いMPAでもこの速度は出せない。早いは正義。大して速度を意識しなくてもこの速度が出せるGatsbyはすごい。

もはや全ての静的ページはこれでいい気がする。純粋に完成度高い。

何も考えなくてもlighthouseが80点。gatsbyは100点余裕らしいけど

OGPちゃんとできる

これはGatsbyもすごいけど、豊富なサンプルがあるコミュニティのでかさが幸いした。もう最初からSEOって名前のファイルがあるんだもん。楽だった。Nuxtで苦戦したのは何だったんだ。

無料でホスティングできる

主にNuxtとの比較。Nuxtも静的化すればnode.js環境いらないんだけど、静的化もできるNuxtと静的化しかできないGatsbyじゃ設定の楽さが違う。

ただこの辺りはvuepressでも良かったかも。でもコミュニティの大きさが段違い。

超モダンフロントエンド

世界の最先端に触れられる。JAM Stack。

今回のリニューアルを通して

• React hooks
• TypeScript
• Tailwind.css

にめちゃ詳しくなった。こういうホットな技術ガンガン拾えるのがいいです。

Gatsbyで辛かったこと

辛かったことも多少はある。

google adsenseとの相性の悪さ

もう言うの何回目だって感じだけど、SPAの宿命。自動広告と特に相性が悪い。

このブログはスマホ版のアンカー広告だけ自動で出して、あとは全部手動で置いてます。

学習コストがまあまあ高い

特にGraphQl周り。最初はさっぱり。自分も苦戦しました。今はもう慣れたけど。

gatsby-config.js の siteMetadata ってとこに値を入れるとどのページからでも取れるんだ！ってここまで気づくだけでも最初はきついと思う。

似たライブラリめっちゃある

これはReact系は全部そうだけど、例えばGoogle maps入れる系のライブラリだけでも6種類くらいある。

正しいのを選択するだけでも大変。 「npm ライブラリ名」 で検索してDL数かスター多いやつ選べばまあ大丈夫

AMPは辛い

AMP入れるライブラリもあるけど、つらすぎてやめた。

ぶっちゃけAMPよりGatsbyは早い気すらするし(ソースなし) そこまで気にすることでもないかな？

画像の扱い

imgタグの使い方に癖がある。まあでも覚えちゃえばlazyloadや軽量化等勝手にやってくれるので便利。でもちょっと癖がある。

結論

Gatsby.jsの完成度があまりにも高すぎます。しばらくお世話になりそうです。

これ本当にwordpressとかそのうちなくなるんじゃないかと思った。以上。