ContextQMD
Back to Withastro

Check in: Unit 1 - Setup

src/content/docs/en/tutorial/1-setup/index.mdx

latest5.3 KB
Original Source

import Checklist from '/components/Checklist.astro'; import Box from '/components/tutorial/Box.astro'; import { Steps } from '@astrojs/starlight/components';

Now that you know what you're going to build, it's time to set up all the tools you'll need!

This unit shows you how to set up your development environment and deploy to Netlify. Skip ahead to Unit 2 if you are already comfortable with your environment and workflow.

:::tip[Take the tutorial in an online code editor]

Want to complete this tutorial in an online code editor instead? Follow the instructions below for getting started on Firebase Studio.

<details> <summary>Using Firebase Studio: Follow these instructions, then go directly to Unit 2!</summary>

Set up Firebase Studio

<Steps> 1. Follow the external link to [open the "Empty Project" template in a new workspace on Firebase Studio](https://astro.new/minimal?on=firebase-studio).

  1. Follow the prompt to log into your Google account if you are not already logged in.

  2. Enter a name for your project if you want to change it from the default "Empty Project". Click Create.

  3. Wait for the workspace to be created. This may take 30 - 60 seconds. If all goes well, you will see the Astro project loaded in an online code editor.

  4. Wait for Firebase Studio to run two scripts: one to install Astro and another to start the development server. Note that you may briefly see a message that your workspace "couldn't find Astro" if your workspace loads before Astro has finished installing. This message can be ignored and cancelled if it does not clear itself.

    </Steps>

Make a Change

If all goes well, you should see the code for the file src/pages/index.astro opened in split screen with a live preview of the website. Follow the instruction to "Write your first line of Astro" to make a change to this file.

Create a GitHub Repository

<Steps> 1. Navigate to the "Source Control" navigation item in the vertical menu bar, or open with <kbd>CTRL + SHIFT + G</kbd>.
  1. Select the option to Publish to GitHub. This will create a new repository in your GitHub account.
  2. Follow the prompts to sign in to your GitHub account.
  3. Once you are signed in, return to the Firebase Studio tab and you will be given the choice to name your new repository, and whether you want to create a private or public repository. You can choose any name and either kind of repository for this tutorial.
  4. Firebase Studio will make an initial commit and publish to your new GitHub repo.
  5. Going forward, whenever you have changes to be committed back to GitHub, the Source Control navigation icon will show a number. This is the number of files that have changed since your last commit. Navigating to this tab and performing two steps (commit and publish) will allow you to enter a commit message, and update your repository. </Steps>

Deploy your Site

If you'd like to deploy to Netlify, and have a live published version of your site while you work, go ahead in Unit 1 to Deploy your site to the web.

Otherwise, skip to Unit 2 to start building with Astro!

</details>

{/* StackBlitz instructions

<details> <summary>Using StackBlitz: Follow these instructions, then go directly to Unit 2!</summary>

Set up StackBlitz

<Steps> 1. Follow the external link to [open the "Empty Project" template on StackBlitz](https://astro.new/minimal?on=stackblitz).

  1. Click "Sign in" on the top right to log in using your GitHub credentials.

  2. In the upper left of the StackBlitz editor window, click to "fork" the template (save to your own account dashboard).

  3. Wait for the project to load, and you will see a live preview of the "Empty Project" starter.

    </Steps>

Make a Change

In the file pane, you should see src/pages/index.astro. Click to open it, and follow Write your first line of Astro to make a change to this file.

Create a GitHub Repository

<Steps> 1. Press the <kbd>Connect Repository</kbd> button at the top of your list of files, enter a new name for your repository, and click <kbd>Create repo & push</kbd>.
  1. When you have changes to be committed back to GitHub, a "Commit" button will appear at the top left of your workspace. Clicking on this will allow you to enter a commit message, and update your repository. </Steps>

Deploy your Site

If you'd like to deploy to Netlify, and have a live published version of your site while you work, go ahead in Unit 1 to Deploy your site to the web.

Otherwise, skip to Unit 2 to start building with Astro!

</details> */} :::

Where are you going?

In this unit, you will create a new project that is stored online in GitHub and connected to Netlify.

As you write code, you will periodically commit your changes to GitHub. Netlify will use the files in your GitHub repository to build your website, and then publish it on the internet at a unique address where anyone can view it.

Every time you commit a change to GitHub, a notification will be sent to Netlify. Then, Netlify will automatically rebuild and republish your live site to reflect those changes.

<Box icon="check-list"> ## Checklist <Checklist> - [ ] I'm ready to prepare a development environment for an Astro project! </Checklist> </Box>