Publish to GitHub

Having set up our development stack through the installation steps, we can now publish your site to GitHub.

Working with VS Code

Let’s begin by opening VS Code. If it’s your first time using it, it may look a bit confusing and it’s normal. VS Code is a powerful, extensible, and highly customizable editor and can indeed be confusing but we’ll stick to the basics and only use what’s essential.

At the top, you’ll see a classic menu bar (File, Edit, Selection, etc.), or on smaller screens, a hamburger-style menu.

On the left-hand side, there’s a vertical Activity Bar with several icons, these icons open different side panels.

For now, we’ll only use:

• Explorer (first icon)
• Source Control (third icon)

Open Your Site Folder in VS Code

1. Click on File > Open Folder….
2. Navigate to the location where the alpha-starter/ folder is saved.
3. Select it with single-click (don’t enter in the folder) and press Open.

A warning may appear: “Do you trust the authors of the files in this folder?”
Click “Yes, I trust the authors.”

Exploring Your Site

In the Explorer sidebar, you’ll now see a list of folders and files inside the alpha-starter project.

• Click on a folder to expand and view its contents.
• Click on a file to open it in the editor pane.

Let’s find and open the file hugo.toml that contains configuration settings for your Hugo site.

# Root Hugo Configuration
# Place this file in the root of your Hugo site to define global settings.
#
# For theme-specific settings, see: `config/_default/`
# Documentation: https://alpha.oxypteros.com/docs/config/hugo-toml

baseURL = "http://example.com" # Replace with production URL
title = "My Alpha Site"
theme = "alpha"
#timeZone = "Europe/Rome"

This file tells Hugo:

• When you see a # everything after it in the same line is a comment.
• The baseURL where your site will live online
• The title of your site (My Alpha Site)
• The theme, you’re using (alpha)
• The timezone that is inactive because it is after a # (Europe/Rome)

Change Your Site Title

Start the Hugo server and open http://localhost:1313 in your browser to preview your site.

You’ll notice that the title of your site is My Alpha Site, which matches the title value in the hugo.toml file currently open in VS Code.

Let’s change it:

Change the title on the hugo.toml.

title = "My Blog"

Only change the value between the quotes.

When you’re done, go to File > Save or press Ctrl+S to save the file.

If everything is running correctly, you’ll now see the new name (My Blog) displayed in the browser tab.

How Live Preview Works

When the hugo server is running, Hugo continuously watches for file changes inside your alpha-starter/ folder.

Anytime you edit and save a file, like changing the title, Hugo will:

1. Detect the change
2. Rebuild the site
3. Automatically reload the browser tab

If you’re looking at the terminal (PowerShell 7), you’ll see a message like: Change detected, rebuilding site (#1)

Modus Operandi: Personal Workflow Tip

When I’m writing content, I prefer to keep the browser tab and VS Code side by side, instead of in full-screen mode. This lets me preview changes live as they happen.

Also because I don’t want to press Ctrl+S every time (I’m lazy like that), I’ve enabled Auto Save in VS Code:

1. Go to File > Preferences > Settings
2. Search for Auto Save
3. Set: Auto Save ➜ afterDelay and Auto Save Delay ➜ 3000 (3 seconds)

These are just my personal preferences and not part of the official guide, feel free to work however you like!

Publish to GitHub

Back to business! Now we’ll publish your site to GitHub.

1. Go to GitHub and make sure you’re logged in to your account.
2. In VS Code, click the Source Control icon (the third icon on the Activity Bar).
3. You’ll see a “Publish to GitHub” button. But before you click it, here’s what you should know:

• Now press Publish to GitHub and allow and authorize all confirmation messages and prompts.
• At the top center of VS Code, choose: “Publish to GitHub public repository”
• When the upload completes, you’ll be prompted: “Would you like Visual Studio Code to periodically run git fetch?”, click Yes
• And on the message: “Successfully published the repository to GitHub”, click Open on GitHub

In the GitHub tab that opens, you’ll see the same files and folders from your alpha-starter/ project now safely hosted online on your GitHub account.

We took a small detour in this section by exploring VS Code, .toml files, and some settings that might have felt too technical or even unrelated to the main goal of this guide. But trust me, they’re not.

If you’re going to have a website Powered by Hugo, even if all you do is write content, you’ll still be working through a text editor and the terminal. So it’s important to get comfortable with these basics early on.

Now, let’s get back on track and move on to the first real goal of this guide:
Deploying your site to the web.