Back to blog
Mar 16, 2024
3 min read

Astro Sphere: Getting Started

You've downloaded and installed the project. Let's hit the ground running.

Astro Sphere is designed to be configurable. This article will cover the basics on configuring the site and make it personal.

First let’s change the url


export default defineConfig({
  site: "", // your domain here
  integrations: [mdx(), sitemap(), solidJs(), tailwind({ applyBaseStyles: false })],

Next, Let’s configure the Site

// src/consts.ts

export const SITE: Site = {
  TITLE: "Astro Sphere",
  DESCRIPTION: "Welcome to Astro Sphere, a portfolio and blog for designers and developers.",
  AUTHOR: "Mark Horn",
TITLEStringThe title of the website. Displayed in header and footer. Used in SEO.
DESCRIPTIONStringThe description of the index page of the website. Used in SEO.
AUTHORStringYour name.

Change the branding

The browser icon is located in /public/favicon.svg

The header and footer branding icon is located in /public/brand.svg as a sprite with id=“brand”

The rest of the consts file

Each page has a metadata entry that is useful for SEO.

export const WORK: Page = {
  TITLE: "Work",
  DESCRIPTION: "Places I have worked.",

The links that are displayed in the header and drawer

export const LINKS: Links = [
  { HREF: "/", TEXT: "Home" },
  { HREF: "/work", TEXT: "Work" },
  { HREF: "/blog", TEXT: "Blog" },
  { HREF: "/projects", TEXT: "Projects" },

The social media links

export const SOCIALS: Socials = [
    NAME: "Github",
    ICON: "github",
    TEXT: "markhorn-dev",
    HREF: ""
NAMEstringyesAccessible name
ICONstringyesRefers to the symbol id in public/social.svg
TEXTstringyesShorthand profile name
HREFstringyesThe link to the social media profile