🎇Hosting your student portfolio for free on Azure static web Apps🎇

As a student, it can be difficult😒😒 to showcase your work to potential employers, especially when you don’t have a personal website or the means to host one. Creating a personal website can be costly, and many students are unable to pay for hosting services. This can make it challenging for them to effectively showcase their skills and projects to potential employers.

Azure Static Web Apps provides a free and easy solution for hosting student portfolios. With Azure Static Web Apps, students can create a website for their portfolio using popular front-end frameworks such as React, Angular, Vue, or just HTML, CSS and JavaScript and host their website for free. The platform provides easy integration with GitHub, so students can easily manage their website source code and make updates as needed. Additionally, the platform provides automatic deployment, so students don’t have to worry about setting up servers or configuring DNS records.

By hosting their portfolios on Azure Static Web Apps, students can have a professional and easily accessible portfolio that they can share with potential employers. This can help them stand out from other applicants and increase their chances of getting hired.

On this blog:

• Create a portfolio from Microsoft workshop library templates.

• host a student portfolio to azure static web apps.

Requirements:

• An Azure subscription: if your a student you can access Azure for free for students (use your school email to verify your student), else create a free account if your not a student.

• A portfolio template. You can make use of this sample resume project I created from Microsoft-Peer Mentorship workshop-library

• Assuming you have GitHub account if not create it here.

Creating our portfolio

• Folk this repo

• Give a name of your choice

• This is the view of your project

Press i on you keyboard to go to github.dev mode(GitHub Codespaces).

• After everything is loaded you should see your project in a VSCode mode but on the browser.

• We need to install a codeswing VScode extension for hot reloading.

• To run our project, type `Ctrl + Shift + P` (on windows) or `Cmd + Shift + P` (on Mac) on your keyboard and then type `CodeSwing : Open Swing` on the input prompt you get.

then and then press ok.

• Your screen will be divided into three screens, one preview screen with Realtime updates and your two coding files one HTML and CSS. On our example were going to use HTML so you can go ahead to minimize or close the CSS file(but feel free to use it to make changes)

• Change all your personal Information according to your profile.

Before:

After:

• After you have finished making your changes, we can commit and push our changes to GitHub.

Creating Azure Static Web App Via Azure Portal

We need to provision an Azure service to host our code now that we’ve created our portfolio and stored it on GitHub. Because our web application is static and does not require dynamic data, we will use Azure Static Web Apps. Azure Static Web Apps is an excellent choice for us because it is inexpensive and simple to implement. Provisioning a Azure Static Web Apps involves specifying the configuration options for the Azure Static Web Apps, including the operating system, size, and location.

To provision an Azure Static Web App, follow these steps:

1. Visit Azure Portal and sign in, if you don’t have an account click here to activate azure for students.

2. You should see a page like this.

3. Search for static web apps and click to select.

4. Click create to start provisioning your service.

5.1. By default, your Subscriptions should be Azure for students.

5.2. Provide the name of the resource group in which the virtual machine will reside or create a new one. Here, we will create a new one named Studentportifolio by clicking on create new button.

5.3. Give a name to your Static Web App.

5.4. We are going to use Free plan type because it’s a personal project.

5.5. Provide the region you want the Static Web App to be deployed to. I have gone with West Europe since it’s the nearest location.

6.2. Select deployment source to be GitHub since we stored our code there.

6.3. You have allow Azure to access your GitHub especially the one we have stored our project.

6.4. Select your GitHub organization.

6.5. Select the Repository where our code is, mine is MLSAMentorshipPortfolio

6.6. Select the branch of your repository, mine is master.

7.3. Since our project doesn’t require external libraries, we are going to go with custom Build Presets.

7.4. Leave the default since our index.html is on our root folder.

7.5 leave the default value.

7.6. Leave the default value.

7.7 Give a tag of your choice and the value of choice. I’ll go with portfolio and value of 1.

8.1 Watch the tag and value.

8.2. Click create to finish the provisioning process.

9.1. Watch the prompt to show the initializing deployment.

9.2. All the details of your project i.e. resource group, name, Repository etc.

10. Deployment in progress.

11. Deployment complete click Go to resource.

12. Click on the URL to view your deployed portfolio.

13. We completed the task. View our portfolio on a single page.

We followed the best practices of GitHub CI/CD, which means that when we make changes to our code in GitHub using GitHub codespaces, those changes are automatically deployed to our Azure Static Web App.

If you love the content clap for it😊😊😊.