Make It Yours

How to rename, restyle, and extend this Skeleton so it becomes your platform.

How to rename, restyle, and extend this Skeleton so it becomes your platform.


1. Change the name

The name “Your Platform” appears in three places:

Find and replace “Your Platform” with your own name. Update the site URL in the config. That is it.


2. Adjust the colors

All colors are defined as CSS custom properties in src/styles/tokens.css:

--color-bg: #0a0d12;        /* page background */
--color-surface: #111620;   /* card/header surfaces */
--color-text: #eee4d2;      /* primary text */
--color-muted: #9aabbe;     /* secondary text, dates, metadata */
--color-accent: #d2bf92;    /* links, highlights, brand color */
--color-line: rgba(214, 201, 172, 0.14);  /* borders and dividers */

Change these values and the entire site updates. The accent color is the most visible brand touch. Start there.


3. Change the fonts

The Skeleton loads two fonts from Google Fonts:

To change them:

  1. Pick your fonts from fonts.google.com.
  2. Update the <link> tag in SiteLayout.astro with the new font URL.
  3. Update the CSS custom properties:
--font-display: "Your Display Font", Georgia, serif;
--font-mono: "Your Mono Font", monospace;

4. Add or modify the schema

The post schema lives at src/content/schemas/posts.ts. To add a field:

// Add a category field
category: z.enum(["essay", "note", "review"]).default("essay"),

After adding a field to the schema, every post must include it (unless it has a default or is optional). The build will tell you which posts need updating.

To make a field optional, chain .optional():

subtitle: z.string().min(1).optional(),

5. Change the content type name

If “posts” does not fit your work (maybe you write “notes” or “entries” or “dispatches”):

  1. Rename the folder: src/content/posts/ to src/content/your-name/.
  2. Update src/content.config.ts: change the collection name and the base path.
  3. Update src/pages/posts/ to src/pages/your-name/.
  4. Update the queries in pages and the RSS feed to use the new collection name.
  5. Update the layout navigation links.

The draft gate (getPublished) works with any collection name. No changes needed there.


6. Delete the example posts

Once you have written your own content:

  1. Delete welcome.md and how-this-works.md from src/content/posts/.
  2. Delete or rewrite your-first-post.md.
  3. Build to verify nothing breaks.

The example posts are here to teach. They are not meant to stay.


7. Add pages

To add a standalone page (an “about” page, a “contact” page):

  1. Create a new file at src/pages/about.astro.
  2. Import and use the SiteLayout.
  3. Write your content.
---
import SiteLayout from "../layouts/SiteLayout.astro";
---

<SiteLayout title="About | Your Platform">
  <h1>About</h1>
  <p>Your story here.</p>
</SiteLayout>

The page is automatically available at /about. Add a link in the layout nav if you want it in the header.


8. Beyond the Skeleton

The Build Bible explains the patterns this architecture supports but does not pre-build:

These patterns are all achievable by extending the Skeleton yourself. The Bible teaches how. If you want them built for you, themed to your brand, with your content migrated, that is the Forge.