Astro Sphere: Getting Started

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: "https://astro-sphere.vercel.app", // your domain here
  integrations: [mdx(), sitemap(), solidJs(), tailwind({ applyBaseStyles: false })],
})

Next, Let’s configure the Site

export const SITE: Site = {
  TITLE: "Astro Sphere",
  DESCRIPTION: "Welcome to Astro Sphere, a portfolio and blog for designers and developers.",
  AUTHOR: "Mark Horn",
}

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: "https://github.com/markhorn-dev/astro-sphere"
  },
]