Getting Started

Through this tutorial you will learn the basics of Stackbit. After completing the lessons, you'll have the confidence to take what you've built and make it your own.

Using our minimal Next.js starter, we'll build a simple blog site that can be edited in context using Stackbit's local visual editor. This starter and tutorial use local markdown and JSON files as the content source.

Requirements

The following is required for running this tutorial:

• Browser: Google Chrome
• Node: v14 or later
• Experience: Strong understanding of JavaScript, along with the basics of React and Next.js.

Setup & Installation

Let's begin by getting the project running on your machine.

Create New Project from the Minimal JS Starter

Open your command-line application and running this command:

npx create-stackbit-app@latest

The starter will be cloned to a directory called my-stackbit-app and the dependencies will be installed.

Run Next.js Development Server

Change into the project directory after the process is complete and then start the Next.js development server.

cd my-stackbit-site
npm run dev

To check that this is working properly, you can open localhost:3000 in a browser and see that the Stackbit site is running.

Run Stackbit CLI

With the Next.js server running, it's time to install & run our command-line tool stackbit, which will allow the visual editor to connect to your local server.

Open a new terminal window and run:

npm i -g @stackbit/cli@latest

Then, run the dev sub-command in the same directory as your new project:

cd my-stackbit-site
stackbit dev

The stackbit dev command outputs a URL to the visual editor.

Open this URL in your browser to start editing your local site within the visual editor. You can bookmark this link — it will serve you in all locally-developed projects.

If you haven't registered or signed in yet, you'll be prompted to do so at this point. Once signed in, you will be redirected to the visual editor.

Summary of Development Process

You should be in a state similar to this:

• The Next.js development server is running locally at port 3000.
• stackbit dev is running and has printed out a URL for you.

Lessons

Now that you're up and running, you are ready to jump into individual lessons. Each lesson in the tutorial will add a new feature to the blog while introducing you to core Stackbit features and concepts.

The end of each lesson will show a table of contents, along with a button to the next and previous lessons, as shown below.