Gatsby 启动器

Gatsby CLI 工具可以让你安装 “启动器”。它们是预先配置好的站点，以帮助您在创建特定类型的站点时更快地移植。

当创建一个新站点时，您可以选择指定一个启动器来作为您的新站点的基础。例如：

gatsby new [SITE_DIRECTORY] [URL_OF_STARTER_GITHUB_REPO]

例如，要想使用 Gatsby 快速创建一个博客，你可以安装 Gatsby Starter Blog，如下所示：

gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog

这将下载文件并通过运行 npm install 来初始化站点

如果你不指定自定义的启动器，你的站点将使用 默认的启动器 被创建。

这里有几个已经创建的启动器。创建一个 PR 来包含进你的！

官方的:

• gatsby-starter-default (demo)
• gatsby-starter-blog (demo)
• gatsby-starter-hello-world (demo)

社区:

• gatsby-starter-blog-no-styles (demo)

  特性:

  • 与官方的 gatsby-starter-blog 相同，但是所有的样式都被移除

• gatsby-material-starter (demo)

  特性:

  • React-MD for Material design
  • SASS/SCSS
  • Tags
  • Categories
  • Google Analytics
  • Disqus
  • Offline support
  • Web App Manifest
  • SEO
  • 完整列表!

• gatsby-typescript-starter (demo)

  特性:

  • Semantic-ui for styling
  • TypeScript
  • Offline support
  • Web App Manifest
  • Jest/Enzyme testing
  • Storybook
  • Markdown linting
  • Full list here!

• gatsby-starter-bootstrap (demo)

  特性:

  • Bootstrap CSS framework
  • Single column layout
  • Simple components: SiteNavi, SitePost, SitePage

• gatsby-blog-starter-kit

  特性:

  • 带预览的博客文章列表
  • 使用 previous/next 按钮的文章导航
  • 标签和标签导航

• gatsby-advanced-starter (demo)

  特性:

  • Great for learning about advanced features and their implementations
  • Does not contain any UI frameworks
  • Provides only a skeleton
  • Tags
  • Categories
  • Google Analytics
  • Disqus
  • Offline support
  • Web App Manifest
  • SEO
  • Full list here!

• glitch-gatsby-starter-blog (demo)

  特性:

  • live-edit a temp, anon copy of app
  • same code as gatsby-starter-blog (mostly)
  • free hosting & web IDE on glitch.com
  • HMR working w/ glitch IDE (see note)
  • 谨慎:
  • app running in develop mode
  • glitch serves assets over CDN, API unclear
  • virtual server container provides 128MB for app (512MB for assets)
  • server can’t install certain gatsby plugins (sharp-based; out of mem?)

• gatsby-starter-grommet (demo)

  特性:

  • Barebones configuration for using the Grommet design system
  • Uses SASS (with CSS modules support)

• gatsby-starter-basic (demo)

  特性:

  • Basic configuration and folder structure
  • Uses postcss and sass (with autoprefixer and pixrem)
  • Uses boostrap 4 grid
  • Leaves the styling to you
  • Uses data from local json files
  • Contains Node.js server code for easy, secure, and fast hosting

• gatsby-starter-typescript (demo)

  特性:

  • TypeScript

• gatsby-starter-default-i18n (demo)

  特性:

  • localization (Multilanguage)

• gatsby-starter-gatsbythemes (demo)

  特性:

  • CSS-in-JS via Emotion.
  • Jest and Enzyme for testing.
  • Eslint in dev mode with the airbnb config and prettier formatting rules.
  • React 16.
  • A basic blog, with posts under src/pages/blog. There’s also a script which creates a new Blog entry (post.sh).
  • Data per JSON files.
  • A few basic components (Navigation, Footer, Layout).
  • Layout components make use of Styled-System.
  • Google Analytics (you just have to enter your tracking-id).
  • Gatsby-Plugin-Offline which includes Service Workers.
  • Prettier for a uniform codebase.
  • Normalize css (7.0).
  • Feather icons.
  • Font styles taken from Tachyons.

• gatsby-starter-netlify-cms (demo)

  特性:

  • A simple blog built with Netlify CMS
  • Basic directory organization
  • Uses Bulma for styling
  • Visit the repo to learn how to set up authentication, and begin modeling your content.

• gatsby-starter-portfolio-emma (demo)

  特性:

  • Perfect for designers and photographers
  • Full-width Photo Grid-Layout (Responsive Images through gatsby-image)
  • Minimalistic light theme with large images
  • Create your projects in Markdown
  • Styling with SCSS and Typography.js
  • Easily configurable
  • And other good stuff (SEO, Offline Support, WebApp Manifest Support)

• gatsby-starter-bootstrap-netlify (demo)

  特性:

  • Very similar to gatsby-starter-netlify-cms, slightly more configurable (eg set site-title in gatsby-config) with bootstrap/bootswatch instead of bulma

• open-crowd-fund (demo)

  特性:

  • Open source crowdfunding for your own ideas
  • Alternative for Kickstarter, GoFundMe, etc.
  • Secured Credit Card payments with Stripe
  • Storing of funding information in Firebase

• gatsby-starter-dimension (demo)

  特性:

  • Based off of the Dimension site template. Designed by HTML5 UP
  • Simple one page site that’s perfect for personal portfolios
  • Fully Responsive
  • Styling with SCSS

• gatsby-starter-docs (demo)

  特性:

  • All the features from gatsby-advanced-starter, plus:
  • Designed for Documentation / Tutorial Websites
  • ‘Table of Contents’ Component: Auto generates ToC from posts - just follow the file frontmatter conventions from markdown files in ‘lessons’.
  • Styled Components w/ ThemeProvider
  • Basic UI
  • A few extra components
  • Custom prismjs theme
  • React Icons

• gatsby-styled-blog-starter (demo)

  特性:

  • sidebar navigation
  • look like an app
  • page transitions
  • pwa
  • styling with styled-components
  • easily restyled through theme object
  • README

• gatsby-starter-deck (demo)

  特性:

  • Create presentations/slides using Gatsby.
  • Offline support.
  • Page transitions.

• gatsby-starter-forty (demo)

  特性:

  • Based off of the Forty site template. Designed by HTML5 UP
  • Colorful homepage, and also includes a Landing Page and Generic Page components.
  • Many elements are available, including buttons, forms, tables, and pagination.
  • Styling with SCSS

• gatsby-firebase-authentication (demo)

  特性:

  • Sign In, Sign Up, Sign Out
  • Password Forget
  • Password Change
  • Protected Routes with Authorization
  • Realtime Database with Users