Repository files navigation

AddNetlify CMS’s admin dashboardto anyAstro project

npm i astro-netlify-cms

This is an integration for theAstro site builder,which adds support forNetlify CMS, anopen-source, Git-based content management system.

Adding the integration will:

• Add the Netlify CMS dashboard at/admin (or another route if you prefer)
• Inject Netlify’sIdentity Widget across your site to support logging in to the admin app
• Run alocal proxy server indev mode to allow local content updates via the CMS

Usually each of these requires individual set up and configuration. Using this integration, you configure your CMS once inastro.config.mjs, sit back, and enjoy!

Looking for a quick way to get started?Try out the Blog Starter with Netlify CMS →

To add Netlify CMS to your project, import and use the integration in yourAstro config file, adding it to theintegrations array.

// astro.config.mjsimport{defineConfig}from'astro/config';importNetlifyCMSfrom'astro-netlify-cms';exportdefaultdefineConfig({integrations:[NetlifyCMS({config:{backend:{name:'git-gateway',branch:'main',},collections:[// Content collections],},}),],});

You can pass an options object to the integration to configure how it behaves.

Type:string
Default:'/admin'

Determines the route where the Netlify CMS admin dashboard will be available on your site.

Feeling nostalgic for WordPress? You could set this to'/wp-admin'!

Type:CmsConfig

This option isrequired. It allows you to configure Netlify CMS with thesame options you would use when using Netlify CMS’sconfig.yml file format.

You can seea full list of configuration options in the Netlify CMS docs.

At a minimum, youmust set thebackend andcollections options:

config:{// Use Netlify’s “Git Gateway” authentication and target our default branchbackend:{name:'git-gateway',branch:'main',},collections:[// Define a blog post collection{name:'posts',label:'Blog Posts',folder:'src/pages/posts',create:true,delete:true,fields:[{name:'title',widget:'string',label:'Post Title'},{name:'body',widget:'markdown',label:'Post Body'},],},],};

Type:Array<string | [string, { raw: true }]>

Sets custom CSS styles to apply in the Netlify CMS preview pane.

You can provide URLs to external CSS stylesheets (Google Fonts for example), paths to local CSS files in your project, or even raw CSS strings:

previewStyles:[// Path to a local CSS file, relative to your project’s root directory'/src/styles/main.css',// An npm module identifier'@fontsource/roboto',// A URL to an externally hosted CSS file'https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap',// Raw CSS!['p { color: red; }',{raw:true}],];

Type:boolean
Default:false

By default,astro-netlify-cms injects Netlify’sIdentity Widget across your site to enable authentication. If you only want to inject the widget on the admin route, you can setdisableIdentityWidgetInjection: true.

• Support registering custom preview components to render content as it is edited.
• Support registering custom block components for use in the Markdown editor.