Skip to content

5.mdx

Latest commit

 

History

History
86 lines (60 loc) · 3.15 KB

5.mdx

File metadata and controls

86 lines (60 loc) · 3.15 KB
type tutorial
title Deploy your site to the web
description Tutorial: Build your first Astro blog — Connect your tutorial project's GitHub repo to Netlify and deploy to the web
i18nReady true

import Checklist from '/components/Checklist.astro'; import Box from '/components/tutorial/Box.astro'; import MultipleChoice from '/components/tutorial/MultipleChoice.astro'; import Option from '/components/tutorial/Option.astro'; import PreCheck from '/components/tutorial/PreCheck.astro'; import { Steps } from '@astrojs/starlight/components'; import Badge from "/components/Badge.astro"

- Add your GitHub repository as a new Netlify app - Deploy your Astro site to the web

Here, you will connect your GitHub repository to Netlify. Netlify will use that project to build and deploy your site live on the web every time you commit a change to your code.

:::tip[We'll use...] This tutorial will use Netlify, but you are welcome to use your preferred hosting service for deploying your Astro site to the internet. :::

Create a new Netlify site

1. Create a free account at [Netlify](https://netlify.com) if you do not already have one. 
Make a note of your username. You will view your dashboard and any sites you create at `https://app.netlify.com/teams/username`

  1. Click Add new project > Import an existing project.

    You will be asked to connect to a Git provider. Choose GitHub and follow the steps onscreen to authenticate your GitHub account. Then, choose your Astro project's GitHub repository from the list provided.

  2. At the final step, Netlify will show you your app's site settings. The defaults should be correct for your Astro project, so you can scroll down and click Deploy site.

Congratulations, you have an Astro website!

Change your project name

On your site's overview page in Netlify, you will see your randomly-generated project name, and your website URL of the form https://project-name-123456.netlify.app. You can change your project name to something more memorable, and this will automatically update your URL.

Visit your new website

Click on the URL in your site settings, or type it into a browser window to view your new website.

Test your knowledge

You want to update the home page of your existing website. What steps do you take?

I open a terminal, run `create astro`, and then visit my Netlify URL. I change a setting in my Netlify app, then start a new Astro project on astro.new. I make an edit to `index.astro`. I commit and push my changes to GitHub. Netlify will handle the rest! ## Checklist - [ ] I can view my updated website online. - [ ] I'm ready to get back to coding!

Resources