080600
This commit is contained in:
@@ -1,90 +1,90 @@
|
||||
---
|
||||
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 |
|
||||
---
|
||||
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 |
|
||||
Reference in New Issue
Block a user