- Published on
Gatsbyは今、最高にイケてるエンジニア向けブログ。爆速、無料、フルカスタマイズでもう普通のブログには戻れない
- Authors
- ジャバ・ザ・ハットリ
現在、最高にイケてるエンジニア向けブログは間違いなく Gatsby（キャッツビー）であると断言する。 Gatsby にはじめて触れた日に「こいつはマジでスゲー」となって即決で自分のブログを Gatsby に移行することにした。で、今見ていただいてるこのブログが Gatsby というわけです。
Gatsby が最高にイケてる理由は次の３つ
- 爆速
- 無料
- フルカスタマイズ
もうまさに「華麗なるギャッツビー」
1 爆速
Gatsby の速さに対するこだわりがそこら中にある。
使われている主な技術
- React
- GraphQL
- PWA
- 非同期レンダリング
- 静的サイトホスティング
ひとつひとつは速く見せるためのちょっとした工夫かもしれないが、ここまで全部まとめて実装されるとそれはもう速い速い。
普段から私は個人開発プロジェクトを React, Redux, GraphQL, Rails の組み合わせで作っていて一応は分かっているつもりだった。それでも Gatsby にブログを移行してメンテナンスする中で「あーこうすればもっと速くなるんだ」という学びがたくさんあった。
単なる勉強のために Gatsby の仕様書を読むだけだったらここまでの学びは無かっただろう。やはり自分の手でコードを書きながらの学びは全然違う。 自分のブログを Gatsby にしてしまえば自然と最新の爆速技術が手に入るのだ。
おそらくこれからのウェブ系エンジニアは爆速サイトの発想を知っているか知らないかで大きな差が付く。
エンジニアが技術に対してフワっとした理解だけで終わったらそれまでだ。 例えばこんなの
- Rails だからカンタンに速く作れる
- Python だから機械学習を実装できる
- SPA だから速い
あまりにフワっとしすぎていて反論のしようもない。でもこれらの発言から本当にその技術を理解しているのかは疑わしい。
Gatsby にしても「＊＊だから速い」だけの理解では自分の技術としての応用はできないだろう。
例えば「Gatsby は静的サイトだから速い」は確かに正解だが、静的サイトジェネレーターは他にもたくさんある。なぜ他のではなく Gatsby なのかはもっと深く理解する必要がある。
この記事を読んで Gatsby のリポジトリーをほんのちょっと覗いてみるだけで、今後のあなたのエンジニア人生を変える出会いがあるかもしれませんよ、と言いたい。
2 無料
このブログサイト全部無料だ（ドメイン登録料は別）。ホスト先も Netlify で月 100G まで無料。もちろん Gatsby は無料。
だいたいブログプラットホームの有料プランってあの料金に見合ったサービスを提供しているとはとても思えない。エンジニアでブログプラットホームに心の底から満足してる人ってあまり居ないと思う。
かゆい所に手が届かなくて、そのブログプラットホーム独特のやり方にしばりつけられて、しかも金を取られて「一体なんなんだ！」と言いたくなる。
ブログプラットフォームのセールストークとして「うちのサーバーは巨大です。どんなにバズってアクセス増えてもサーバーが落ちません」というのがある。 これってそもそもブログに余計なデータベースとかを付けたサーバー構成にするから落ちる心配してるだけ。Gatsby のように静的ホストにすれば落ちないし、心配する必要がない。
だいたいブログの主な機能は「書いた内容をユーザーに読んでもらう」というとても静的な内容だ。なので静的にして爆速で SEO をチューニングした方が本来の主たる目的がより機能する。
ブロブプラットフォームの他のメリットとして独自で設計したアクセスを増やす手法がある。読者登録とかブックマーク機能とか。 で、アクセス解析を見てる人はブログのアクセスがどこから来てるか分かっているだろう。検索エンジンだ。
以上のことから私にとってブログプラットフォームにくっついている理由があんまり無いので Gatsby の独自ドメインに移行した。
しばらく経ってアクセス数やらが、はてなブログ時代に比べてどう変化したかはまたこのブログでレポートします。
3 フルカスタマイズ
なんでも好きにカスタマイズできる。「全部オレのモノだー」ってのがスッとする。自分のブログを Git で管理して、独自ドメインで運営して、ドメインパワーも自分の努力次第になる。
ちょっとでも不満があれば自分でそこになんでも入れ込める。
今回、はてなブログから移行しようとして初めて気が付いたのがはてなブログには標準で「canonical」が指定できない。これは「おい！」となった。
しかしはてな社を責めようとは思わない。業者としてユーザーを招き入れる部分は手厚く実装して、ユーザーが出ていく部分はわざとやりにくくするのは正攻法だ。正直ウザっと思ったけど彼らだって慈善事業でブログフォーマットを提供している訳ではないんだ。
問題はあまりにそういうことに無自覚に他社のブログシステムにどっぷり浸かってしまってるユーザーにある。ある程度のキリのいいところで自前サーバーに移行するのはエンジニアとして必然的な結果だと思う。
ただ「なんでもできる＝なんでもやらなければならない」となって面倒な部分もある。Gatsby の場合はスターターキットで気に入ったデザインを選べば、そこにほぼ全ての枠組みが入っているので後は気に入らない箇所だけ変更すればいい。
今回私が主にカスタマイズしたのは SEO に関して。やはり英語圏向けのスターターキットなので日本語圏の市場には合ってない箇所があった。それでも WordPress なんかの苦痛とは比べ物にならないコードのキレイさだった。
それはひとえに React や GraphQL といったモダンな技術を採用しているからだろう。
Gatsby をおすすめしないケース
ここまでおすすめしてきた Gatsby だが、おすすめできないケースもある。それは非エンジニアの方に対して。どんなにカンタンに立ち上がると言っても基本的に Git コマンドでデプロイする必要があるし、既存ブログから記事をエクスポートして Gatsby にインポートするのも１発でいかない箇所がちょこちょこある。エンジニアならそこは自分用にスクリプトを書けばいいのだが、それを非エンジニアの方にカンタンですよ、と言うつもりはない。
でもそのうちにボタンひとつで Gatsby ブログが立ち上がるサービスがどこからか出てくると思うし、そんなのが出てきた時には非エンジニアの方もぜひ使ってみてください。
Gatsby ブログの作り方
大まかなやり方は以下の３つ
- お好きなスターターキットを選んでローカルへクローンする
- ローカルでカスタマイズ
- git push して Netlify へデプロイ
ここから自分のブログデザインに合うスターターキットを選ぶ。ここに無ければもっと探すか、最小構成のを選んでゴリゴリ自分カスタマイズも可。
Netlify はネットワークトラフィックが 100G/月まで無料。超人気ブログを運営されている方はそれ以降課金されるのでご注意を。
もう少し具体的に作り方を書くのは別記事にする。本記事の主旨としては絶賛おすすめですよ、とただそれだけが言いたかったので。