A Mushbox Guide

Build Your Own Site.
Free. Tonight.

Your links, your guides, your brand — on a real website with no hosting fees, no subscriptions, and no code degree. This site you're reading runs exactly this way, and setting yours up takes about 30 minutes.

THE SECRET: GitHub hosts websites for free. Streamers just don't know it yet.

What you need

A GitHub accountFree. It's where your site's files live.
30 minutesMost of it is copy, paste, and one short wait.
Zero experienceIf you can set up OBS, this is easy mode.

The build

1

Create your GitHub account

Go to github.com and sign up. Pick your username carefully — it becomes your website address. Sign up as coolstreamer and your site lives at coolstreamer.github.io. Your Twitch name is usually the move.

2

Create the magic repository

A repository ("repo") is just a folder that lives on GitHub. Click the + in the top-right corner → New repository. Now the one rule that matters:

Name it exactly yourusername.github.io — your actual username, then .github.io. That exact name is what tells GitHub "this is my website." Any other name won't work the same way.

Set it to Public (free hosting requires it), check "Add a README file", and click Create repository.

3

Make your homepage

Your homepage is a file named index.html — that exact name is what browsers load automatically. Open Notepad (or any text editor), paste the starter below, and make it yours: swap in your name, links, and colors.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>YourName — Links</title>
  <style>
    body{
      background:#060810; color:#fff;
      font-family:system-ui,sans-serif;
      text-align:center; padding:60px 20px;
    }
    h1{font-size:2.2em; margin-bottom:8px}
    p{color:#C9D4E8; margin-bottom:30px}
    a.btn{
      display:block; max-width:340px; margin:12px auto;
      padding:14px; background:#0A1535; color:#4DB8FF;
      border:1px solid #1E6FFF; border-radius:12px;
      text-decoration:none; font-weight:600;
    }
    a.btn:hover{background:#1E6FFF; color:#fff}
  </style>
</head>
<body>
  <h1>YourName</h1>
  <p>Streamer • Your tagline here</p>
  <a class="btn" href="https://twitch.tv/yourname">Twitch</a>
  <a class="btn" href="https://youtube.com/@yourname">YouTube</a>
  <a class="btn" href="https://discord.gg/yourinvite">Discord</a>
</body>
</html>

Save it as index.html — in Notepad, set "Save as type" to "All Files" first, or it secretly saves as index.html.txt and nothing works. This mistake has claimed many good streamers.

4

Upload it

On your repo's page on GitHub, click Add file → Upload files, then drag your index.html in. Type a short note in the box at the bottom (like "add homepage" — every save needs a note) and click Commit changes.

That's it. Your file is on GitHub. Every future update works the same way: edit the file on your computer, drag the new version in, commit.

5

Flip the switch

In your repo: Settings → Pages (left sidebar). Under Build and deployment, set Source to Deploy from a branch, pick branch main and folder /(root), and click Save.

GitHub now builds your site. Watch it happen on the Actions tab — a run called "pages build and deployment" appears and earns a green check in about a minute.

6

Visit your website

Open a private/incognito window (Ctrl+Shift+N) and go to yourusername.github.io. That's your site. Live. On the internet. For free.

Why incognito? Your normal browser saves old copies of pages to load them faster — so after updates, it can show you a stale version and make you think your changes failed. Incognito always fetches fresh. Make it a habit: update → green check → incognito.

Leveling up

+

Add more pages

Want a commands page, a setup guide, a schedule? Make a folder in your repo for each one, and put an index.html inside it. A folder named commands with an index inside becomes yourusername.github.io/commands/ — clean URL, no filename showing.

Also add one empty file named .nojekyll (dot at the front, no extension, nothing inside it) to the top level of your repo. It tells GitHub to serve your files exactly as-is, and it prevents a maddening bug where folder pages 404 even though the files are right there. Just trust us on this one.

+

Add images

Upload image files to the repo the same drag-and-drop way, then reference them in your HTML: <img src="banner.jpg"> for a file next to the page, or <img src="/photos/setup.jpg"> for one in a folder. Resize photos before uploading — phone photos are 10× bigger than a web page needs.

+

Get the desktop app (when you outgrow drag-and-drop)

Once your site is more than a couple of files, install GitHub Desktop. It keeps a copy of your repo on your PC — edit files normally, then commit and push all your changes in one shot, with one-click rollback if you ever break something. Drag-and-drop never stops working; the app is just faster at scale.

+

Use your own domain

Want yourname.com instead of the github.io address? Buy the domain (~$10–15/year — the only money in this entire guide), then: at your registrar, add four A records for @ pointing to 185.199.108.153, .109.153, .110.153, .111.153, plus a CNAME for www pointing to yourusername.github.io. Delete any "forwarding" your registrar set up — forwarding and real DNS fight each other.

Then in your repo: Settings → Pages → Custom domain → enter your domain → Save. When the DNS check goes green, tick Enforce HTTPS. Give it up to an hour and don't panic early.

When it 404s — the checklist

I just changed something and it's not showing

Three suspects, in order: the build might still be running (check the Actions tab for the green check), your browser might be showing you a cached copy (incognito window), and GitHub's servers cache pages for up to 10 minutes (wait, then try again). Half of web debugging is refusing to panic during the waiting period.

My folder page 404s but the files are definitely there

Two classics: the folder is missing its index.html (a folder with no index has no page to show), or you need the .nojekyll file from the Leveling Up section. If /commands/index.html loads but /commands/ doesn't — that's the .nojekyll fix, guaranteed.

The link works for me but not for someone else

Web addresses are case-sensitive: /Commands/ and /commands/ are different pages. Whatever you named the folder is what the link must say, capitals and all. Naming everything lowercase from day one avoids this forever.

My whole site says "There isn't a GitHub Pages site here"

Pages isn't turned on (or got turned off) — revisit Step 5 and make sure branch shows main / (root) and you clicked Save. If you *just* turned it on, give it a few minutes.

Notepad saved my file as .txt

Change "Save as type" to All Files before saving anything for your site. If it already happened: in File Explorer turn on View → Show → File name extensions, then rename the file and delete the .txt ending. Windows will warn you dramatically; proceed anyway.