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.
The business and enterprise tiers offer support for remote content sources and additional site frameworks. Contact us for details.
The following is required for running this tutorial:
- Browser: Google Chrome
- Node: v14 or later
Let's begin by getting the project running on your machine.
Open your command-line application and running this command:
The starter will be cloned to a directory called
my-stackbit-app 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
To check that this is working properly, you can open localhost:3000 in a browser and see that the Stackbit site is running.
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
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.
You should be in a state similar to this:
- The Next.js development server is running locally at port 3000.
stackbit devis running and has printed out a URL for you.
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.
Getting Started Lessons