💬

GatsbyのStarterの探し方

5 min read

静的サイトジェネレーターGatsbyは、一からスタイルと機能を追加して構築することが可能ですが、すでに構築済みのテンプレートを利用することもできます。
このテンプレートをStarterと呼んでいます。

公式サイトではStarter Libraryとして一覧表示されています。

https://www.gatsbyjs.com/starters/?v=2

460ものStarterがあります。

なかなか作りたいものを探すのが大変ですが、サイト左側のCategorysから表示フィルタをかけることができます。
例えば、サイトのタイプがblogでCMSにContentfulを使う場合は、blogCMS:Contentfulを選択します。


17件になりました。
多少マシですね。

このフィルタ項目ですが、多岐にわたっていてあまり整理されてないです。
カテゴリがどんなのがあるか気になったので独自に分類してみました。

大まかな分類

分類した結果、以下7種類に分かれる感じになりました。

  • ContentTypes : サイトの種類別 : Blog/Prtfolio/E-commerce...
  • HostingSiteTypes : ホスティングサイト別 : Netlify/firebase...
  • ContentDataTypes : コンテンツ配信サイト別 : Contentful/WordPress...
  • Function : サイトの機能対応別 : PWA/i18n...
  • Contents / Cording Language : コンテンツ構築言語等 : Markdown...
  • Style : スタイリング : Bootstrap/Material...
  • Other : 分類できないもの

それぞれを、登録数が多い順に整理してみます。

一つのStarterには、通常では複数のカテゴリが登録されています。そのため、以下で分類したものを集計した数は全Starter数の460よりも多くなります。

Contents Types

Type nums memo
Blog 166
Portfolio 99
Onepage 54
Landing Page 38
E-commerce 15
Documentation 14
Gallery 14
Shopify 3
Presentation 2
Donations 1 寄付

Donations用のStarterがあるのが面白いです。
APIのドキュメンテーションなどにはDocumentationカテゴリが良さそうです。

Documentationの例です。
GitBookスタイルが人気のようです。

Hosting Site Types

Type nums memo
Netlify 67
Firebase 10
AWS 5
Azure 1

Netlifyが圧倒的でした。

Content Data Types

Type nums memo
CMS:Headless 48
CMS:Netlify 25
CMS:Contentful 24
CMS:WordPress 10
CMS:Other 7
CMS:Cosmic 6
CMS:Kontent 5
CMS:Prismic 5
CMS:sanity.io 3
Google Sheets 3
Airtable 2
CMS:DatoCMS 2
CMS:GraphCMS 2
CMS:Agility CMS 1
CMS:Forestry.io 1
CMS:Ghost 1
CMS:Strapi 1

Netlify自体CMS機能があるんでしょうか?
Google SheetをCMSとして使えるのは何かのときに役立つかも🤔

Function

Type nums memo
SEO 150
PWA 91
Linting 83
Pagination 38
Testing 31
i18n 19
Redux 15
Client-side App 14
Disqus 14 コメント機能作成
Storybook 14
Authentication 11
Transitions 10
RSS 9
Search 7
Stripe 6 決済
Infinite Scroll 3
AMP 2 Accelerated Mobile Pages
Square 1 決済

Gatsbyでは、自分でPluginを追加すれば機能追加できる仕組みなので、Starterの選定基準としてはそれほど重要ではないと思います。
とはいえ、十分にテストされた決済系のサンプルが試せるのはありがたいと思います。

Contents / Cording Language

Type nums memo
Markdown 102
Language:TypeScript 78
MDX 46
Language:Other 3

微妙な分類です…。
CMSではMarkdownは当たり前みたいな感じですので、この項目の優先度は低そうです。

Style

Type nums memo
Styling:CSS-in-JS 120
Styling:SCSS 84
Styling:Tailwind 35
HTML5UP 25
Styling:Bootstrap 24
Styling:Material 23
Styling:Other 22
Styling:PostCSS 17
Styling:None 12
Styling:Bulma 8
Styling:Theme-UI 8
Styling:Ant Design 6
Styling:Grommet 3
Style Guide 1 MDXスタイルガイド

Styleについては知見が無いので、何も言えません…。
デザイナー志向の方は、こちらを重視する感じでしょうか。

Theme-UIの例です。

Other

Type nums memo
Official 3 gatsby公式

公式のStarterです。チュートリアル等でお世話になります。
フルスクラッチで作る場合も、公式Starterから始める感じですね。

その他

ちょっと古いですが、Starterを比較している記事がありました。

https://dvg.179.jp/201803-gatsby-starter/

終わり

Html5ゲームライブラリのPhaserについての情報サイトを作ろうと思っています。
StarterではDocumentationカテゴリが相性が良さそうなので、
その中の14件から吟味したいと思います。

Discussion

ログインするとコメントできます