Getting started with Azure static web app
Tags: azure
Published: 2022-03-14 21:35:43

Like many, I have some hobbies, some passions, natural wines. It is something I enjoy during my free time, and I talk a lot about this. So much, that one friend suggested that I should put my thoughts and my feelings on a blog. 
But I don't want to manage a website, deploying a WordPress in an Azure web app or a VM was not an option for me. I am a hobbyist, not a web dev, and I have no time to manage that. More, I wanted to use tools, I used every day to work, learn, and discover, Git, GitHub, and VSCode.
As I wanted something simple, I take a look at [Azure Static Web App]( https://docs.microsoft.com/en-us/azure/static-web-apps/overview?WT.mc_id=AZ-MVP-5003620). 
In short, Azure Static Web App publishes and deploys a full-stack web application based on frameworks like Angular or React. The web application is hosted in a repository and a GitHub action automatically publishes the change after each commit to Azure. 
For publishing a static web site, you can also use frameworks like Hugo, Gatsby, or VuePress. 

This last option is ideal for a small personal web site. You just need to concentrate on the content by creating pages using the markdown language, then push the change to GitHub and a Github action publish the change for you. 

To get started you will need an empty GitHub repository, public or private, and an Azure Account. 
On your local machine, you will need to install the Hugo framework.

On Mac OS with homebrew 

```
brew install hugo
``` 

On Windows with chocolatey 

``` 
choco install hugo
``` 

Now we can create a new static web site 

```
hugo new site <localname>
 
cd <localname> 

git init 
``` 

Now you need to think about a theme for the website. You can have a list of themes [here]( https://themes.gohugo.io/). I chose the Mainroad theme. 

To install the theme you can use a git submodule or download the theme directly into the themes folder of the website. 

```git submodule add https://github.com/Vimux/Mainroad.git themes/Mainroad
``` 

The next step is to create a configuration file at the root level to tell hugo to use the Mainroad theme. 

```
echo 'theme = "Mainroad"' >> config.toml 
``` 

You can now see how to customize the website by looking at the [Hugo site]( https://mainroad-demo.netlify.app/docs/customization/).

And add your first page

```
hugo new section/pagename.md
``` 
We can commit all the change 

```
git add --all
git commit -m "start new web site" 
``` 

And starts to push the commit to GitHub 

```
git remote add origin https://github.com/omiossec/boire-et-manger-prod.git

git branch -M main 

git push --set-upstream origin main 

git push origin main 
```

Now we can start to create the static web app in Azure. In the Azure portal, create a new resource group, and in this resource group, create a new resource. In the search box type static web app, and then create. 

Choose a name for the static web app and a hosting plan, free or Standard. Choose the location for the Azure function API and the deployment source (GitHub). 

Then click on “Sign in with GitHub”, the system will present a popup to Authorize Azure Static Web Apps to your Github account.

Then you will need to choose your organization, the repository, and the branch. 
Azure Static web app, will create and configure a GitHub Action workflow to deploy the web site.

Now any change made on the repository will trigger the workflow and publish the change to the website.