Sample Blog with API-based CMS & Gatsby.js

ūüď¶ We just published beta versions (4.0.0-beta.0) for the gatsby-source-prismic and gatsby-plugin-prismic-previews plugins. With this new change, previews are now handled from their own plugin. Please refer to the migration guide for each plugin.

Also, expect this documentation to be updated to v4 as well soon!

Example blog project with Prismic (API-based CMS) and Gatsby.js. This guide is an excellent starting point to learn how to use Gatsby or Prismic. Feel free to take a look!

Live Demo

‚ö†ÔłŹ¬†Node Version

You will need to have at least version 12.16.1 of node installed on your machine. You can check this by running the node -v command in your terminal.

‚ö†ÔłŹ¬†Prismic¬†CLI version

Make sure you're using at least version 3.8.8 of the Prismic CLI. Otherwise, the theme command won't add any Custom Types or content correctly to the newly created repository.

Check your version by running prismic --version command in your terminal.

1. Launch the project

First, Install the prismic-cli package globally. Launch a terminal instance and run the following command:

npm install -g prismic-cli

Sudo command

Sometimes it's possible that this command doesn't work. If that's the case for you, try executing a sudo command: sudo npm install -g prismic-cli

Once it's been installed, navigate where you want to create your new project folder and run the following command. This will create a new Prismic content repository, set up the custom types, create a few documents, and install the project code:

prismic theme --theme-url --conf prismic-configuration.js

‚ö†ÔłŹ Correct repositoryName

Open your prismic-configuration.js file and confirm that in the prismicRepo matches the URL of the Prismic repository created earlier in this article. To find this, go to your Prismic dashboard, then to your repository.

If the URL for your repository is, then you'll need to replace 'your-repo-name' with 'my-awesome-repository'.

2. Explore your new repository

Visit the repository you have just created in your browser. It will show in your Prismic Dashboard.

3. Run the website

Open your project folder again, and in the terminal, run the development command.

npm start

Your site should now be running locally at http://localhost:8000!

4. Deployments & Previews

You have many options to select from to deploy and host your site, as well as different ways of setting up previews in your project. Refer to the dedicated guide and select the option that best fits your needs:

Customize to your liking

You should easily find what to modify in the code to customize the website: edit the stylesheets and the templates to fit your design.

Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.