Personal resume website being hosted completely on Azure. This is part of the Azure Resume Challenge, where the goal is to create a 100% Azure-hosted version of your resume.
View it live here
A summary of it is a static site deployed to Blob Storage. That static site also fetches a visitor count from a Azure Function API to show a visitor count. That Azure Function API retrieves data from a Azure Cosmos DB and passes the count of visitors in the database. Lastly, Github Actions is used to create a CI/CD pipeline to deploy all changes to the front-end and/or back-end in Azure automatically.
The front-end is a static site being hosted with Azure Blob Storage. Here are some of the resources I used.
- HTML and CSS templated used from html5up and modified to fix my own design
- How to deploy a static site to Azure Blob Storage
Then create a Azure CDN endpoint
- Integrate a static website with Azure CDN and create an endpoint
- Map a custom domain to your Azure Blob Storage endpoint
The website then uses Javascript to make a API call That API is a Azure Function, a HTTP triggered Azure Function. It has a Cosmos DB input and output binding to retrieve visitor count and update it to the new count.
- Create a HTTP triggered Azure Function in Visual Studio
- Azure Functions Cosmos DB bindings
- Example on how to Retrieve a Cosmos DB item with Functions binding.
- Example on how to Write to a Cosmos DB item with Functions binding.
- You'll have to enable CORS with Azure Functions locally and once it's deployed to Azure for you website to be able to call it.
func host start --cors *
Lastly, the Github actions that create a CI/CD pipeline with Azure so any changes to the code is automatically updated in Azure
- This is how you can deploy a blob storage static site with GitHub actions.
- This is how you can deploy an Azure Function to Azure with GitHub Actions.