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.
Step 1: Gatsby initialization
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
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
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.