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

//astro.config.mjs

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

// 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",
}
FieldTypeDescription
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.ico

The header and footer branding icon is located in /public/brand.png 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 SERVICE: Page = {
  TITLE: "Service",
  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: "/tips", TEXT: "Tips" },
]

The social media links

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