Skip to main content

Steps to create a new brand

Follow these steps to add a new brand to the repository and set it up for deployment on Cloudflare Pages.

1. Create Brand Assets​

Create a new directory in brands/ with your brand name (e.g., brands/acme/). Inside this directory, you need to create the following files:

Configuration (config.json)​

Create a config.json file to control the site metadata.

{
  "title": "Brand Name Docs",
  "tagline": "The Brand Tagline",
  "url": "https://docs.brand.com",
  "organizationName": "brand-org",
  "projectName": "brand-docs",
  "logo": {
    "src": "brand-logo.png",
    "alt": "Brand Logo"
  }
}

Styling (custom.css)​

Create a custom.css file to override the default Docusaurus Infima variables. This is where you define the brand's color palette.

Example:

:root {
  --ifm-color-primary: #25c2a0;
  --ifm-color-primary-dark: #21af90;
  --ifm-color-primary-darker: #1fa588;
  --ifm-color-primary-darkest: #1a8870;
  --ifm-color-primary-light: #29d5b0;
  --ifm-color-primary-lighter: #32d8b4;
  --ifm-color-primary-lightest: #4fddbf;
}

Add your brand's logo image (e.g., brand-logo.png or logo.svg) to the folder. Ensure the filename matches what you put in config.json.

2. Test the Build​

To test the build locally, you should add a convenience script to package.json for your new brand, or use the serve command.

Add the following to the scripts section of package.json:

"build:newbrand": "node build-brand.js newbrand --out-dir dist/newbrand",
"serve:newbrand": "pnpx serve dist/newbrand"

Run Locally​

First, build the brand:

pnpm run build:newbrand

Then, serve it to preview:

pnpm run serve:newbrand

3. Cloudflare Pages Setup​

To deploy this new brand to Cloudflare Pages:

  1. Log in to your Cloudflare Dashboard and go to Workers & Pages.
  2. Click Create application.
  3. Go to the Pages tab and click Connect to Git.
  4. Select this repository.
  5. Configure the build settings:
    • Project Name: e.g., docs-<new-brand-name>
    • Production Branch: main (or your default branch)
    • Framework Preset: None.
    • Build command: exit 0 (Since we build locally and push the artifacts).
    • Build output directory: dist/<new-brand-name>
  6. Click Save and Deploy.

Multiple Brands​

We host multiple brands from this single repository. For each new brand, you will create a separate Cloudflare Pages project as described above. Each project will point to the same repository but will have a unique Build output directory (e.g., dist/acme, dist/beta, dist/book).