Astro JS - Deployment

Quiz

Deploy Astro Project

Astro supports deployment to various platforms, such as Vercel, Netlify, AWS, and more. The deployment process may vary depending on the platform you choose. In this section, we will discuss how to deploy an Astro project to some of the popular platforms.

Creating a Production Build

Before deploying a Astro application, you need to create a production build. To create a production build, run the following command:

>> npm run build

Running the above command, generates an optimized version of your application for production. HTML, CSS, and JavaScript files are created based on your pages. JavaScript is compiled and browser bundles are minified using the Astro Compiler to help achieve the best performance and support all modern browsers.

Deploying to Github Pages

GitHub Pages is a static site hosting service that allows you to host your website directly from a GitHub repository. To deploy a Astro application to GitHub Pages, follow these steps:

Step 1: Create a GitHub Repository

Create a github repository with name of your project. For example, testing-app.

In your project, add base path, output, image optimization method to /astro.config.mjs file. The base path is the subdirectory where your site will be hosted. For example, if your GitHub username is astronaut and your repository name is my-repo, the base path would be astronaut.github.io/my-repo.

// astro.config.mjs

import { defineConfig } from 'astro/config'

export default defineConfig({
  site: 'https://astronaut.github.io',
  base: 'my-repo',
})

In the above code, replace astronaut with your GitHub username and my-repo with your repository name.

Step 2: Install the GitHub Pages Action

Now, create a .github/workflows/deploy.yml file in your project root directory with following code. This will automate the deployment process.

name: Deploy to GitHub Pages

on:
  push:
    branches: [ main ]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout your repository using git
        uses: actions/checkout@v4
      - name: Install, build, and upload your site
        uses: withastro/action@v3
  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Step 3: Configure GitHub Pages

In your GitHub repository settings, Go to Settings > Pages, Under "Build and deployment", select "GitHub Actions" as the source. Make sure GitHub Pages is enabled for your repository.

In the "Source" section, select the branch you want to deploy from (usually main) and the folder (usually /root). Click "Save".

Step 4: Commit and Push Your Changes

Now, push your code to the main branch. GitHub Actions will automatically build and deploy your Astro application to GitHub Pages.

// Add changes to git
git add .

// Commit changes
git commit -m "Configure GitHub Pages deployment"

// Push changes
git push origin main

After successfully deploying, you can see that a link to access deployed page in deployment section of your repository. We have deployed navigation and linking page that we created in previous chapter. You can access the live page here: farzzn.github.io/testing-app/

Print Page