Installing The Development Environment¶
First, we need last LTS NodeJS version (8.12.0 at writing time). We recommend to use nvm to install NodeJS instead of using your OS-based version.
Install nvm on your system using the instructions and provided script at:
Using nvm we will look up the latest lts version of NodeJS and install it
nvm install --lts nvm use --lts
NodeJS is provided with npm, its package manager, we will use it to install the GatsbyJS CLI
npm install --g gatsby-cli
-g means the CLI will be available globally in our nvm instance.
Creating a new GatsbyJS site¶
The CLI allows to initialize a project:
gatsby new hello-world
This command tells gatsby-cli to create a new GatsbyJS project with the name
hello-world with a basic default file structure.
There are several boilerplates created by the community that allows to bootstrap an application for different use-cases.
These boilerplates are called “starters” and in the offical site you could find a complete list of available starters. There are starters with some pre-configured themes (for example material-ui or bootstrap), support for authentication, and so on.
There are also some starters that are specialized in integration with some external sources, such as a CMS like Plone or WordPress. They create a boilerplate with all the configuration to fetch data from the external sources and give some helper methods to build the pages/interface with that specific data, such as the breadcrumbs or navigation.
Data fetching part is usually managed by a different type of plugins called “source-plugins” that can retrieve data from a specific source.
We will cover “source-plugins” in later chapters.
To create a new project with a starter, you need to append the github URL of the desired starter in the cli command:
gatsby new [SITE_DIRECTORY] [URL_OF_STARTER_GITHUB_REPO]
cd hello-world gatsby develop
This command starts a development server. You will be able to see and interact with your new site in a development environment at http://localhost:8000.
Now that we have a working installation, let us go deep inside GatsbyJS to see how it works and what are its main parts.