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.

Requirements

Stackbit sites are Next.js projects using local markdown files as the data source (i.e. Git CMS). They require Node v14 or later.

Our business and enterprise tiers offer additional content sources (i.e. two-way sync with headless CMS), along with other site frameworks (e.g. Gatsby). Contact us for details.

This tutorial assumes you know the basics of Next.js, which also means some familiarity with React and JavaScript. If not, you can still follow along, though we may skip some of the basics.

Setup & Installation

Begin by opening your command-line application and running this command:

npx create-stackbit-app

The starter will be cloned to a my-stackbit-site directory, and the dependencies will be installed. 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

With the Next.js server running, you can boot Stackbit dev in a new tab/window in your command line application.

npm run stackbit-dev

Lessons

Each lesson in the tutorial is focused on an over-arching topic that 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.