Microsoft webhosting

Question

I built a website on Github, how do I put it up on Azure webhosting?

Answer 1

Hi @Derrick
To host a website you built on GitHub in Azure, the simplest option is to use Azure Static Web Apps if your site is a frontend/static website (HTML, CSS, JavaScript, React, Angular, etc.). In the Azure portal, create a Static Web App resource, select GitHub as the source, sign in to GitHub, choose your repository, branch, and build settings, and Azure will automatically create a GitHub Actions workflow to build and deploy your site whenever you push changes. If your website needs server-side code such as Node.js, .NET, Java, or PHP, then use Azure App Service instead, where you can create a Web App and connect your GitHub repository through Deployment Center for continuous deployment.

https://learn.microsoft.com/en-us/azure/app-service/deploy-github-actions?tabs=openid%2Caspnetcore
https://learn.microsoft.com/en-us/azure/static-web-apps/get-started-portal?tabs=vanilla-javascript&pivots=github
Kindly let us know if the above helps or you need further assistance on this issue.

Answer 2

To host a GitHub-based site on Azure using Azure Static Web Apps, follow these steps:

1. Prepare the GitHub repo
   • Ensure the site code is in a GitHub repository (for example, my-first-web-static-app).
   • Commit and push all changes to the branch that will be deployed (commonly main).
2. Create the Static Web App in Azure Portal
   1. Go to the Azure portal.
   2. Select Create a resource.
   3. Search for Static Web Apps and select it.
   4. Select Create.
   5. In the Basics tab, configure:
      • Subscription: Choose the Azure subscription.
      • Resource Group: Create or select one (for example, static-web-apps-test).
      • Name: A unique app name (for example, my-first-static-web-app).
      • Plan type: Choose Free (or another tier if needed).
      • Source: Select GitHub and sign in if prompted.
   6. After signing in to GitHub, select:
      • Organization: The GitHub organization or user.
      • Repository: The repo that contains the site.
      • Branch: The branch to deploy (for example, main).
3. Configure build details
   • In Build Details, choose the preset that matches the app, or Custom if it is plain HTML/JS:
     • For a simple static site with files in ./src:
       • Build Presets: Custom
       • App location: ./src
       • Api location: leave empty if there is no API
       • Output location: ./src (or the folder where the built files end up)
4. Authorize GitHub if repositories do not appear
   • If the repo list is empty, go to GitHub → Settings > Applications > Authorized OAuth Apps, select Azure Static Web Apps, and select Grant.
5. Create the resource
   • Select Review + create, then Create.
   • Azure will create the Static Web App and a GitHub Actions workflow in the selected repository.
6. Wait for GitHub Actions deployment
   • In the Static Web App Overview page, select the banner “Select here to check the status of your GitHub Actions runs”.
   • Wait until the workflow run completes successfully.
7. Browse the site
   • After the workflow finishes, in the Static Web App Overview page, select the URL link.
   • The site is now live on Azure.
8. Update the site
   • Push changes to the configured branch on GitHub.
   • The GitHub Actions workflow runs automatically and redeploys the site.

---

References:

• Quickstart: Build your first static web app (github)
• Quickstart: Build your first static site with Azure Static Web Apps
• Deploy a Jekyll site to Azure Static Web Apps