Back to Templates

Payload Website Starter

A comprehensive website template powered by PayloadCMS and MongoDB, featuring a modern front-end interface and complete content management capabilities.

View Demo
FrameworkNext.js
Use CaseStarter
CMSPayload
A comprehensive website template powered by PayloadCMS and MongoDB, featuring a modern front-end interface and complete content management capabilities.

Payload CMS with MongoDB

This is a PayloadCMS with MongoDB Website Template designed to power websites, blogs, or portfolios ranging from small projects to enterprise-level applications. This repository includes a fully functional backend, an enterprise-grade admin panel, and a beautifully designed, production-ready website.

This template is right for you if you are working on:

  • A personal or enterprise-grade website, blog, or portfolio
  • A content publishing platform with a fully featured publication workflow
  • Exploring the capabilities of Payload

Core features:

  • Pre-configured Payload Config
  • Authentication
  • Access Control
  • Layout Builder
  • Draft Preview
  • Live Preview
  • On-demand Revalidation
  • SEO
  • Form
  • Search
  • Redirects
  • Website

Local Development

  1. Create a .env file and configure the variables:
# Database connection string
DATABASE_URI=YOUR_MONGODB_URL_HERE
# Used to encrypt JWT tokens. This should be a long, unguessable, strong password. You can use a password manager to generate one.
PAYLOAD_SECRET=YOUR_PAYLOAD_SECRET_HERE
# Used to configure CORS, format links, and more. No trailing slash.
NEXT_PUBLIC_SERVER_URL=http://localhost:3000
# S3 Storage Configuratio, Storage of uploaded files
S3_BUCKET=xxx
S3_REGION=xxx
S3_ACCESS_KEY_ID=xxx
S3_SECRET_ACCESS_KEY=xxx
S3_ENDPOINT=xxx
  1. pnpm install && pnpm dev to install dependencies and start the dev server
  2. open http://localhost:3000 to open the app in your browser

How it works

The Payload config is tailored specifically to the needs of most websites. It is pre-configured in the following ways:

payloadcms dashboard

Collections

See the Collections docs for details on how to extend this functionality.

  • Users (Authentication)

    Users are auth-enabled collections that have access to the admin panel and unpublished content. See Access Control for more details.

    For additional help, see the official Auth Example or the Authentication docs.

  • Posts

    Posts are used to generate blog posts, news articles, or any other type of content that is published over time. All posts are layout builder enabled so you can generate unique layouts for each post using layout-building blocks, see Layout Builder(#layout-builder) for more details. Posts are also draft-enabled so you can preview them before publishing them to your website.

  • Pages

    All pages are layout builder enabled so you can generate unique layouts for each page using layout-building blocks. Pages are also draft-enabled so you can preview them before publishing them to your website.

  • Media

    This is the uploads enabled collection used by pages, posts, and projects to contain media like images, videos, downloads, and other assets. It features pre-configured sizes, focal point and manual resizing to help you manage your pictures.

  • Categories

    A taxonomy used to group posts together. Categories can be nested inside of one another, for example "News > Technology". See the official Payload Nested Docs Plugin for more details.

  • Forms & Form Submissions

    This template also pre-configured with the official Form Builder Plugin. This plugin allows you to build and manage custom forms directly within the Admin Panel, all form submissions are stored directly in your database and are managed directly from the Admin Panel.

  • Redirects

    If you are migrating an existing site or moving content to a new URL, you can use the redirects collection to create a proper redirect from old URLs to new ones. This will ensure that proper request status codes are returned to search engines and that your users are not left with a broken link. This template comes pre-configured with the official Payload Redirects Plugin for complete redirect control from the admin panel.

  • Search

    This template also pre-configured with the official Payload Search Plugin to showcase how SSR search features can easily be implemented into Next.js with Payload.

Globals

See the Globals docs for details on how to extend this functionality.

  • Header

    The data required by the header on your front-end like nav links.

  • Footer

    Same as above but for the footer of your site.

Access control

Basic access control is setup to limit access to various content based based on publishing status.

  • users: Users can access the admin panel and create or edit content.
  • posts: Everyone can access published posts, but only users can create, update, or delete them.
  • pages: Everyone can access published pages, but only users can create, update, or delete them.

For more details on how to extend this functionality, see the Payload Access Control docs.

See Payload Docs for more details.