HubBuilder · Setup Guide
← Back to Builder

For Instructors, By Instructors

A guide to building your hub.

From a folder of links to a beautiful, scannable course portal that students reach with a phone camera. About fifteen minutes, end to end.

Before you begin

What you'll need.

Four things, all free. Gather them now and the rest takes minutes.

Phase 01 of 03

Build it.

Open the visual builder, fill in your course, drop your links into sections. Roughly five minutes.

Open the builder.

Double-click course-hub-builder.html, or drag it into a browser tab. Nothing installs. Nothing connects to a server. The whole tool runs locally on your computer.

Fill in your course identity.

On the Edit tab, complete the first block: course code, term, full title, a short tagline, your name, your institution. The tagline appears as a subtitle beneath the course name on the published hub. Two sentences, max.

Customize your sections.

Block 02 is where you set up your sections. Six defaults are included: Lecture Videos, Lecture Notes, Assignments, Lab Materials, Kahoots, and AI Tools. Remove any you don't need by clicking the X on the pill. Add custom ones like "Office Hours," "Other Resources," "Discussion Forum," or "Final Project" by typing into the input and clicking Add Section.

Add your entries, one at a time.

For each link, fill in block 03: title, section, an optional number or week label, the URL, and a short description. Click Add Entry.

Tip

If you already have a list of URLs prepared, click Bulk Paste URLs. Drop in one URL per line, optionally followed by | Title. Paste, done.

Preview what students will see.

Click the Preview tab. You'll see the hero, the search bar, and the cards that lift on hover. If something looks off, jump back to Edit and adjust.

Export and save.

Click the Export tab, then Download Hub HTML. A single file lands in your Downloads folder, named after your course code. This is the file you'll publish.

Also

Click Save Config (JSON) too. That tiny file lets you reopen the builder later, load it back in, and pick up exactly where you left off.

Phase 02 of 03

Publish it.

GitHub Pages is free, fast, and gives you a clean URL. About five minutes the first time, two minutes after that.

Create a free GitHub account.

If you already have one, skip ahead. Otherwise, go to github.com/signup. Use your university email if possible. Pick a clean username, ideally something like your last name. That username becomes part of your hub's web address.

Create a new repository.

Once logged in, go to github.com/new. Give the repository a clean, lowercase name with hyphens, like psyc-301-fall-2026. Set it to Public. Leave the "Add a README" box unchecked. Click Create repository.

Note

Public means the source HTML is viewable by anyone who finds the repo. For course materials this is generally fine. If you have anything sensitive (unreleased exam answers, FERPA-protected data), see the FAQ.

Rename your file, then upload.

On your computer, rename the downloaded file to index.html (lowercase, no extra characters). On the empty repo page, click the uploading an existing file link. Drag your renamed file into the upload area. Scroll down and click Commit changes.

Why

GitHub serves index.html as the default page when a visitor opens your URL. Any other filename means students see a folder listing instead of your hub.

Turn on GitHub Pages.

Click the Settings tab at the top of the repo. In the left sidebar, click Pages. Under "Source", select Deploy from a branch. Under "Branch", choose main and / (root). Click Save.

Wait a minute, then grab your URL.

GitHub takes 30 to 60 seconds to publish. Refresh the Pages settings page. When the green banner appears, your URL will look something like:

https://yourname.github.io/psyc-301-fall-2026/

Click it. Your hub is live on the internet.

Phase 03 of 03

Share it.

Send the URL however suits your course. Pasting it into the syllabus, an email, or your LMS page is the fast path. A QR code is an optional extra for in-person classes where students will scan from a slide or a printed sheet.

Choose how to share.

The simplest path is the URL itself. Paste it wherever students already look: the syllabus, a welcome email, your LMS or Kajabi course page, an opening announcement. That's enough on its own.

If you teach in person and want students to reach the hub from a phone camera, a QR code is a small extra step that pays off every class meeting. The next step covers how, and you can safely skip it if the URL alone fits your workflow.

Generate a QR code Optional

If you'd like a QR, three reliable free generators:

qrcode.show · type your URL after the slash, like qrcode.show/yourname.github.io/psyc-301, and the QR appears instantly.
Chrome's built-in tool · right-click the address bar on your hub page and select "Create QR code".
qr-code-generator.com · paste your URL, download the PNG.

Drop the QR onto the first slide of every lecture, the syllabus, the back of a printed handout, your office door. The QR encodes the URL itself, so as long as the URL stays the same, the same QR keeps working forever. No expiration, no per-scan cost, no tracking.

Tell students how to find it.

If you shared the URL, they click. If you posted a QR, they scan it with their phone camera. Either way, the next instruction is the same: tap a card, the link opens. No app, no login, no account, no software to install.

Mid-semester

Updating later.

Add a new lecture, swap an assignment, restructure a section. The hub updates in under a minute.

Reopen the builder.

Open course-hub-builder.html, go to the Export tab, click Load Config (JSON), and pick the JSON you saved earlier. Everything reappears, including any custom sections you set up.

Edit, re-save, re-export.

Make your changes in the Edit tab. Click Save Config (JSON) to overwrite the old config. Click Download Hub HTML for a fresh copy of the hub. Rename it to index.html again.

Replace the file on GitHub.

Go to your repo, click your existing index.html, click the trash icon, commit. Then upload the new index.html the same way you did the first time. GitHub redeploys in about a minute.

Same QR

Your URL hasn't changed, so the QR codes you've already printed and posted keep working. Students just see the new content next time they scan.

Troubleshooting

When things go sideways.

A short list of the issues that come up most often and how to fix them in under a minute.

My GitHub Pages URL gives a 404.

Wait a full minute after enabling Pages. If still no luck, check the filename: it must be exactly index.html, all lowercase. Index.html, INDEX.HTML, and index.HTML all fail. Also confirm the repo is set to Public, not Private.

My links open the GitHub source code instead of the page.

You're using a github.com/user/repo/blob/... URL. Those open GitHub's file viewer, not the rendered page. To get a rendered HTML page, host that file on its own GitHub Pages site too, or wrap a raw URL with htmlpreview.github.io.

My Drive links ask students for permission.

On the Drive file, click Share, change "General access" to Anyone with the link, role Viewer. Save. Now the link works for anyone with no login.

My Copy HTML button doesn't seem to work.

When you open the builder directly from your hard drive, some browsers block the modern clipboard API. The Copy button now has a fallback that works in those cases. If it still fails, click Download Hub HTML instead and upload the file directly. Either path gets you to the same place.

I want to use my own domain instead of yourname.github.io.

In the repo's Pages settings, scroll to Custom domain. Enter your domain (like course.myname.edu). Then add a CNAME record at your DNS provider pointing to yourname.github.io. Free SSL is configured automatically through Let's Encrypt.

I want a private hub that only enrolled students can see.

GitHub Pages on the free plan requires a public repository. If that's a deal-breaker, two options: GitHub Pro (about $4 per month) allows private Pages, or host the file inside Kajabi as a custom HTML block, where access is gated by your existing course enrollment.

A colleague wants to use this. What do I send them?

Two files: course-hub-builder.html and this guide. They open the builder, follow the guide, end up with their own URL. They never need to interact with your repo.

Will my hub keep working after the semester ends?

Yes, indefinitely. GitHub Pages doesn't expire. The only soft limits are 1 GB of repo size and 100 GB of bandwidth per month, neither of which you will come close to with a hub of links.