90 lines
2.4 KiB
Markdown
90 lines
2.4 KiB
Markdown
---
|
|
title: "Astro Sphere: Getting Started"
|
|
summary: "You've downloaded and installed the project. Let's hit the ground running."
|
|
date: "Mar 16 2024"
|
|
draft: false
|
|
tags:
|
|
- Tutorial
|
|
- Astro
|
|
- Astro Sphere
|
|
---
|
|
|
|
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
|
|
|
|
```js
|
|
//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
|
|
|
|
```js
|
|
// 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",
|
|
}
|
|
```
|
|
|
|
| Field | Type | Description |
|
|
| :---------- | :----- | :--------------------------------------------------------------------- |
|
|
| TITLE | String | The title of the website. Displayed in header and footer. Used in SEO. |
|
|
| DESCRIPTION | String | The description of the index page of the website. Used in SEO. |
|
|
| AUTHOR | String | Your 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.
|
|
|
|
```js
|
|
export const WORK: Page = {
|
|
TITLE: "Work",
|
|
DESCRIPTION: "Places I have worked.",
|
|
}
|
|
```
|
|
|
|
The links that are displayed in the header and drawer
|
|
|
|
```js
|
|
export const LINKS: Links = [
|
|
{ HREF: "/", TEXT: "Home" },
|
|
{ HREF: "/work", TEXT: "Work" },
|
|
{ HREF: "/blog", TEXT: "Blog" },
|
|
{ HREF: "/projects", TEXT: "Projects" },
|
|
]
|
|
```
|
|
|
|
The social media links
|
|
|
|
```js
|
|
export const SOCIALS: Socials = [
|
|
{
|
|
NAME: "Github",
|
|
ICON: "github",
|
|
TEXT: "markhorn-dev",
|
|
HREF: "https://github.com/markhorn-dev/astro-sphere"
|
|
},
|
|
]
|
|
```
|
|
|
|
| Field | Type | Required | Description |
|
|
| :---- | :--- | :------- | :---------- |
|
|
| NAME | string | yes | Accessible name |
|
|
| ICON | string | yes | Refers to the symbol id in `public/social.svg` |
|
|
| TEXT | string | yes | Shorthand profile name |
|
|
| HREF | string | yes | The link to the social media profile | |