Duff Cloud Services Docs

Appearance

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. Google sign-in is always available; GitHub and passkey (WebAuthn) sign-in are also supported, and Microsoft sign-in is offered where enabled.

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

Text and SEO edits are made in the visual editor and queued for the next deployment — Save records your change; it goes live when the site is deployed. 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:

bash
npm install -g @duffcloudservices/cli

3. Authenticate ​

bash
dcs login

Follow the prompts to sign in with Google OAuth.

4. Initialize Your Site ​

Navigate to your site's repository and run:

bash
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 ​

bash
pnpm add @duffcloudservices/cms

6. Configure Vite Plugins ​

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

typescript
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:

vue
<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 ​

bash
dcs validate

9. Set Up GitHub Integration ​

Deployment uses OIDC federated credentials — no long-lived Azure secret is stored in the repo. dcs init writes the three non-secret Azure identifiers into .dcs/site.yaml; you can alternatively set them as repository Variables:

bash
# Repository Variables (not Secrets) — or set these in .dcs/site.yaml
AZURE_CLIENT_ID=<app-registration-client-id>
AZURE_TENANT_ID=<your-tenant-id>
AZURE_SUBSCRIPTION_ID=<your-subscription-id>

The generated deploy workflow authenticates with azure/login@v2 and requires permissions: id-token: write. See GitHub Setup for the federated-credential setup.

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 ​