Astro Sphere: Getting Started

This is a demo blog post by Mark Horn from his Astro-Sphere theme, which serves as the starting point for my site redesign.

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

1
export default defineConfig({
2
  site: "https://astro-sphere.vercel.app", // your domain here
3
  integrations: [mdx(), sitemap(), solidJs(), tailwind({ applyBaseStyles: false })],
4
})

Next, Let’s configure the Site

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

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.

1
export const WORK: Page = {
2
  TITLE: "Work",
3
  DESCRIPTION: "Places I have worked.",
4
}

The links that are displayed in the header and drawer

1
export const LINKS: Links = [
2
  { HREF: "/", TEXT: "Home" },
3
  { HREF: "/work", TEXT: "Work" },
4
  { HREF: "/blog", TEXT: "Blog" },
5
  { HREF: "/projects", TEXT: "Projects" },
6
]

The social media links

1
export const SOCIALS: Socials = [
2
  {
3
    NAME: "Github",
4
    ICON: "github",
5
    TEXT: "markhorn-dev",
6
    HREF: "https://github.com/markhorn-dev/astro-sphere"
7
  },
8
]