Static websites are websites made up of pre-built files stored on a web server. They have stable contents but no database and the execution is client-sided, which means that any dynamic function or running the code is executed in the user's browser. These websites do not require regular or frequent updates such as resume websites and portfolio websites.
We will be demonstrating how to enable static web storage in Azure, download a static website to the system’s folder, upload and edit it on the Visual Studio code and upload or host the website in Azure storage. Furthermore, we will discuss how to add an error code to the static website in case of a typo in the URL, broken link or the page no longer existing.
Before we get started, you will need to have an an Azure subscription, you can log in here or go to Azure portal to create a free account. You will also need to create an Azure storage account with anonymous access (read this article to see how) and also download the Visual studio code (VS Code) with Azure extension installed in it.
NB: There will be some back and forth movements and connections between Azure and VS code.
AZURE PORTAL
Enable Static Website
After the storage account has been created;
a. Move the cursor to the left side bar and click on the drop down for data management
b. Click on “Static website”
c. When the new page glides out, click on “Enabled” to allow static website hosting on the storage account
d. Type Index.html and error.html in the columns for the index document name and error document name respectively.
e. Click on “Save” to save your changes.
Once the changes have been saved, you will observe that there will be two new columns showing “Primary endpoint” and “Secondary endpoint”.
Primary Endpoint: This is the uniform Resource Locator (URL) that is used to retrieve a public blob or container.
Secondary Endpoint: Can be used to access website content if redundancy is set up in a secondary region
f. Go back to the left pane and click on the drop down for “Data storage”
g. Click on “Containers” to view the content of the storage account.
You will notice a container with the name $web***;*** that is to show that your storage account has been enabled to host a static website.
Downloading a Static Website Template
a. Open a new browsing window and search for this website below for free website templates and themes.
b. Click and open any of the templates you would like to use, highlighted below
c. Download the template into your computer system
d. Open your Downloads on File explorer and you will notice that the downloaded folder is a compressed zipped folder
e. Right click on the folder and select “Extract” or “Extract all” to change it into a file folder.
As seen below, the folder has been changed to a file folder that can be opened to view it contents
f. Double click to open the file/folder or right click and select “Open” to view the contents of the folder.
The image below shows the contents of the downloaded folder; name, date modified, type and size.
VISUAL STUDIO CODE
Now, the static website template need to be added/uploaded onto the VS code to make some changes or enable editing.
a. Open the Visual Studio app on your system
b. Click on “File” at the top left of the page
c. Select “Open folder” to access the files in your computer system
The file explorer opens to show its contents.
d. Click on “Downloads”
e. Click on the file/folder and click on “Select folder”
The file gets uploaded onto VS Code, successfully.
f. Click on “index.html” to view the back-end code and edit the contents
g. Change or edit the personalized contents of the code to yours, as shown below
h. When this is done, press “Ctrl + S” to save your changes.
Deploying Static Website to Azure
a. Click on the Azure logo or sign (extension) at the left pane of the page as highlighted in the image below
b. Click on ”Sign in to Azure…”
A notification from VS code pops up to confirm that your Azure extension wants to sign in using Microsoft.
c. Click on “Allow” to continue signing-in
d. Click on the account that you want to sign in to.
My account was already signed in so I did not need to input my password. Follow the prompts on your screen to sign in if yours is different.
A notification to show that you are signed in and can close the page.
Go back to Visual Studio Code, Azure resources should show on the left pane.
e. Click on the drop down for “Azure subscription”
f. Click on the drop down for “Storage accounts”
g. Right click on the container where static website hosting on Azure was enabled and select “Deploy to static website via Azure storage…”
At the top of the page, there will be a box to select the folder to deploy.
h. You can either click the folder, highlighted below or click on “Browse” and follow the prompts.
Notification pops up to show that deployment is complete. You can click on “Browse to website” to view or go to Azure website directly to continue.
On the Azure website, the container is still open the way we left it earlier on. If not, take the following steps to view the contents of the container;
a. Click on the container you created to go to its page
b. On the left hand pane, click on the drop down for “Data storage”
c. Click on “Containers” to see the contents.
d. Click the highlighted web container- $web to open and view the contents.
The image below shows the contents of the container, which is exactly the same as the one on Visual Studio Code.
Open/View the Deployed Static Website
To view the deployed static website, do the following;
a. Click on the drop down arrow for “Data management”
b. Click on “static website”
c. Copy the “Primary endpoint”.
d. Open a new web browser tab
e. Paste and search the copied Primary endpoint
You will notice that the contents of the template that was used has been modified, like the image below.
Add Error Code or HTML
An Error page is a user-friendly way of informing visitors when they try to visit non-existent page on a website. It provides them with information and redirects them to another page. This comes up if the user types and searches a wrong URL, clicks a link to a page that no longer exists or the page was moved but the original link was not redirected.
To create an Error HTML or code, go back to Visual Studio Code and follow the steps below;
a. Click on the “Explorer” icon/extension to return to the downloaded static web template
b. Click on “Add new file” icon to add
c. Type “error.html” in the column provided and press “Enter” key
You will notice a blank page with the subheading “error.html” on the right side of the page beside index.html
d. Copy and paste in a custom error code
e. Press “Ctrl + S” to save the code
To deploy it on Azure, take the steps as previously done to deploy the index.html
a. Click on the drop down for “Azure subscription”
b. Click on the drop down for “Storage accounts”
c. Right click on the container where static website hosting on Azure was enabled and select “Deploy to static website via Azure storage…”
At the top of the page, there will be a box to select the folder to deploy.
Select the template or click on “Browse”, to search.
Two notification boxes pop up;
a. To notify that deploying will delete all existing files, Click “Delete and Deploy” to continue.
b. To inform that the static web is being deployed to your container in Azure
Another notification shows, to inform you that deployment is complete. You can click on “Browse to website” to view or go to Azure website directly to continue.
Take the following steps to view the contents of the container;
a. Click on the container you created to go to its page
b. On the left hand pane, click on the drop down for “Data storage”
c. Click on “Containers” to see the contents.
d. Click the highlighted web container- $web to open and view the contents.
Notice that the error.html which was not in the previous list of contents can now be seen in the list of contents as in the image below.
To view the deployed static website, do the following;
a. Click on the drop down arrow for “Data management”
b. Click on “static website”
c. Copy the “Primary endpoint”.
d. Open a new web browser tab
e. Paste the copied Primary endpoint and add “error” at the end of it, then search
You will notice the error page, like the image below.
Remember to delete your storage accounts after use or when not in use to avoid incurring extra costs. Check this page to see how to delete a storage account.
NB: Remember that this storage account will be soft deleted and can be retrieved within the selected number of days, as was entered in the Data Protection page during the creation of the storage account.