[go: up one dir, main page]
Skip to content
Ownable Docs

Ownable CMS

Ownable CMS is a Visual Studio Code extension that lets you configure your entire site through an intuitive visual interface - no YAML editing required.

Install Ownable CMS

Section titled “Install Ownable CMS”

  1. Open VS Code

    Launch Visual Studio Code (desktop or GitHub Codespaces)

  2. Install the extension

    • Open Extensions (Cmd/Ctrl + Shift + X)
    • Search for “Ownable CMS”
    • Click Install

    Or install from marketplace →

  3. Open your site folder

    File → Open Folder → Select your Ownable site directory

  4. The extension activates automatically

    The extension detects your Ownable site and activates

Features

Section titled “Features”

🎨 Visual Theme Editor

Pick colors, fonts, and spacing with dropdowns and color pickers - no hex codes or YAML syntax needed.

🚀 Quick Setup Wizard

Answer a few questions and Studio generates your complete configuration automatically.

✨ Live Preview

See changes instantly with real-time validation and helpful error messages.

🪄 Fix-It Bot (Plus)

Automatically format and lint Markdown + YAML across your entire site. Great for long-lived, messy repos and multi-author teams (early access).

đź’ľ Auto-Save

Changes are automatically saved to your params.yaml - no manual file editing.

What You Can Configure

Section titled “What You Can Configure”

Ownable CMS provides visual editors for all site settings:

Identity & Branding

Section titled “Identity & Branding”
  • Site name and organization
  • Tagline and description
  • Social media handles (for meta tags)
  • Schema.org type

Theme & Appearance

Section titled “Theme & Appearance”
  • Color mode (light/dark/system)
  • Theme pack selection (visual preview)
  • Custom brand colors
  • Typography (fonts and sizes)
  • Layout (spacing and border radius)
Section titled “Navigation”
  • Header style and alignment
  • Search toggle
  • Theme switcher
  • Language selector
  • Call-to-action button

Content Features

Section titled “Content Features”
  • Math rendering
  • Table of contents
  • Reading time estimates
  • Citation styles

Integrations

Section titled “Integrations”
  • Analytics providers (GA4, Plausible, etc.)
  • Comment systems (Giscus, Disqus)
  • Search configuration
  • Repository edit links

Advanced

Section titled “Advanced”
  • Security headers
  • Privacy settings
  • Debug tools
  • Plus features

Quick Start Wizard

Section titled “Quick Start Wizard”

First time using Ownable CMS? The Quick Setup wizard guides you through essentials:

  1. Tell us about your site

    • Your name
    • Site type (personal/lab/startup)
    • Description

  2. Choose your look

    • Pick a theme pack (visual preview)
    • Select fonts
    • Set spacing preference

  3. Enable features

    • Search
    • Comments
    • Analytics

  4. Done!

    • Ownable CMS generates your complete configuration
    • Start customizing from there

Using Ownable CMS

Section titled “Using Ownable CMS”

Open the Configurator

Section titled “Open the Configurator”

After installation, access the CMS in several ways:

  • Sidebar icon: Click the Ownable icon in the Activity Bar
  • Command Palette: Cmd/Ctrl + Shift + P → “Ownable: Open Configurator”
  • Status bar: Click “Ownable” in the bottom status bar

Visual Configuration Editor

Section titled “Navigate Sections”

Ownable CMS organizes settings into logical sections:

🏠 Quick Setup        (Wizard)
👤 Identity           (Name, description)
🎨 Appearance         (Themes, colors)
🧭 Navigation         (Header, footer)
đź“ť Content            (Math, citations)
🔍 Search & SEO       (Search, meta tags)
đź“Š Analytics          (GA, Plausible)
🔌 Integrations       (Comments, repo)
⚙️  Advanced          (Security, debug)
đź“„ View YAML          (Raw editor)

Make Changes

Section titled “Make Changes”
  1. Click a section to open its settings
  2. Edit visually using form fields, dropdowns, toggles
  3. See inline help - hover any field for documentation
  4. Auto-saves - changes are saved automatically after 1 second
  5. Validates - errors shown inline with fix suggestions

