Starters

Here you'll find all the starter projects 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 your starter project if it fits your needs!


1. Choose a sample project

Both of these sample projects use have the preview setup with gatsby-plugin-prismic-previews and pull data from your newly created repositories with the source plugin gatsby-source-prismic.

Sample blog

The content modeling for this sample blog has two Custom Types: bloghome and post. It has built-in pagination that you can customize to your needs.

Multilanguage site

The content modeling for this sample blog has three Custom Types: homepage, post, and menu. And two initial languages that you can explore with the built-in language switcher. You can add any additional languages to your repository.

Sample Gatsby blog
BlogSample blog

Minimalist blog with a full-featured editor.

Sample Gatsby multi-language site

Multi-language 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. Install the Prismic CLI (command-line interface). This tool will allow you to interact with Prismic from your local machine.
  2. Run the theme command. It'll 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
Sample blog
Copy
npx prismic-cli@latest theme --theme-url https://github.com/prismicio/gatsby-blog --conf prismic-configuration.js
Multi-language website
Copy
npx prismic-cli@latest 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
npm
Copy
npm start
Yarn
Copy
yarn start

Your site is now running locally at http://localhost:8000. 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

You can publish your newly created site right away, refer to the dedicated deployment guide and select the option that best fits your needs:


Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.