Example Projects

Here you'll find all the example projects that we've created to help you learn how to use Gatsby with Prismic. Feel free to explore how it all works or even use them as boilerplates for your own project if it fits your needs!


1. Choose a sample project

Now choose from one of the sample projects below. The command will clone the project locally, install any necessary dependencies, create a Prismic repo and populate it with demo content. Then it's up to you to run it and see your content.

Both of these sample projects use the Previews plugin (gatsby-plugin-prismic-previews) and the Gatsby source plugin (gatsby-source-prismic). This means that they already pull data from your newly created repositories and the preview configuration for the code is also ready to use.

Sample blog

The content modeling for this sample blog was built with two Custom Types, bloghome and post, which you'll be able to see in both your repository and your project code.

The homepage provides a small preview of the existing posts and has built-in pagination that you can customize to your needs.

Multilanguage site

The content modeling for this sample blog was built with three Custom Types, homepage, post, and menu. And two initial languages. You can add any additional languages to your repository, and your site will work using the built-in language switcher.

Sample Gatsby blog
BlogSample blog

Minimalist sample blog with a full-featured editor.

Sample Gatsby multi-language site

Multi-language website using Gatsby.js and Prismic. A site with multiple locals and a language switcher.

2. Run the command

Navigate to the location you want to create your project and run the theme command in the terminal. It'll perform these processes:

  1. It will install the Prismic CLI (command-line interface) if it's not yet installed in your machine. This tool will allow you to interact with Prismic from your local machine.
  2. It will run the theme command, which will prompt you to name your Prismic repository and local folder. Then, it'll install the project code locally, download the project files to your machine and create a brand new repository with content.
  3. If you're not logged in to Prismic yet, it'll prompt an option to enter the email and password for your Prismic account (or sign up for an account).

Select the command for the sample project of your choice:

  • Sample blog
  • Multi-language website
Copy
npx prismic-cli theme --theme-url https://github.com/prismicio/gatsby-blog --conf prismic-configuration.js
Copy
npx prismic-cli theme --theme-url https://github.com/prismicio/gatsby-multi-language-site --conf prismic-configuration.js

3. Run the project

Run your project with the following command and view your published content locally.

  • npm
  • Yarn
Copy
npm start
Copy
yarn start

Your site is now running locally at http://localhost:8000. Now you can change the code to customize the website: edit the stylesheets, the templates, and the repository's content to fit your design.

4. Deploy the project

Refer to the dedicated deployment guide and select the option that best fits your needs:


Next steps

Suggested Articles

Now you've got a project up and running, you can jump in to the other features that Prismic has in store to make managing your content a breeze. Here are some suggested articles to read.

Build and deploy

Have your own example project to share?

If you have another example project that you think would be helpful to others, we'd be happy to share them on this page as well. Feel free to reach out to us at the Prismic forum, and we'd love to talk to you about getting your project on this page.


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.