Getting Started
Beacon runs on your computer. You configure everything through a visual wizard in your browser, then upload a folder of static files to go live. No terminal skills required for the typical setup.
What You’ll Need
Section titled “What You’ll Need”Node.js 18 or newer. This is a free tool that runs Beacon’s setup wizard. If you’ve never heard of it, no worries. You’ll install it once and forget about it. Grab it from nodejs.org.
macOS, Windows, or Linux. Beacon works on all three.
Launching the Wizard
Section titled “Launching the Wizard”Unzip your Beacon download and look for the launch script that matches your system:
| Your OS | Double-click this file |
|---|---|
| macOS | Start Beacon (Mac).command |
| Windows | Start Beacon (Windows).bat |
| Linux | Start Beacon (Linux).sh |
The script handles everything behind the scenes: checking for Node.js, installing dependencies on first run, and opening your browser. Two things appear:
- The setup wizard at
http://localhost:3000, where you configure your site - A live preview at
http://localhost:4321, showing your site as you build it
The wizard puts both side by side. A vertical menu on the left lists every section (Profile, Brand style, Socials, Tiles, Links & feeds, SEO, Code, Backup, Verify & Build); your live site shows on the right. Every change you make shows up in the preview immediately.
How the Wizard Works
Section titled “How the Wizard Works”A few things to know about the wizard itself before you dive in. None of these need configuration — they just are how it works.
It saves as you type. No save button, no draft mode. Every keystroke and click is saved a moment later. A small toast in the corner blinks “Saving…” then “Saved” so you can see it happening, but you don’t have to think about it.
The preview is live. Changing a color, swapping a font, dragging a tile — the preview on the right updates instantly. What you see while editing is exactly what visitors will see once you build and deploy.
The menu on the left is for jumping, not stepping. Sections can be filled in any order. Click any item to scroll to it. Each section header shows a small status chip on the right (“5 social links”, “Tracking enabled”, “Public”, “All defaults”) that summarizes what you’ve configured there.
There’s a welcome strip on first launch. A small banner at the top of the form panel walks you through the basics — fill out a section, watch the preview, move on. Click the × to dismiss it; the wizard remembers your choice and won’t show it again on this browser.
A theme toggle in the menu’s footer flips the wizard chrome between System / Light / Dark. This only affects the wizard interface — it has nothing to do with your site’s theme, which you set in Brand Style. Use Light if you’re designing a light-themed site and want the chrome to stay out of the way.
The wizard respects motion preferences. If you have “Reduce motion” enabled in your OS settings, the wizard skips its animations.
Installing Node.js
Section titled “Installing Node.js”If the launch script tells you Node.js is missing:
macOS: The script will offer to install Node.js through Homebrew if you have it. Otherwise, download the installer from nodejs.org and run it.
Windows: Download the LTS installer from nodejs.org. Run it and accept the defaults.
Linux: Use your package manager or NodeSource:
sudo apt-get install -y nodejsAfter installing, double-click the launch script again.
Coming Back Later
Section titled “Coming Back Later”Close the wizard window when you’re done. To reopen it, double-click the same launch script. All your previous settings are still there.