Gatsby - Markdown×Reactによる静的サイトジェネレータ
静的サイトを作る時にはコンテンツを作ってリロードして表示を確認するのが基本です。その時、ライブリロードのような仕組みを使っていても基本は変わりません。SPA（シングルページアプリケーション）であれば一番上まで戻ってしまうでしょう。確認がだんだん面倒になっていくはずです。 そこで使ってみたいのがGatsbyです。Markdown + Reactを使った静的サイトジェネレータです。
Gatsbyの使い方
Gatsbyのインストールはnpmでできます。
npm install -g gatsby
インストールしたらまずサイトのベースを生成します。
$ gatsby new my-test-gatsby-site
07 Sep 08:00:44 - log: Cloning git repo "git://github.com/gatsbyjs/gatsby-starter-default.git" to "my-test-gatsby-site"...
07 Sep 08:00:45 - log: Created starter directory layout
:
react-document-title@1.0.4 node_modules/react-document-title
└── react-side-effect@0.3.2 (fbjs@0.1.0-alpha.10)
後は gatsby serve でサーバを立てます。コンテンツはMarkdownで作り、ファイル名やフォルダ名から自動的にサイトのパスができます。
そして面白いのは編集内容がリアルタイムに反映されていくことです。
Reactを使うことで随時最新のコンテンツと差し替わります。リロードされていないのでスクロールが戻ることもなく、その場で表示が確認できるようになっています。Gatsbyを使えばコンテンツがさくさくと作れそうです。
Gatsbyはnode/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。