This content originally appeared on DEV Community and was authored by DEV Community
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.
This content originally appeared on DEV Community and was authored by DEV Community
DEV Community | Sciencx (2022-03-14T21:35:43+00:00) Getting started with Azure static web app. Retrieved from https://www.scien.cx/2022/03/14/getting-started-with-azure-static-web-app/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.