First Project

First, install pnpm - a fast, disk space efficient package manager that's an alternative to npm. It's better than npm because it uses symlinks to avoid duplicating dependencies, resulting in faster installs and less disk usage.

npm install -g pnpm

Check the .leadcms/content/ directory. You’ll see files such as home.mdx and projects/*.mdx that store the content for the homepage and portfolio projects. Each file contains front matter defining its type (e.g. home or project), slug and other metadata.

pnpm exec next dev --webpack

This runs the Next.js development server and uses the local content files. Open http://localhost:3000 and you should see the portfolio site with the home page and projects loaded from .leadcms/content.

Navigate through the site. The home page and each project page should render correctly. Because no CMS integration is configured yet, the site is entirely static and does not contact any external services.

pnpm exec leadcms init

This command prompts you for your LeadCMS URL (e.g. https://localhost:8080 if you're running LeadCMS locally). It auto‑detects the default language and creates a .env file with LEADCMS_URL and LEADCMS_DEFAULT_LANGUAGE. You can skip authentication for read‑only mode, but to push content you'll need an API key, which the wizard can store securely in .env.

Authentication is optional for many use cases - if you only need to pull public content to render your site, you can skip this step. However, since we'll be pushing the portfolio content to your LeadCMS instance, authentication is required.

The leadcms init command includes integrated authentication. When prompted "Would you like to authenticate now?", select Yes to complete the device-based authentication flow. This will save your API key to .env.

During the init command execution, keep all the proposed values as defaults (content directory, media directory, etc.) by pressing Enter when prompted.

If you skipped authentication during init, you can authenticate later by running:

pnpm exec leadcms login

After initialisation, open .env in your editor. It should include:

LEADCMS_URL=http://localhost:8080
LEADCMS_DEFAULT_LANGUAGE=en
LEADCMS_API_KEY=your-api-key

Before pushing content, you can preview what changes will be made:

pnpm exec leadcms status

This shows the sync status between local and remote content. For a detailed preview of the changes:

pnpm exec leadcms status --preview

This will show you exactly what content will be created, updated, or deleted.

pnpm exec leadcms push

The CLI analyses your local content (MDX/JSON files) and compares it with the remote CMS. If the required content types (home and project) don't exist, it prompts you to create them. Accept the prompts to automatically create the types with default settings. Once complete, your LeadCMS instance will have the demo content imported.

Open your LeadCMS admin UI (e.g. http://localhost:8080), navigate to Content and confirm that the home page and several project entries have been created. You can preview each content item and make changes.

pnpm run dev

The script runs leadcms pull to sync content from your CMS and then starts the dev server. If the local and remote content are already in sync, it simply starts the server. Open http://localhost:3000 again - the site should look identical to before, but it's now sourcing content from LeadCMS.

Open the home page or any project in LeadCMS. Change the title or description and click Save. Your CMS now has a new version of the content.

In your project directory, run:

pnpm exec leadcms pull

This downloads changes from the CMS into your .leadcms/content directory. If you're running the dev server, restart it to see the updated content.

For production builds, run:

pnpm run build

The build script fetches remote content, generates static HTML for each page and writes it to the out directory. You can then deploy the static output or containerise it (see Static Export and Docker Image).