Host your website on Azure Static Web Apps for free

Published Jul 22 2022 04:30 AM 3,199 Views
Microsoft

The MLSA Peer Mentorship Program, aims at creating a space where students can learn about the various Microsoft student opportunities and benefits/offers and how to maximumly leverage them. The program also gives you chance to connect with local Student Ambassadors and guide you through the application process if you’d wish to join the amazing family of tech enthusiasts being a force for good in their communities.

 

So far, we have:

  1. Done an Introduction to Microsoft University Recruiting - Goal: Know how you can prepare yourself for a career at Microsoft, best practices for your CV/Resume.
  2. Introduced you to the Azure for Students benefit that gives you an annually renewable $100 Azure credits and access to free services on Azure (no credit card required). Wondering how to activate your benefit? Navigate to the Azure for Students home page, click 'start free' and use your institution issued email address. Julia_Muiruri_1-1658485427852.png
  3. Gone through an introduction to Git & GitHub – Goal: Build your resume website on Github.Dev

and we recently did a beginner friendly introduction to Microsoft Azure and the various services you can easily integrate in your IOT/AI/Mobile/Web project from the platform.

 

Session content

  • Who can use services on Azure & why Azure is worth your time?
  • Who should use Azure Static Web Apps?

If your project comprises of static files, then deploying it to a static web app would be the right and easiest way to get your website publicly available. Here is why: -

Step 1: Work on your project and push it to GitHub

 

Step 2: Create an Azure Static Web App and this step automatically generates a GitHub workflow that will always initiate deployment every time you push changes to your repository.

 

Julia_Muiruri_0-1658486320383.png

* Creating the Static Web App instantly generates the .yml workflow file for you in GitHub

 

Julia_Muiruri_1-1658486476550.png

All you do is push your project change on GitHub and Azure handles the rest. (Sweet benefit of the continuous integration that comes with Azure Static Web Apps)

Julia_Muiruri_2-1658486588779.png

 

  • Who then should use an App Service?

If your project sits in your development environment and you want to have it directly deployed without you leaving Visual Studio Code, then check out the steps you need to deploy it to an App Service directly from VS Code using Azure extensions

Step 1: Work on your project on VS Code

 

Step 2: Install the Azure Account & Azure App Service Extensions on your editor, then sign into your Azure Account

 

Julia_Muiruri_3-1658486772748.png

Step 3: Create a new web app and deploy your project, all this while you are still on your editor

 

Julia_Muiruri_0-1658487025986.png

 

Julia_Muiruri_1-1658487057093.png

 

The below session takes you through how you can do this and more

 

Follow us on Twitter for updates on upcoming sessions

Co-Authors
Version history
Last update:
‎Jul 22 2022 04:01 AM
Updated by: