Gatsby Starter Blog Setup Guide

This guide shows you how to get started quickly with a working Gatsby site configured to a Plasmic project.

Install the Gatsby CLI

yarn global add gatsby-cli
# or: npm install -g gatsby-cli

This command will install gatsby globally on your machine.

Create a new site

gatsby new gatsby-site https://github.com/plasmicapp/gatsby-starter-blog

Start with a copy of our starter template repo, stored locally at gatsby-site/.

Change directories into the site folder

cd gatsby-site

Clone the Plasmic “Starter Blog” project

Log into the dashboard and click on the “Starter Blog” tile to clone the project into your own workspace.

Copy your project ID

You’ll be redirected to your own copy of the Starter Blog project in Plasmic Studio.

We’ll come back to this. For now, just take note of your project ID in the URL.

For example, the project ID would be mFAsLqNxNEGutPWEihQds in the following:

https://studio.plasmic.app/projects/mFAsLqNxNEGutPWEihQds

Configure the Plasmic loader

As part of the starter project, we’ve already added @plasmicapp/loader as a dependency. To configure the loader to use your project, open gatsby-config.js and update the plugin configuration with the project ID of your copy of Starter Blog.

{
  resolve: `@plasmicapp/loader/gatsby`,
  options: {
    dir: __dirname, // The root directory of your project.
    projects: ["some-project-id"], // An array of project ids.  },
},

Authenticate with Plasmic

If you do not yet have Plasmic credentials stored in ~/.plasmic.auth, you can easily authenticate your system by running the following:

npx -p @plasmicapp/cli -c "plasmic auth"

Start your development server

gatsby develop

As part of the development server, the Plasmic loader plugin will automatically sync your Plasmic components into a hidden folder .plasmic/, which we currently .gitignore.

Gatsby will build your site and start a hot-reloading development environment. By default, this is accessible at http://localhost:8000.

For more commands, see the Gatsby documentation.

Next steps

For a quick tour of what’s going on in the repository, check out the Starter Blog tour.

Or skip ahead to one of the guides to customize your website.