-
Notifications
You must be signed in to change notification settings - Fork 0
2. Editing
Now it's time to start editing!
Open a terminal (Terminal > New Terminal) if you don't have one.
Run:
npm run dev
It will give you a URL. Open this in your browser. Now every time you make a change, you will immediately see it update.
Our website, like all modern ones, uses a framework — in our case, it's Astro. Looking at the source code can feel overwhelming at first, but it becomes beautifully simple when you break it down.
The most important thing to know is that all pages go in the src/pages/ folder. And those pages can import two things: layouts and components.
For example:
---
import BasicPage from '../layouts/BasicPage.astro';
---
<BasicPage title="Homepage">
<p>Welcome to our homepage!</p>
</BasicPage>
This page imports the BasicPage layout:
---
import Header from '../components/Header.astro`;
const { title } = Astro.props;
---
<head>
<title>{title}</title>
</head>
<body>
<Header />
<slot />
</body>
Take a look back at pages/index.astro.
Notice in the <BasicPage> element that the title="..." goes into the {title} variable, and the HTML inside goes into <slot />.
Also, this layout imports the Header component:
<div>
<a href="/">Home</a>
<a href="/about">About</a>
</div>
Components are perfect for things that get reused a lot. And since they also support variables and slots, the uses are pretty much limitless.
Astro really is that simple at its core. Yet as you continue using it, you will notice more and more of its features and see just how powerful it is. Continue exploring the source code and/or reading the Astro docs, and don't hesitate to ask @ryangarber for help.
Astro is great, but not everyone wants to write HTML all the time. To make it easier for people to write lots of text, Astro also supports Markdown — the same language that Discord messages use.
The only difference is that Astro's Markdown also supports variables. For example, here's a blog post that would go in src/content/blog/:
---
title: "Explaining Variables"
description: "Variables that go in between the ---s."
datePublished: "November 21 2025"
---
### My thoughts
Markdown is the _best_! It makes formatting text **so** easy.
Go [here](https://commonmark.org/help/) to learn more about it.
This would become a blog post titled "Explaining Variables" with this text:
Markdown is the best! It makes formatting text so easy.
Go here to learn more about it.
If you need to upload a file to the website, use the src/public/ folder. Files there will be served at the root (/).
For example, say you upload a logo to src/public/logo.png. It will then be available at /logo.png:
<img src="/logo.png" alt="Logo"> (HTML)
 (Markdown)
When you've finished making your edits, it's time to publish!
Say you have an idea for a big feature. You can create a new branch of the repository (the default is main) — that way, you can continue using Git to share the code without touching the live website.
As a bonus, you can create a pull request from that branch. This creates a page where the team can see and discuss it, or merge it into main with the click of a button.