This guide is for you if you’re new to building websites this way. Maybe you’ve used Squarespace or Wix before, or maybe you’ve never made a website at all. Either way, we’ll walk through everything step by step.
Don’t be intimidated. SpaceClub! was specifically designed so you only need to edit simple text files. And if you get stuck, AI tools like ChatGPT or GitHub Copilot can explain anything you see - just paste the file and ask.
Step 1: Understand What We’re Building
SpaceClub! is a static site. That means:
Your website is a collection of files (text, images, CSS) that live in a folder.
You edit those files to change your website.
You run a command to “build” those files into a finished website.
You upload the finished website to a hosting service - and that’s it, you’re live.
There’s no database. Just files. (There is an editor, SpaceDash, if you’d rather click than type - but it edits those same files.)
Why is this better?
You own everything. The files are yours. No company can take them away or change how they work.
It’s free to host. Services like Netlify and GitHub Pages host static sites for free.
It’s fast and secure. No server code means nothing to hack and nothing to slow down.
It’s portable. Don’t like your host? Move your files somewhere else. Done.
The trade-off is that you can’t click and drag to rearrange things. You edit text files instead. But those text files use Markdown, which was designed to be simple and readable - and once you try it, you’ll find it’s actually faster than any visual editor.
Step 2: What You Need
You’ll need three things:
A GitHub Account (Free)
GitHub is where SpaceClub! lives, and it’s also a great place to store your website’s files.
If you see a version number (like v20.11.0), you’re good.
What’s a terminal? It’s a text-based way to talk to your computer. On Linux and Mac, it’s called Terminal. On Windows, you can use Command Prompt or PowerShell. In VS Code, you can open one from the menu: Terminal → New Terminal.
Step 3: Make Your Site
Now let’s make your site. Open a terminal and run:
npx spaceclub new my-websitecd my-website
Replace my-website with whatever you’d like the folder to be called. This creates the folder, puts a fresh SpaceClub! site in it, and downloads the tools it needs (like Eleventy and Pagefind). It takes a minute or two the first time.
What is npx? npx comes with Node.js. It downloads a tool and runs it in one go - here, the spaceclub tool that makes new sites. You don’t need to install anything else first.
Your folder now holds two kinds of things:
Your stuff - your content in src/ and your settings in spaceclub.json.
SpaceClub! itself - in node_modules/, which you can ignore. That’s where the layouts, styles, and features live, which is why updating later is just one command (see Updating).
Putting It on GitHub
To keep your site safe on GitHub (and to deploy it later), create an empty repository on GitHub, then follow the instructions it shows you under “push an existing repository from the command line”.
What is Git? Git is a tool that tracks changes to your files over time. GitHub is a website that stores Git projects online. You don’t need to be a Git expert - for now, just know it’s how you save your files online.
Step 4: Start the Development Server
Now let’s see your website! Run:
npm start
You’ll see some output, and then a message like:
[11ty] Server at http://localhost:8080/
Open that URL in your browser. You should see your SpaceClub! site running locally on your computer.
The best part: leave this running. Every time you save a file, the browser will automatically update. This is called “live reload” and it makes editing much faster.
Step 5: Edit Your First File
Let’s make a change so you can see how it works.
Open src/_data/site.json in your editor.
Change the title from "Space Club!" to your website’s name.
Save the file.
Look at your browser - it should have updated automatically.
That’s the core workflow: edit a file → save → see the result.
Now try editing src/pages/home.md - that’s your homepage. Change the heading, change the text, save, and watch it update.
Step 6: Understand the File Structure
Here’s what matters:
Folder/File
What It Is
src/pages/home.md
Your homepage
src/pages/about.md
Your about page
src/pages/contact.md
Your contact page
src/_data/site.json
Site title, description, logo, timezone
src/_data/navbar.json
Navigation menu links
spaceclub.json
Colours, light or dark mode, navbar, footer, and features
src/assets/images/
Your logo, favicon, and images
src/events/
Event pages (one file per event)
src/posts/
Blog posts (one file per post)
Everything you’ll regularly edit is simple text. The HTML templates that control the layout come from SpaceClub! itself - you generally don’t need to touch those (but you can, see Advanced Customisation).
Step 7: Understand Front Matter
At the top of every .md file, you’ll see something like this:
---title: About Usdescription: Learn more about what we do.permalink: "/about/"---
This is called front matter. It’s metadata about the page - the title, description, URL path, and other settings. It’s always between the --- lines at the top of the file.
Everything below the front matter is your page content, written in Markdown.
Step 8: Learn Markdown Basics
Markdown is the simple formatting language you’ll use for content. Here’s a quick reference:
# Big Heading## Smaller Heading### Even SmallerThis is a paragraph. Just type normally.**This is bold text.***This is italic text.*- Bullet point- Another bullet point1. Numbered item2. Another numbered item[Link text](https://example.com)
Tip: If you ever get stuck or see something you don’t understand, copy the file contents into an AI tool (like ChatGPT or GitHub Copilot) and ask it to explain. That’s one of the biggest advantages of working with plain text files - they’re easy to get help with.
