Skip to content
HugoBlox Docs

Step 2: Cloud Editor

Now that your site exists, let’s edit it. Instead of installing Git, Hugo, and Node.js on your computer, we’ll use GitHub Codespaces—a powerful VS Code environment that runs in your browser.

  1. Go to your Repository

    Navigate to your new repository on GitHub (e.g., https://github.com/username/username.github.io).

  2. Launch Codespace

    • Click the green Code button (or <> Code).
    • Switch to the Codespaces tab.
    • Click Create codespace on main.

  3. Wait for Setup

    You will see a “Setting up your codespace” screen.

    Note: The first launch can take ~2 minutes as it installs the HugoBlox tools and VS Code extensions for you.

  4. Install & Open Lore Studio

    Lore Studio is the visual editor for configuring your site—no YAML editing required.

    Install (if not already installed):

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

    Or install directly from the marketplace →

    Open Studio:

    • Click the Lore Studio icon in the left Activity Bar
    • Use the visual editor to change your Theme, Title, and Layout
    • Changes are saved automatically!

    See the full Lore Studio Guide for more features.

  5. Preview the Site

    The preview server should automatically start. You’ll see a notification: “Your application running on port 1313 is available.”

    Click Open in Browser (or look for the Simple Browser tab inside VS Code) to see your live site preview!

Next: Customize Links & Bio »