Visual Studio Code (VS Code)

Visual Studio Code (VS Code) is the recommended editor for HugoBlox. While you can edit raw files directly, we recommend installing HugoBlox Studio to configure your site visually.

✨ HugoBlox Studio

No YAML required!

The Studio extension provides a graphical user interface (GUI) for your configuration files. Change themes, update your bio, and toggle features using simple forms instead of editing complex YAML.

1. Install the Extension

   Search for “HugoBlox” in the Extensions marketplace or click below:

   Install HugoBlox Studio →

2. Open the Configurator

   Click the HugoBlox icon (H) in the Activity Bar (left sidebar).

3. Edit Visually

   Select a section like Appearance or Identity to start customizing. Changes are auto-saved!

---

⚡️ Power User Workflow

Prefer raw code? VS Code is fantastic for that too.

1. Split View: Open params.yaml on the left and your live preview on the right.
2. IntelliSense: HugoBlox config files have built-in schema support, giving you autocomplete and validation errors if you type an invalid key.
3. Terminal: Run hugo server in the integrated terminal (Ctrl + ~) to see build logs in real-time.

Learn more about Studio Deep dive into all the visual configuration features.