Lore Studio

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

The Easy Way

Prefer visual configuration over editing YAML files? Studio is designed specifically for researchers and scientists who want to customize their site without memorizing configuration syntax.

---

Install Studio

1. Open VS Code

   Launch Visual Studio Code (desktop or GitHub Codespaces)

2. Install the extension

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

   Or install from marketplace →

3. Open your site folder

   File → Open Folder → Select your HugoBlox site directory

4. Studio activates automatically

   The extension detects your HugoBlox site and activates

注意

Requirements:

• VS Code 1.85.0+
• HugoBlox v0.11.0+
• Your site folder open in VS Code

---

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 (Pro)

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

Studio provides visual editors for all site settings:

Identity & Branding

• Site name and organization
• Tagline and description
• Social media handles (for meta tags)
• Schema.org type

Theme & Appearance

• Color mode (light/dark/system)
• Theme pack selection (visual preview)
• Custom brand colors
• Typography (fonts and sizes)
• Layout (spacing and border radius)

Navigation

• Header style and alignment
• Search toggle
• Theme switcher
• Language selector
• Call-to-action button

Content Features

• Math rendering
• Table of contents
• Reading time estimates
• Citation styles

Integrations

• Analytics providers (GA4, Plausible, etc.)
• Comment systems (Giscus, Disqus)
• Search configuration
• Repository edit links

Advanced

• Security headers
• Privacy settings
• Debug tools
• Pro features

---

Quick Start Wizard

First time using Studio? 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!

   • Studio generates your complete configuration
   • Start customizing from there

注意

You can skip the wizard and configure everything manually in the visual editor panels.

---

Using Studio

Open the Configurator

After installation, access Studio in several ways:

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

Navigate Sections

Studio 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

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

提示

All changes are written to config/_default/params.yaml. You can always switch to the YAML view to see or edit the raw configuration.

---

Theme Pack Selector

One of Studio’s best features - visually preview and select theme packs:

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

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

Studio includes an intuitive color picker:

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

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

---

Validation & Errors

Studio validates your configuration in real-time:

Inline Error Messages

• See errors immediately as you type
• Helpful suggestions for fixes
• Examples of valid values

Common Validations

• Twitter handles (without @)
• Google Analytics IDs (G-XXXXXXXXXX format)
• Email addresses
• URLs
• Required fields

---

GitHub Codespaces

Studio works perfectly in GitHub Codespaces for cloud-based editing:

Setup

1. Create Codespace from your repository
2. Wait for container to build
3. Install Lore Studio from Extensions
4. Open configurator and start editing
5. Commit and push from Codespaces

Benefits

• No local setup required
• Consistent environment
• Edit from anywhere
• Perfect for collaboration
• Free for 60 hours/month

---

FAQs

Does Studio work offline?

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

Can I still edit YAML manually?

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

Does Studio preserve my YAML comments?

Yes! Studio preserves comments and formatting when saving changes.

What if Studio can’t detect my site?

Studio looks for:

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

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

Is Studio free?

Yes! Lore Studio is free for all users.

---

Next Steps

Configuration Reference Understand all available settings

Fix-It Bot (Pro) 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

Need help with Studio?

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

注意

Studio is actively developed. New features are added regularly. Check the marketplace page for updates.