Introduction

In this tutorial, we walk through the process of creating a website using a GoDaddy domain, Azure Static Web Apps, GitHub Actions, and the vanilla-basic template. This combination provides a powerful, scalable, and cost-effective solution for hosting static websites.

Prerequisites

  • A GitHub account
  • An Azure account
  • A GoDaddy account
  • Basic knowledge of HTML, CSS, and JavaScript

Step 1: Set Up Your GitHub Repository

  1. Go to the vanilla-basic template repository.
  2. Click on "Use this template" to create a new repository based on this template.
  3. Name your repository and make it public or private as per your preference.
  4. Clone the repository to your local machine.

Step 2: Modify the Template & Push Your Changes

  1. Edit the HTML, CSS, and JavaScript files locally to customise the site.
  2. Commit your changes with clear messages describing the updates.
  3. Push the changes back to GitHub.

Step 3: Deploy with Azure Static Web Apps

  1. Sign in to the Azure Portal and create a new Static Web App resource.
  2. Connect your GitHub repository when prompted.
  3. Select the branch to deploy and confirm the build output settings (for vanilla-basic, the default settings work).
  4. Azure provisions hosting and creates a GitHub Actions workflow for continuous deployment.

Step 4: Configure GitHub Actions

Azure Static Web Apps automatically sets up a GitHub Actions workflow. You can find the YAML definition in your repository under .github/workflows. Every push to the configured branch triggers a build and deploy, keeping your live site in sync with the repository.

Step 5: Set Up Your GoDaddy Domain

  1. Log in to GoDaddy and open the DNS management page for your domain.
  2. Add a CNAME record:
    • Type: CNAME
    • Host: www
    • Points to: your Azure Static Web App�s default domain
    • TTL: 1 hour (or as required)
  3. Add an A record for the apex domain:
    • Type: A
    • Host: @
    • Points to: the IP address supplied by Azure Static Web Apps
    • TTL: 1 hour (or as required)

Step 6: Configure Custom Domain in Azure

  1. Open the Static Web App in the Azure Portal.
  2. Select Custom domains and click Add.
  3. Enter your domain (for example, www.yourdomain.com) and follow the validation prompts.
  4. Repeat for the apex domain if desired.

Conclusion

With GitHub for source control, Azure Static Web Apps for serverless hosting, and GoDaddy for DNS, you now have a modern, automated pipeline for your static website. Any new commit to the main branch will rebuild and redeploy the site automatically.