Deploy Your Portfolio Website with Azure DevOps
In the previous article, we have successfully claimed our Azure Student account. Now, let’s continue our learning journey by exploring the Azure services.
In this session, we are going to explore two Azure services, which are Azure Static Web Apps and Azure DevOps. Azure Static Web Apps is a part of Azure App Service that provides the capability to host a static website, for example, your portfolio website. So, prepare the portfolio website for first. We could use templates provided by CSS Framework, such as Bootstrap or Tailwind. I have prepared mine and if you’d like to use it as well, you could access it here. When you are ready with this, let’s jump into the main steps.
There are many ways to deploy your portfolio website. In the Azure cloud environment, we could use Azure DevOps. Azure DevOps provides the ability to build organizations and manage project plans, code development and collaboration, testing, and deployment. With this service, we could deploy our portfolio website as soon as we commit changes in our code repository.
Prepare the Azure DevOps
To use Azure DevOps, sign in to your Azure account here. Next, let’s create an organization. You could use any name for the organization. Since it would be a personal website, I prefer to use my username here. In the region section, it is recommended to select a region where your target users most live in. Or simply just choose the region where you live in.
Then, let’s create a project. Fill the Project name with a name that represents what the project is about. You could let the rest on its default option. After that, hit the Create project button.
Here is the project dashboard. To host our website, we should create a code repository. So, click Repos on the dashboard or the sidebar.
There are two ways to add code to our repository, by cloning DevOps Repos to our local computer or by pushing an existing repository on our local computer. Since we have prepared our portfolio website, we are going to choose the second option.
In case you do not yet initiate your code as a “git repository”, you could run this command in your terminal (GNU/Linux or macOS users) or git bash (Windows users).
git init .
git branch -m master main
git add . && git commit -m "initial commit"Thereafter, run the command provides on your Repos page. You could hit the copy-paste icon to make sure you run the same command.
Since we use HTTPS as our protocol, git would ask for a password. We could get the password by hitting the Generate Git Credentials on the Repos page and then just paste it on the terminal.
Here is what the Repos page would look like after we have pushed our code.
Great! Now, let’s continue to set up the Static Web Apps!
Build an Azure Static Web Apps
Navigate to the Azure Portal, then use the search bar to find the Static Web Apps service.
On the Static Web Apps dashboard, click on the Create button. After that, fill in the form to create a static web app. The Name section doesn’t need to be exact with your DevOps Project name.
On the Plan type, make sure you use the Free option to avoid credit charges. In the Region section, it is recommended to choose the nearest region where you live in. Last, change the Source from “GitHub” to “Other” since we would use Azure DevOps as our deployment service. Next, hit the Review + create button to deploy your Static Web App resource.
When the resource deployment is complete, then Go to resource. Take a look at the Manage deployment token. A side window would appear with some random text. The text is called “deployment token” and we will use it in our next steps on the Azure DevOps. Let’s copy the token and place it in a note.
You must also see a URL for your static website in a form of https://xxxxx-xxxx.azurestaticapps.net. For now, the website does not have any content yet. We want to use our repository on Azure DevOps as the content, so let’s back to the Azure DevOps Repos page.
Deploy the Static Web App
Azure DevOps provides CI/CD pipeline feature that enables you to automatically deploy your code when there are any changes on it. To activate the pipeline, click the Set up build button on your Repos page.
On the configuration page, choose Starter pipeline.
Thereafter, we should make a YAML script to tell Azure DevOps how our website is built and deployed. Replace the existing configuration script with the below one.
Take a look on the app_location and output_location. Make sure that the path is matched with your index.html path. Since my index is located on the project root, I use / here. In case your index is on the project subdirectory, you could use /your_directory in your app_location and output_location. The api_location is filled with empty text since we don’t use any API in our static portfolio website.
Next, click on the Variables button, then create a New variable. Set the variable name to deployment_token and set its value with the deployment token from your Static Web App resource. Click OK then Save.
Afterward, click Save and run. We could let the commit messages as default, and once again hit Save and run.
And then… an error!
This error occurs because the Azure DevOps account does not have enough, or even doesn’t have any, parallelism capacity. We should fill out a form to request parallelism capacity here. When Azure has reviewed your request, a notification would be sent to your email.
Thereafter, navigate again to the Azure DevOps Pipelines page and Rerun failed jobs. The successful pipeline job would look like the second image below.
Perfect, the deployment success! So now…
Visit the Portfolio Website
Remember the link from your Static Web App resource? Let’s visit it again! Now, it must have the content you set up on your repository. For example, here is mine.
Well done!
We have hosted our portfolio in the Azure Static Web App resource. We have also learned how to use Azure DevOps to deploy the website. Some processes may feel complicated, e.g. the parallelism request. But, let’s enjoy our learning journey.
There are still a lot of services we could explore on Azure. Keep the learning spirit up!
