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

今後に期待しましょう。

参考ページ

dev

ウェブ技術で縦書きを含む画像を生成したい

ここ最近、Web技術を利用した画像生成に興味があります。本記事では、日本語における表現の一種である縦書きに焦点を当て、Web技術を使った縦書きを含む画像生成方法についての調査をまとめました。 > 現

blog

Netlify Formsで問い合わせフォームを作ったら簡単だった

追記(2022/12/29): 問い合わせに対応する窓口をTwitterに統一したいので、フォームページは削除しました。 当ブログは静的サイトホスティングサービスのNetlifyでホスティングされ

netlify
dev

翻訳でHacktoberfestに参加しました

毎年10月に開催されるHacktoberfestに参加しました。このイベントはOSSへの貢献を行い、期間中に規定数(4つ)の貢献を行った人に特典がプレゼントされるものになっています。 自分はドキュメ

Copyright © 2023 @mottox2 All Rights Reserved.