華麗なるGatsby

Kuniyoshi Tone
Just_a_Test_2
Published in
3 min readSep 5, 2016

Gatsbyというと表題の通り映画を思い浮かべる人もいだろうが、紹介するのはNode.jsのモジュール。セキュリティ向上のため最近一部で人気の出ている静的サイトジェネレータの一種だ。WordPressなどのデータベースにコンテンツを格納し動的にコンテンツを生成するCMSではその仕組みの複雑さから脆弱性が避けられず様々な攻撃の危険性にさらされ、頻繁なアップデートやパッチの対応が必要となる。その対応が面倒でついつい放っておくと、狙い撃ちにされて被害に遭ってしまう。そんなことから安全性を求めて、昔のように静的なHTML, CSS, JavaScriptだけでサイトを構成することの良さが見直されているようだ。

このGatsbyを昨日、9月4日に大阪市内で開催された「オオサカプログラミングカフェ#4」で試しに使ってみたがなかなか面白かった。
本家(https://github.com/gatsbyjs/gatsby)のREADMEにあるように、
- npm install -g gatsby でインストール
- gatsby new my-test-gatsby-site
- cd my-test-gatsby-site
- gatsby develop
とすると最後のgatsby developでエラー。仕方ないのでstarterと言うテンプレートを明示的に読込むパターンでサンプルのブログテンプレートを使用するとエラーなしでサンプルサイト作成完了。pagesというサブフォルダ内にあるMDまたはHTMLファイルを編集すると、developモードだとブラウザリフレッシュなしにすぐに反映(これがReact.jsの威力)されるので投稿確認が簡単。確認後
- gatsby build
するとページテンプレートやサイトのテーマが反映された静的HTMLがpublicというサブフォルダにできあがる。後はこの中身を公開用httpサーバにsftpかgitでプッシュしてあげれば公開完了。

今回はさらに新たな挑戦ということで自分のgithubに公開用HTMLリポジトリを作って公開した。(方法の詳細はこちらを参照させてもらった)
公開URLは https://kunichan2013.github.io/my_blog/ です。(サンプルの一部を日本語にしただけだが・・・)

githubの本家のページには多種多様なサイトの構築例が紹介されており、そのサイト用のstarterがほとんどの場合は公開されているのが素晴らしい。

こんなややこしいことしなくても、昔ながらの「ホームページビルダー」やDreamweaverで作ってftpでアップすればいいと思う人もいそうだが、新たなブログ記事を書くだけで自動的に目次のリンクや前後の記事への移動リンクを作成したり、あるいはメールでの投稿や逆に投稿のメール配信をしたい場合などはftpだけのシステムでは簡単にはできない。一方gatsbyがメインならば、開発用のサーバーでサイトの更新を行い、変更分だけを公開サイトにftpやgitでアップしつつ、同時に新着メール配信などをするという仕組みそれほど難しくなく出来そうに思う。今drupalで公開している自分が管理者の掲示板サイトもいずれは移行してみたい。

--

--