Quick Start

Get your site connected to DCS in just a few minutes. This guide covers the essential steps for both site owners and partners.

For Site Owners

If your site is already set up on DCS, you can start managing content immediately:

1. Access the Portal

Navigate to portal.duffcloudservices.com and sign in with your Microsoft account.

2. Select Your Site

From the dashboard, click on your site to open the Site Manager.

3. Start Editing

• Text Content — Click "Text Overrides" to edit any text on your site
• SEO Settings — Click "SEO & Metadata" to update page titles and descriptions
• Blog Posts — Click "Blog" to create or edit posts

Changes to text and SEO are applied immediately. Blog posts can be saved as drafts or published.

For Partners

Setting up a new site integration is streamlined with the official npm packages:

1. Prerequisites

Ensure you have:

• A VitePress-based website (or compatible Vue framework)
• Access to the site's GitHub repository
• Node.js >= 18.0.0
• A DCS partner account

2. Install the CLI

Install the DCS CLI globally:

npm install -g @duffcloudservices/cli

3. Authenticate

dcs login

Follow the prompts to sign in with Google OAuth.

4. Initialize Your Site

Navigate to your site's repository and run:

cd /path/to/your-site
dcs init --site-slug your-site-slug --site-name "Your Site Name"

This creates all necessary configuration files in .dcs/ and integration guides in .plans/.

5. Install the CMS Package

pnpm add @duffcloudservices/cms

6. Configure Vite Plugins

For VitePress sites, update .vitepress/config.ts:

import { defineConfig } from 'vitepress'
import { dcsContentPlugin, dcsSeoPlugin } from '@duffcloudservices/cms/plugins'

export default defineConfig({
  vite: {
    plugins: [
      dcsContentPlugin(),
      dcsSeoPlugin()
    ]
  }
})

7. Use the Composables

Replace manual text content handling with the official composable:

<script setup lang="ts">
import { useTextContent, useSEO } from '@duffcloudservices/cms'

const { t } = useTextContent({
  pageSlug: 'home',
  defaults: {
    'hero.title': 'Welcome to Our Site',
    'hero.description': 'Default description text'
  }
})

// Apply SEO meta tags
const { applyHead } = useSEO('home')
applyHead()
</script>

<template>
  <h1>{{ t('hero.title') }}</h1>
  <p>{{ t('hero.description') }}</p>
</template>

8. Validate Configuration

dcs validate

9. Set Up GitHub Integration

Add the required secrets to your GitHub repository:

# Required secrets
AZURE_CLIENT_ID=<your-client-id>
AZURE_CLIENT_SECRET=<your-client-secret>
AZURE_TENANT_ID=<your-tenant-id>
AZURE_SUBSCRIPTION_ID=<your-subscription-id>
DCS_SERVER_URL=https://portal.duffcloudservices.com

10. Register with DCS

Contact the DCS team to complete site registration, which includes:

• Creating the site record in the portal
• Setting up Azure Static Web Apps resources
• Configuring deployment workflows

Verifying Your Setup

Test Text Overrides

1. Log into the portal and navigate to your site
2. Go to "Text Overrides"
3. Create an override for one of your text keys
4. Refresh your site — you should see the new text

Test Development Requests

1. Go to "Development Requests"
2. Click "New Request"
3. Describe a simple change (e.g., "Change the button color to blue")
4. Submit and watch the automation in action

Next Steps

• Core Concepts — Understand how DCS works under the hood
• Partner Onboarding Guide — Complete walkthrough for new sites
• CMS Package Reference — Full API documentation
• CLI Package Reference — All commands and options
• Portal Guide — Learn all the portal features