Deploy Astro to Vercel or Netlify

1. The Foundation: Your Git Repository

Modern deployment is built on top of version control, specifically Git. The workflow is simple yet powerful: you work on your site locally, commit your changes, and push them to a remote repository (like one on GitHub). Your hosting provider watches this repository and automatically triggers a new build and deployment whenever it sees new changes.

Let's ensure your project is ready for this workflow.

To summarize the key steps you'll take:

1. Initialize Git (if needed): When you created your Astro project, you likely initialized a Git repository. You can confirm this by running git status in your project's terminal. If it's not a git repository, run git init.
2. Commit Your Code: Make sure all your progress so far is committed.

   git add .
   git commit -m "Initial commit of complete site before deployment"
   

3. Create a GitHub Repository: Go to your GitHub account and create a new, empty repository. Do not initialize it with a README or .gitignore file, as your local project already has these.
4. Connect and Push: Follow the instructions GitHub provides for "…or push an existing repository from the command line." This will involve adding the remote origin and pushing your main branch.

Once your code is on GitHub, you're ready for the main event.

2. Choosing a Hosting Platform

For Astro projects, two of the most popular and developer-friendly hosting platforms are Vercel and Netlify. Both offer generous free tiers, global Content Delivery Networks (CDNs) for fast loading speeds, and seamless integration with GitHub for continuous deployment.

For your static site, the process on both platforms is nearly identical and requires zero configuration. Your site is built using Static Site Generation (SSG), meaning all the HTML pages are pre-built during the deployment process. These static files are then served directly from the CDN, which is incredibly fast and secure.

Later, if you decided to switch to Server-Side Rendering (SSR) for more dynamic features, you would need to add a platform-specific "adapter" to your Astro project. But for now, no extra steps are needed.

3. Deploying Your Site Step-by-Step with Netlify

Let's walk through deploying your site using Netlify. The process is straightforward and visual.

Now, let's put that into practice. The "Astro Blog Course" video from Coding in Public offers a perfect visual guide.

Here is a summary of your steps:

1. Sign up for Netlify: Go to Netlify and sign up, preferably using your GitHub account for seamless integration.
2. Import Project: In your Netlify dashboard, click "Add new site" and select "Import an existing project."
3. Connect to GitHub: Choose GitHub as your provider and authorize Netlify to access your repositories.
4. Select Your Repository: Find and select the GitHub repository you created for your accounting website.
5. Configure Build Settings: Netlify is smart! It will automatically detect that you have an Astro project and fill in the correct settings:
   • Build command: npm run build (or astro build)
   • Publish directory: dist
6. Deploy: Click the "Deploy site" button.

Netlify will now pull your code from GitHub, run the build command to generate your static site, and deploy the contents of the dist directory to its global CDN. This process usually takes a minute or two. Once it's done, you'll be given a live URL (e.g., random-name-12345.netlify.app), and your website will be live!

4. Continuous Deployment in Action

You've now deployed your site, but the real magic is in the automated updates. Let's see it in action.

The next segment of the "Astro Blog Course" video demonstrates this workflow perfectly.

Try it yourself:

1. Open your project in your code editor.
2. Make a small, visible change. For example, change the main heading on your homepage (src/pages/index.astro).
3. Save the file, then commit and push the change to GitHub:

   git add .
   git commit -m "Test: Update homepage heading"
   git push
   

4. Go back to your site's dashboard on Netlify. You will see a new build has automatically started, labeled with your commit message.
5. Once the build is complete, refresh your live site. Your change is now public!

This automated, Git-based workflow is the cornerstone of modern web development and is crucial for maintaining and scaling your project efficiently. The process for Vercel is virtually identical, so you can be confident in your ability to deploy to either platform.

Conclusion

Congratulations! You have successfully taken your local Astro project and launched it onto the internet. You now have a live, publicly accessible website hosted on a world-class platform.

Key Takeaways:

• Git is the Source of Truth: Modern deployment platforms for static sites use your Git repository as the single source of truth.
• Continuous Deployment is Key: By connecting your repository to a service like Netlify or Vercel, every git push to your main branch automatically triggers a new build and deployment, making updates seamless.
• Zero-Configuration for Static Astro: Deploying a default static Astro site is incredibly simple. The platforms automatically detect the framework and required settings (build command and dist directory).

Up Next:

Your site is live, but it's on a temporary, randomly generated URL. In our next lesson, we'll take the final step toward a professional online presence: configuring a custom domain (like youraccountingfirm.com) and ensuring it's secure with an SSL certificate.