Skip to content

Latest commit

 

History

History
72 lines (56 loc) · 1.98 KB

3.mdx

File metadata and controls

72 lines (56 loc) · 1.98 KB
type title description i18nReady
tutorial
Write your first line of Astro
Tutorial: Build your first Astro blog — Make your first edits to your tutorial project's home page
true

import Checklist from '/components/Checklist.astro'; import Box from '/components/tutorial/Box.astro'; import InstallGuideTabGroup from '/components/TabGroup/InstallGuideTabGroup.astro'; import PackageManagerTabs from '/components/tabs/PackageManagerTabs.astro'; import PreCheck from '~/components/tutorial/PreCheck.astro'; import { Steps } from '@astrojs/starlight/components';

- Make your first edit to your new website

Edit your home page

1. In your code editor, navigate in the Explorer file pane to `src/pages/index.astro` and click on it to open the file's contents in an editable tab. 
The contents of your `index.astro` file should look like this:

```astro title="src/pages/index.astro"
---
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} >
    <title>Astro</title>
  </head>
  <body>
    <h1>Astro</h1>
  </body>
</html>
```

  1. Edit the content of your page <body>.

    Type in the editor to change the heading text on your page and save the change.

    <body>
  <h1>Astro</h1>
  <h1>My Astro Site</h1>
</body>

  2. Check the browser preview and you should see your page content updated to the new text.

Congratulations! You are now an Astro developer!

The rest of this unit will set you up for success with version control and a published website you can show off.

## Checklist - [ ] I can make changes and see them in the browser. - [ ] I am an Astro developer!