Get started with Netlify Create
Welcome to Netlify Create! Let’s get you up and running with a hands-on approach to learning Netlify Create’s core concepts. You’ll be able to take what you learn here to start a new project or bring Netlify Create into an existing site.
Tip
These tutorials are written for developers wanting to evaluate Netlify Create. If you’re more interested in Netlify Create’s editing capabilities, create a cloud project to explore.
# Where to start
- Scroll down for stack-specific tutorials if you’ve already determined the stack you’re working with.
- Use the quickstart guide below to add Netlify Create to an existing site.
- Try the HTML + JSON tutorial if you want to follow a tutorial and don’t have a stack or don’t see your preferred stack.
- Contact us with questions on any specific stack.
# Quickstart
Get started by adding Netlify Create to your project with this quickstart or by following one of our stack-specific tutorials below.
# Prerequisites
- Content stored in a headless CMS or individual files, separate from code.
- Structured content defined by a predictable shape or schema in the content source.
- Read/write access to the content source(s) via an API.
# Get started
Follow the steps below to get Netlify Create working for your site.
Tip
If you don't have an existing site, you can follow a stack-specific tutorial, or use a starter project by running npx create-stackbit-app
.
# Run site in development
Your site should be running locally using its development server.
# Set Up Netlify Create visual editor
Install Netlify Create locally on your machine:
npm install -g @stackbit/cli
Start the visual editor from your web project's root directory. Use the --port
option to specify your dev server's port (default: 3000
).
stackbit dev --port [PORT]
Netlify Create's local visual editor runs on port 8090
. If you open localhost:8090
, you'll see your site running locally. This is Netlify Create proxying to your local dev server, with a few bells and whistles to make visual editing possible.
Open localhost:8090/_stackbit
in your browser to register your local environment and enable the visual editor.
# Configure content source
To tell Netlify Create how to work with your content, add a stackbit.config.ts
file in the root of your project with the appropriate configuration.
This typically requires two development dependencies:
@stackbit/types
: For TypeScript support and easier configuration option discoverability.@stackbit/cms-[...]
: For configuring a specific content source. See supported content source integrations, or send us a message if you don’t see your preferred source listed.
Here are a few example configuration files (stackbit.config.ts
):
import { ContentfulContentSource } from "@stackbit/cms-contentful";
import { defineStackbitConfig } from "@stackbit/types";
export default defineStackbitConfig({
stackbitVersion: "~0.6.0",
contentSources: [
new ContentfulContentSource({
spaceId: process.env.CONTENTFUL_SPACE_ID!,
environment: process.env.CONTENTFUL_ENVIRONMENT!,
previewToken: process.env.CONTENTFUL_PREVIEW_TOKEN!,
accessToken: process.env.CONTENTFUL_MANAGEMENT_TOKEN!
})
]
});
import { defineStackbitConfig } from "@stackbit/types";
import { DatoCMSContentSource } from "@stackbit/cms-datocms";
export default defineStackbitConfig({
stackbitVersion: "~0.6.0",
contentSources: [
new DatoCMSContentSource({
apiToken: process.env.DATOCMS_API_TOKEN!,
projectId: process.env.DATOCMS_PROJECT_ID!
})
],
modelExtensions: [{ name: "page", type: "page", urlPath: "/{slug_field}" }]
});
import { defineStackbitConfig } from "@stackbit/types";
import { GitContentSource } from "@stackbit/cms-git";
export default defineStackbitConfig({
stackbitVersion: "~0.6.0",
contentSources: [
new GitContentSource({
rootPath: __dirname,
contentDirs: ["content"],
models: [
// ...
],
assetsConfig: {
referenceType: "static",
staticDir: "public",
uploadDir: "images",
publicPath: "/"
}
})
]
});
import { SanityContentSource } from '@stackbit/cms-sanity'
import { defineStackbitConfig } from '@stackbit/types'
export default defineStackbitConfig({
stackbitVersion: '~0.6.0',
contentSources: [
new SanityContentSource({
rootPath: __dirname,
studioPath: path.join(__dirname, 'studio'),
studioUrl: '',
projectId: process.env.SANITY_PROJECT_ID!,
token: process.env.SANITY_ACCESS_TOKEN!,
dataset: process.env.SANITY_DATASET || 'production',
}),
],
}
# Customize the editing experience
That's enough to get Netlify Create working with your content, but there's much more to explore to customize your editing environment for your team.
This is typically what developers explore next:
- Enable the sitemap navigator and basic page editing
- Create content presets for more productive content editing
- Extend a field type with content modeling
- Unlock inline editing to make changes directly in the preview
As you progress, there are more advanced features to consider:
- Localization
- When your ready to onboard your business users, create a cloud project to enable collaboration and publishing
- Control access to content, including managing custom roles
# Available tutorials
Here are a list of available tutorials. Contact us with questions or feedback along your journey.
- Gatsby + Contentful: learn the basics of Netlify Create with Gatsby as the site framework and Contentful as the content source.
- HTML + Contentful: learn the basics of Netlify Create with a basic HTML site using Contentful as the content source.
- HTML + JSON: learn the basics of Netlify Create with a basic HTML site using JSON files to store content.
- Next.js + Contentful: learn the basics of Netlify Create with Next.js as the site framework and Contentful as the content source.
- Next.js + Markdown: learn the basics of Netlify Create with Next.js as the site framework and Markdown files as the content source.
Did you find this doc useful?
Your feedback helps us improve our docs.