Gatsby

ブログ名の dvg は Develop log を都合よく省略したもの。 開発ブログ的なものにしようと思っていたけど、全然技術的なものをかけてなかった。

このブログは Gatsby というフレームワークで作っている。 Gatsby は React で書かれた、HTML を生成する静的ジェネレーター。 Node 環境で build することで、Markdown で書いた記事から HTML を生成してくれる。

フレームワークの選定

ブログのフレームワーク選定に際して、以下の点を考えていた。

• Markdown で書きたい
• PHP 以外の言語を使いたい（脱Wordpress）
• iPhone/iOS など特別な環境のない端末からも更新したい

脱Wordpressというのは、Wordpress が悪いという意味ではない。 これまで公私共に長年使ってきたので、自分の経験値を増やす、世界を広げるためにも別の何かが良かっただけ。

Markdown で書けるブログジェネレーターとして、Ruby の Jekyll や Goで書かれた Hugo は知名度があると思う。いずれも人気があるので、テンプレートが豊富。 しかしながら、Jekyll・Hugo 共にローカルに環境作って、ジェネレートするのが通常。 Jekyll の方は GitHub に置けばフルリモートでも可能そう。

そんな時、出会ったのが Gatsby。

Gatsbyとは

前述の通り、Gatsby は Node 環境で動く静的ジェネレーター。 JS、フロントエンドの技術だけで完結できてしまうのが、Jekyll や Hugo との違いかな。

テンプレート・表示部分は React で書かれているのも特徴的。 静的ジェネレーターでありながら、表示は今時な SPA（Single Page Application） になっているので、ページ遷移が爆速！ Markdown で書いた記事を取って来る部分とか GraphQL なんかも使われている。 このブログはまだ HTTPS 入れられてないので使えてないけど、デフォルトで Service Worker を使う設定も入っている模様。

Gatsby は永続性・今後も変わらない信頼性みたいなものは小さいけれど、ブログを触りながらフロントエンドの技術を磨くのには向いていそう。 フロントの変化は激しいので、技術的に前のめりなのは素晴らしいと思う。

Jekyll や Hugo に比べるとテンプレートの数は少ないけれど、ドキュメントもしっかりしたものがあり、自分で手を入れていく前提なら良さそう。 とはいえ、まだほとんどテンプレート（Gatsby では Starter という呼び名）のまま。

まだそれほど深く触れていないので、という注釈付きでイイところ・悪いところを挙げてみる。 悪いところは、Gatsby のというよりは、僕が使っているデフォルトの Starter テンプレートの問題かもしれない。

Gatsbyのイイところ

• 技術的な前のめり感・先進性（SPA・GraphQL・Service Worker）
• 表示が速い（静的ジェネレーター）
• SPA によるページ遷移の爆速感
• React で書かれていて、わかりやすい

Gatsbyの悪いところ

• スタイルの定義が typography.jsだったり直書きだったり、分散されててわかりにくい
• Node モジュールの依存関係とかまで触りだすと、影響範囲が掴めずツラくなる（僕の Node 経験不足）

Gatsbyブログ構築環境

この dvg ブログは VPS（CentOS7 + Nginx）に Node を入れていて、リモートの Node 側で gatsby build することで HTMLを生成している。 本来ならリモート側でビルドする必要ってないけれど、Node 環境やデーターが揃ってないデバイスからも更新するために、そうしている。

今回、ブログを作る上で自分自身の技術的な経験値向上が一つ大きなテーマなので、プロダクション的なものだとアンチパターンになるかもしれないこともあえてやってみている。 技術的な前のめりを大事にしている。

これまでレンタルサーバーとか Apache の経験しかなかった。 同僚の詳しい優秀な人にアドバイスもらいながら VPS も初めて使ってみた。 環境もあえて、Apache ではなく Nginx にしている。これも単純に一度触れてみたかったから。

比較検証をしていないので、正確ではないけれど、この dvg の爆速感は Nginx の恩恵もあるのかもしれない。 新しいものに触れて学び続けるのって、Web の世界だと特に大事だと思う。止まったら死んでしまう！

今後の課題

やりたいと思いつつ、できていないのが以下の内容。

• HTTPS運用（Nginx・Let’s Encryptの設定）
• テンプレートカスタマイズ
• タグやカテゴリーの追加
• Service Worker

HTTPS はそれほど難しくなさそうだけど、 Nginx というかサーバー側の設定がやはり不慣れ。 テンプレートや機能の追加なども、Hatch Tech Blog さんなどチラホラ見かけるので、参考にさせてもらいながら進めていく予定。