mottox2 blog

Gatsby Themeの紹介

devgatsby

Gatsbyを使った人でStarter(Scaffold)を利用してGatsbyのサイトを構築したことのある人は多いのではないでしょうか?
Starterとは別にGatsbyのサイトを構築していく上で便利な「Theme」という仕組みもあるのでご紹介します。

2018/12月時点ではexperimentalな機能ですのでご注意ください。

Starterの再利用性の低さ

従来のStarterをGatsby CLIで展開する方法は、実行時点でのStarterの最新版をローカルのディレクトリに展開するものでした。
Scaffold方式の問題点なのですが、一回展開されたコードは、元のディレクトリのコードが変更されたときに追随するのが非常に困難です。
また、1人で複数のサイトを管理する際にお決まりの設定が各リポジトリに乱立するという問題もあります。
Contentfulのお決まりの設定や、Markdownの処理を行うremark系のプラグイン設定が各リポジトリに存在するようなケースです。
他にも、ドキュメントサイトのようなサイトに対してLogoやColorを変更したいだけなのに、大きなGatsbyプロジェクトが必要なのも問題です。必要以上に大きなコードをいじる必要があり初学者からすると避けたいケースだと思います。
Starterの再利用性の低さを解決するために作られたのがGatsby Themeです。

概要

Gatsby Themeは、Gatsbyの各種設定やページ、コンポーネントを含むnpm packageです。
利用者はそのThemeを利用して、設定を拡張したり、Viewの一部を差し替えたりすることで簡単にサイトを構築していきます。

想定される利用例

Gatsby Daysのセッションで話された内容ですが、次のような場合で利用すると効果的です。

  • 同じ会社や個人がサイトを作成するときの共通設定
    • 同じSource Pluginを利用する場合
    • 同じTransformer Pluginを利用する場合
    • SASSなどの共通設定を利用する場合
  • ドキュメントサイトのような大枠が変わらないサイト
    • 変更したいのは、ロゴやブランドカラーだけのようなとき

実装例(利用者側)

今回はgatsby-theme-blogというThemeの作者がサンプルでつくっているテーマを使ってみます。本記事ではテーマの作成方法については言及しません。

bash
$ npx gatsby new gatsby-theme-sample https://github.com/gatsbyjs/gatsby-starter-hello-world
$ cd gatsby-theme-sample
$ npm install gatsby-theme-blog

次のgatsby-config.jsを作成しましょう。

gatsby-config.js
module.exports = {
  __experimentalThemes: [
    {
      resolve: "gatsby-theme-blog",
      options: { root: __dirname }
    },
  ],
}

src/pages/index.jsを削除し、src/assets/gatsby-logo.pngに適当なpng画像を置き、次のようなマークダウンファイルをsrc/pages/sample-post/index.mdとして作成してください。

---
title: New Beginnings
date: "2015-05-28T22:40:32.169Z"
---

This is sample post.

この状態でnpm run developを実行しましょう。

スクリーンショット 2018-12-23 17.34.14.png (141.7 kB)

これで一応動きます。ファイルツリーを見てもシンプルな状態で動いていることが確認出来ます。

スクリーンショット 2018-12-23 17.34.48.png (22.2 kB)

ただ、暗黙的に必要なファイルが多かったりするので、初見で使うのは非常に難しいです。おそらくテーマによって前提となる作業も違ってくるでしょう。
現実的には「ThemeをベースにしたStarterを利用する」という形になると思います。

個人的な感想

configは多分コピペの嵐になっていると思うので、Themeで共通化できるのは嬉しい。
暗黙的に呼び出されるRouteは辛いのでRoutingに関しては各プロジェクトで持ったほうが楽そう。
UIもThemeの中にあるコンポーネントより、ドキュメントが用意されているライブラリを使った方が楽だと思う。

Document系のテンプレートを固めて、色やタイトルをオプションといった形で利用できるようにして、継承はされないという前提であればよさそう。
そういった場合は用途を限定した静的サイトジェネレーターのような扱いになるはず。それはそれであり。

今後に期待しましょう。

参考ページ

B!
dev

CLIで利用するNode.jsの書き捨てプログラムを作成するコツ

プログラマーであれば単純作業をプログラムに任せると思います。今回は備忘録を兼ねてNode.jsで書き捨て前提のプログラムを書く際に、よく使っているテクニックをまとめてみました。 やっていることは同じ

nodejs
tool

おしゃれなコード画像を生成するCLIツール『Silicon』

自分はLT資料を作る際に、『Carbon』というおしゃれなコード画像を生成するWebサービスを利用しています。今回はCarbonをインスパイアした『Silicon』というRust製のCLIツールを発見

toolrust
event

「技術書同人誌博覧会」にサークル参加してきた

2019/07/27に大田区産業プラザPioで開催された技術書同人誌博覧会(通称「技書博」)にサークル参加してきました。 「ブログを書くまでがイベント」ということですので、新刊の話、次回の新刊、当日

技術同人誌