GatsbyのStarterの探し方
静的サイトジェネレーターGatsbyは、一からスタイルと機能を追加して構築することが可能ですが、すでに構築済みのテンプレートを利用することもできます。
このテンプレートをStarterと呼んでいます。
公式サイトではStarter Libraryとして一覧表示されています。
460ものStarterがあります。
なかなか作りたいものを探すのが大変ですが、サイト左側のCategorysから表示フィルタをかけることができます。
例えば、サイトのタイプがblogでCMSにContentfulを使う場合は、blogとCMS: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 : 分類できないもの
それぞれを、登録数が多い順に整理してみます。
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を比較している記事がありました。
終わり
Html5ゲームライブラリのPhaserについての情報サイトを作ろうと思っています。
StarterではDocumentationカテゴリが相性が良さそうなので、
その中の14件から吟味したいと思います。
Discussion