In this article, We are going to learn how to deploy a static website to Azure Static Web App using Github Action. Azure Static Web App is a web application that is hosted on Azure. It is a free service that allows you to host your website on Azure and get it to work with your Github Action workflow.

Prerequisites

  • GitHub Repository
  • Azure Account

    • Create a Static Web Application

    1. Go to Microsoft Azure Web Portal
    2. Select Static Web App
    3. Select "Create"
    4. In the Basics tab, fill in the configuration information and link it to a GitHub repository

    Build Details:

  • Build Presets: select Custom, as I use HTML for this demo, unless select your JavaScript framework.
  • App location: keep the default value (“/”) if the application is under the root directory.
  • Api location: leave blank if you haven’t created the API yet (and this can be updated later)
  • Output location: select public — Svelte generates the built artifact inside the public folder. As the output location depends on the framework you choose, please check before filling in

    • 5. Select review and create button at the bottom of the page
    6. Select Create
    7. Select Go to resource
    8. Navigate to the the application by clicking the below URL. At this step, Azure builds and deploys the application, and automatically generates the URL for you

    Steps to update a Static Web App

    Push the new codes to master (or any specified branch), it will trigger the new deployment automatically.

    Conclusion

    If you have any issue regarding this post, mention your issue in comment section or reach me through my E-mail.

    Happy Coding