Theme Pack Selector

Section titled “Theme Pack Selector”

One of the best features - visually preview and select theme packs:

Theme Selector

How It Works

Section titled “How It Works”
  1. Open Appearance section
  2. Click Choose Theme Pack
  3. See visual previews of all themes
  4. Click a theme to apply instantly
  5. Mix & match light/dark modes

Available Themes

Section titled “Available Themes”

Professional:

  • Default - Modern indigo/emerald
  • Minimal - GitHub-inspired clean
  • Solar - Easy-reading yellowish/teal
  • Contrast - High accessibility

Creative:

  • Coffee - Warm latte/Americano
  • Matcha - Fresh organic greens
  • Marine - Ocean blues and teals
  • Retro - Vintage warm palette

Bold:

  • Dracula - Popular dark theme
  • Synthwave - Neon cyberpunk
  • Cupcake - Playful pastels

Color Picker

Section titled “Color Picker”

Ownable CMS includes an intuitive color picker:

Pick from Tailwind Palettes

Section titled “Pick from Tailwind Palettes”

Click a color swatch to choose from Tailwind’s professionally-designed palettes:

  • Red, Orange, Amber, Yellow, Lime, Green, Emerald, Teal, Cyan
  • Sky, Blue, Indigo, Violet, Purple, Fuchsia, Pink, Rose
  • Slate, Gray, Zinc, Neutral, Stone

Or Enter Custom Hex

Section titled “Or Enter Custom Hex”

Type any hex code for your exact brand colors. Studio automatically generates the full color scale (50-950 shades).

Validation & Errors

Section titled “Validation & Errors”

Ownable CMS validates your configuration in real-time:

Inline Error Messages

Section titled “Inline Error Messages”
  • See errors immediately as you type
  • Helpful suggestions for fixes
  • Examples of valid values

Common Validations

Section titled “Common Validations”
  • Twitter handles (without @)
  • Google Analytics IDs (G-XXXXXXXXXX format)
  • Email addresses
  • URLs
  • Required fields

GitHub Codespaces

Section titled “GitHub Codespaces”

Ownable CMS works perfectly in GitHub Codespaces for cloud-based editing:

Setup

Section titled “Setup”
  1. Create Codespace from your repository
  2. Wait for container to build
  3. Install Ownable CMS from Extensions
  4. Open configurator and start editing
  5. Commit and push from Codespaces

Benefits

Section titled “Benefits”
  • No local setup required
  • Consistent environment
  • Edit from anywhere
  • Perfect for collaboration
  • Free for 60 hours/month

FAQs

Section titled “FAQs”

Does Ownable CMS work offline?

Section titled “Does Ownable CMS work offline?”

Yes! Ownable CMS is a local VS Code extension. You only need internet for initial installation.

Can I still edit YAML manually?

Section titled “Can I still edit YAML manually?”

Absolutely! Ownable CMS and manual YAML editing work together. Click “View YAML” to switch to raw editing.

Does Ownable CMS preserve my YAML comments?

Section titled “Does Ownable CMS preserve my YAML comments?”

Yes! The extension preserves comments and formatting when saving changes.

What if Ownable CMS can’t detect my site?

Section titled “What if Ownable CMS can’t detect my site?”

The extension looks for:

  • hugoblox.yaml in your project root
  • config/_default/params.yaml with hugoblox: key
  • Requires Ownable v0.11.0+

If not detected, you may need to upgrade: npx hugoblox@latest upgrade

Is Studio free?

Section titled “Is Studio free?”

Yes! Ownable CMS is free for all users.

Next Steps

Section titled “Next Steps”
Configuration Reference Understand all available settings
Fix-It Bot (Plus) Automatically clean up Markdown + YAML across your site and keep builds healthy.
Theming Guide Deep dive into themes and colors
Content Editing Choose your writing workflow
Deploy Your Site Go live with Netlify or Vercel

Support

Section titled “Support”

Need help with Ownable CMS?

  • Discord: Join the Ownable community
  • GitHub: Report issues or request features
  • Docs: Browse the complete reference