Getting started with Azure static web app

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.
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. 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.