How to Create a Static Website With Basic Authentication on Azure Only Using Browser in 10 Minutes

Table of Contents

In this article, we will talk about how to build a static website on Azure, when accessed the user name and password are needed because the basic authentication module is added.

Create a free Azure account

What can you get from a free Azure account

• You will be able to access various Azure services for free for 12 months.
• You will also get $200 credit in your Azure account which you can use within the first 30 days.

How to create a free Azure account

If you have a Microsoft account or Github account, you can sign in without signing up steps.
I recommend that you can create a free Outlook.com email and use it to sign up Azure account.

Assuming you don’t have an Outlook.com email and let’s start it.

1. Create a Outlook.com email
   When you try to open Azure Portal https://portal.azure.com/ in browser, the below Sign-in page will display, click Create one!.

The [Create account] page will display. Click the [Get a new email address] link.

Enter your favorite user name before @outlook.com and click Next.

Next, Enter the password and click Next.

Select your Country/Region, and Enter your birthdate, and click Next.

Click Next to solve the puzzle for checking not a robot is registering an account.

Select the picture described by the text.

When you finished the puzzle, you will be able to log in to Azure successfully. The Azure portal page will display as below.

Create and deploy the sample static HTML website to Azure

Next, we will download the sample static website from Github and deploy it to Azure.
We will use the Cloud shell to execute necessary commands.
Click the command icon at the upper right of the Azure portal page.

At the bottom of the page, the shell panel will display.
For the first time, you have to select which shell to use. (Bash or PowerShell)

At this time, you haven’t a subscription yet, so let’s create our free subscription firstly.

Enter subscriptions in the search bar at the top of the Azure portal.
Click Subscriptions at the top of searched results.

Click +Add to create a subscription.

Select the Free Trial Offer.

Enter your information for your profile.

And enter your credit card information and address for verification.
You will not be charged for a Free Trial subscription unless changed to a Pay-As-You-Go subscription.

After you finished creating the Free Trial subscription, let’s try opening the Cloud shell again and Select Bash.
This time select Free Trial subscription and click Create storage.

And then the command line windows will display as below.

Enter the commands below and execute them.
Create a directory named quickstart.

mkdir quickstart

Move to this directory.

cd $HOME/quickstart

And next, let’s download the sample website code from Github.

git clone https://github.com/Azure-Samples/html-docs-hello-world.git

Next move to the repository folder.

cd html-docs-hello-world

Run az webapp up command to create a web app service and deploy our sample website to it.
It will take some time to execute this command.
In the process of execution, the following resources will be created.

• Resource group
• AppServicePlan
• webapp

az webapp up --location centralus --name staticwebsite2022 --html

The result of execution should be like the capture below.

Open the “URL” of the result in the browser, the page below shows up.

So you have created a static website, congratulations!
Next, let’s customize the home page (index.html).

Update Home Page (index.html)

Enter Resource groups in the search bar at the top of the Azure portal.
Click Resource groups at the top of searched results.

Find the resource group "*_rg_8428" created in the above command execution. Click it.

Click the App Service resource.

Then we will see the detail screen of the app service. As you can see, the URL we opened above is also here.
Let’s click App Service Editor in the menu on the left side. It is now in the preview stage.

Then click Go-> link in the main panel.

We will come to the editor interface of the website resources.
Click index.html on the left side of resource explorer.

The source code of index.html will show in the main panel for editing resources.
Let’s try to modify the content in line 19 and the changes will be saved automatically.

<h1>Hello Static HTML Site 2022</h1>

Let’s refresh or re-open the website URL, we’ll see the header has changed.

Until now, you have finished creating a static website in Azure and can modify it freely. But anyone can access your website.
If you want to protect it from public access, we can add basic authentication.

Add authentication module to website

Download and setup HttpAuthModule

We’ll use the open-source module HttpAuthModule to achieve this goal.
Similarly, we click the console menu on the left side of the web service resource.

We’ll access the root directory of the website.
The window-style path will show because our web server is windows.

Let’s execute the commands below.

git clone --depth=1 https://github.com/nabehiro/HttpAuthModule H
mkdir bin
cp H/P*/H* bin/
cp H/P*/W* .
rm -rf H

For configuring the user name and password, we have to open App Service Editor again like the above.

Find the configuration item with key Credentials and change its value.
Its configuration format is like the below. Multiple key-value sets can be set.
<username>:<password>

Let’s try to change the value to “test:testpass;".

And then refresh the website. The Sign-in dialog will show as below.

Let’s enter the user name(test) and password(testpass) set in the above step.
Click Sign in.

Then our home page will show again.

Conclusion

• To use Azure resources we created a free Azure account step by step.
• And we created a Free Trial subscription step by step for creating Azure resources.
• We downloaded the static website from Github and deploy it to a new web app using Cloud shell.
• We updated index.html in the App Service Editor.
• We added the basic authentication module to our website using the website server console and set our own user name and password.
• We used our user name and password to sign in to our website and access our website.

References

1. https://docs.microsoft.com/en-us/azure/app-service/quickstart-html
2. https://curlune.hatenablog.com/entry/2017/12/11/234000