Quick start
Create a Payload CMS and Next.js site with a visual page builder in minutes using npx create-olgax-site, then open the editor and publish your first page.
Requirements
- Node.js 20.9 or newer
- pnpm. The scaffolder and the generated project use pnpm.
Create a site
npx create-olgax-site my-site
cd my-site
pnpm devWithout a name the CLI asks for one. The name is turned into a folder name (lowercase, hyphens).
The CLI does the setup work for you:
Copies the template
A complete Next.js, Payload and Puck project, including a README.md and a LICENSE.
Creates .env
A copy of .env.example with a freshly generated PAYLOAD_SECRET, so the site runs without manual setup.
Installs dependencies
Using pnpm install.
Seeds your data
Runs pnpm seed to create an admin user, a published homepage and a reusable cta-banner section.
If the install or the seed fails, the CLI says which command to run yourself. Nothing else is needed afterwards.
Open your site
With pnpm dev running, open http://localhost:3000.
| URL | What it is |
|---|---|
/ | Your public homepage |
/dashboard | Pages, analytics and site settings |
/home/edit | The visual page builder, here for the homepage |
/admin | The Payload admin panel: users, media, sections, webhooks, raw data |
Routes are locale-prefixed by default, so you will see /en and /en/home/edit in the address bar. You can turn
this off. See Localization.
Default login
[email protected]
ChangeMe123!Change the password
The seed creates an admin with a well-known password. Change it in /admin before you deploy anything.
Edit and publish a page
Sign in
Go to /admin and sign in. The editor and dashboard use the same session.
Open the editor
Visit /home/edit, or click Edit this page on the live site (it appears for signed-in editors).
Add and arrange blocks
Drag blocks from the left panel onto the canvas. Select one to edit its fields on the right.
Publish
Changes autosave as a draft. Click Publish to put them on the live site.
If the homepage says "doesn't have a homepage yet"
The seed did not run. Run pnpm seed, or sign in and create a page with the slug home and publish it. The
homepage is always the published page whose slug is home.
Next steps
Questions, ideas or something not working?
Ask in our official Discord, open an issue on GitHub, or edit this page.
Introduction
Olgax DXP is an open-source, self-hostable page builder for Payload CMS and Next.js. Learn what it is, how it fits together and where to start.
Project structure
A tour of a project generated by create-olgax-site - the Next.js routes, Payload config, custom blocks folder, scripts and the files you will edit most.