Illustration by Camille Chauve

Start a new website with Gatsby, Prismic CMS & Netlify

At Source we redesigned our website and decided to try a different technical stack. Based on the same kind of modern technologies like React that we already used for our clients’ web applications. In this tutorial, we chose the blog as an example to show you the power of these complementary tools.

With this goal in mind, we will use :

• Gatsby: Free and open source framework based on React that helps developers build blazing fast websites and apps.
• Prismic: Headless CMS.
• Netlify: Build, deploy, and manage modern web projects.

I will detail each of the services listed above in the following sections.

Find the project sources on Github here.
Preview, the result here: https://gatsby-article.netlify.com.

Step 1: Gatsby initialization

If you like to React, Gatsby is perfect to generate a static website. It offers you a boilerplate with the power of the latest web technologies (React.js, Webpack, modern JavaScript and CSS and more). Moreover, these tools allow us to quickly connect our project with a Headless CMS.

First, you need to get gatsby-cli from NPM. If you have not done so already, you could follow the quick start.

Let’s generate your project :

$ gatsby new my-blog
$ cd my-blog
$ yarn

Now, we install Sass to simplify CSS integration, we will use gatsby-plugin-sass. In this tutorial, I will not talk about CSS but you can find the sources on Github.

$ yarn add node-sass gatsby-plugin-sass

Next, add the plugin in your gatsby-config.js.

// in gatsby-config.js
plugins: [‘gatsby-plugin-sass’]

Note, Gatsby offers a plugin library that will allow you to gain in development time.

Now, we can start the project.

$ gatsby develop

First of all, I recommend you to organize your /src this way.