Build a Blog using Gatsby & Prismic

Oct 4, 2020 15 min read

Share Build a Blog using Gatsby & Prismic article on different platforms.


Learn and build a blog using Gatsby Prismic Blog starter template as quickly as in 15-30 minutes.

Gatsby Prismic Blog Starter

Gatsby Prismic Blog Starter

It took almost a month to learn Gatsby & Prismic CMS and build a blog like this website. After building it, I thought of making this process quick and easy for beginners. So, I created a starter and named it as Gatsby Prismic Blog Starter. I published this starter as a NPM package and has been downloaded ~300 times.

I kindly request you to give yourself 15-30 minutes following instructions and at the end you will have a working blog using Gatsby Prismic Blog Starter template.

Gatsby Prismic Blog Starter | Home

A blog starter template developed using Gatsby and Prismic.
Gatsby Prismic Blog Starter

🧐 Instructions

⚠️Note: This blog starter uses Prismic as the Content Management System. Hence, you need to have the required data first before using this starter.

Make your website editable for the whole team - Prismic

Choose your technology. Use the API to fetch content. Empower your content team.

For detailed instructions, check this documentation.

If you are done with the Prismic setup and created the necessary data model in your Prismic project, start running the app locally by following the quick start steps.

💻 Quick start

1. Create a Gatsby site.

Use the Gatsby CLI to create a new site, specifying the default starter.

npm install -g gatsby-cli
# create a new Gatsby site using this starter
gatsby new <name>

2. Install the packages

Install the packages using the command npm install

3. Environment File

  • Go to API & Security section of your Prismic project, grab the Permanent Access Token with Access to Master.
  • The Repository Name is the name you have entered at the creation of the repository (you’ll also find it as the subdomain in the URL)
  • This project has the support for DISQUS comments section which need your DISQUS project name which can be found at https://<your-project-shortname>
  • Create an .env file in the root directory of the project. Add the following properties in it:
GA_ID=<your Google Analytics tracking ID> (Optional)
PRISMIC_REPOSITORY_NAME=<your prismic repository name> (Required)
PRISMIC_ACCESS_TOKEN=<your prismic permanent access token> (Required)
GATSBY_DISQUS_NAME=<your disqus project shortname> (Required)
GATSBY_TELEMETRY_DISABLED=1 (Optional to disable GATSBY analytics)

4. Start developing.

Navigate into your new site’s directory and start it up.

# Go to project directory
cd <name>
# start the application
npm run start

5. Open the source code and start editing!

Your site is now running at http://localhost:8000!

Open the name directory in your code editor of choice and edit gatsby-config.js. Save your changes and the browser will update in real time!

Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

Apart from instructions, check out the tech stack behind the blog.

🔌 Technology

  • SASS - CSS preprocessor language
  • React - A JavaScript based UI library
  • NodeJS - Server-side JavaScript runtime environment

🧰 Tools

  • Gatsby - React based framework for generating static sites
  • Prismic - Headless CMS
  • Theme UI - Graph based design framework for designing UI
  • Vercel - A cloud platform for deploying static sites and Serverless Functions
  • Google Analytics - Analysis of website traffic and user behavior
  • Hotjar - User behavior analytics
GraphQL: A query language for APIs.

GraphQL provides a complete description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

Gatsby is a React-based open source framework with performance, scalability and security built-in. Collaborate, build and deploy 1000x faster with Gatsby Cloud.

That's it, you can now use this starter following the above instructions to build a blog similar to this website or customize as your wish to create a new blog website of your choice.


Please don't forget to ask any questions or share your experience building a blog using the above starter in the comments section.

This article was last updated on Nov 14, 2020






Theme UI

ShareShare this article on different platforms.

Sai Nikhil - Photo

Sai Nikhil

A passionate developer who brings creative ideas from areas, including networking & data storage, security, UI/UX design, and progressive web applications with a strong understanding of the entire web development process.

Related Articles

NextJS Prismic Blog Starter

Build a Blog using NextJS & Prismic

Learn and build a blog using NextJS Prismic Blog starter template as quickl... Read Full Article


Dec 1, 2020| 15 min read

Prismic Webhooks

Prismic Webhooks

A Prismic Webhook allow you to automatically or manually trigger a deployme... Read Full Article

Oct 8, 2020| 3 min read

Theme UI - Themes

Build custom themes using Theme UI

Build themes for any JavaScript application using Theme UI. Read Full Article

Oct 3, 2020| 5 min read