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. Preview the Site

   Once loaded, 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!

5. Open HugoBlox Studio

   To configure your site easily:

   • Click the HugoBlox ‘H’ icon in the left Activity Bar.
   • Use the visual editor to change your Theme, Title, and Layout.
   • Changes are saved automatically!

What is this?

You are now in a full Visual Studio Code editor. It works exactly like the desktop version, but it’s running on a super-fast cloud server. All your changes are saved automatically to the cloud.

Next: Write your first post »