Alpha Theme
From Zero with Zero
Alpha

Install Alpha

Written by oxypteros

Before we proceed

Let’s recap. By now, you should have:

  1. A GitHub account
  2. A Cloudflare Pages account
  3. Hugo installed
  4. Git installed
  5. VS Code installed

It’s important to have completed these steps before continuing. If you missed any, go back and complete them first.

Install Alpha

Unlike traditional software, Alpha doesn’t require an installation in the usual sense. It’s simply a collection of folders and files.

To keep things as simple as possible, we’ll skip the standard installation and instead unzip a pre-packaged Hugo site template that already includes Alpha as its theme.

Download and Extract Alpha

  1. Download Alpha Starter
  2. Extract the content.

Inside the folder you should see:

alpha-starter
├── archetypes/
├── assets/
├── config/
├── content/
├── data/
├── i18n/
├── layouts/
├── static/
├── themes/
├── CHANGELOG.md
├── hugo.toml
├── LICENSE
├── netlify.toml
├── package.json
├── package-lock.json
├── README.md
└── vercel.json

This is your Hugo site, with Alpha as its theme, meaning Alpha is “installed”!

Move Alpha Starter to a Working Directory

Move the alpha-starter folder somewhere outside Downloads. For this guide, let’s place it in:

Windows: C:\alpha-starter

Linux: /home/[USERNAME]/alpha-starter

Chromebook: Linux files/alpha-starter

You can rename “alpha-starter” if you’d like. But avoid spaces (use dashes or underscores instead).
In this guide I will keep referring to the site folder as alpha-starter

Open the Folder in the Terminal

  • Windows (PowerShell 7):
cd C:\alpha-starter
  • Linux/Chromebook:
cd alpha-starter

If you placed the folder in a different location or renamed it, adjust the command accordingly.

Now, verify you’re in the correct folder by running:

ls # (or `dir` in PowerShell)

You should see a list of folders like archetypes, assets, content, etc.

Start the Hugo Server

Run the following command:

hugo server

If everything is set up correctly, you’ll see a message that ends in:

Environment: "development"
Serving pages from disk
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1) 
Press Ctrl+C to stop

Open your browser and go to http://localhost:1313/.

You should see the Alpha theme demo homepage!

Before We Continue

So far, everything we’ve done has been simple and doable. Even if it felt new. From this point forward, things will get a little more technical, but don’t worry I’ll guide you through every step without overwhelming you.

Right now, the website you see at http://localhost:1313/ only exists on your computer.

It’s running in development mode, meaning Hugo serves it temporarily through the terminal.
It hasn’t been built or deployed online yet.
It’s a generic Alpha-themed site, not your personalized website.

Practice: Running & Stopping the Hugo Server

Before moving on, let’s make sure you’re comfortable with the basic workflow:

  1. Open the terminal (PowerShell 7 on Windows).
  2. Navigate to your website folder
  3. Run the Hugo server
  4. Stop the server: Press Ctrl+C in the terminal.

Repeat this process a few times until you can do it without checking the guide.

From now on, whenever you see “start the Hugo server” or “stop the Hugo server” it refers to these exact steps.
Learning this process is important because you’ll use it again and again, not just in this guide but whenever you work with Hugo in the future.

Once you can do it comfortably without checking the guide, you’re ready to move on!