STATIC WEBSITES
Static websites are essentially a collection of web pages with fixed content. Each page is coded in HTML and displays the same information to every visitor, just like a printed document.
Static websites are ideal for projects that require simple, unchanging information to be displayed, such as portfolios or small business websites.
DYNAMIC WEBSITES
A dynamic website displays different content and provides user interaction by leveraging server-side processing.
Dynamic websites are perfect for situations where content requires frequent updates or user engagement is a key aspect of the website's functionality.
As a prerequisite before setting up a static website using Azure storage, ensure that you do the following:
1. Download and set up Visual Studio Code on your personal computer.
2. Add the necessary extensions for Azure Subscription, Azure Account, and Azure storage account to Visual Studio Code.
3. Create a storage account through the Azure portal.
4. Create a folder that houses your static website data.
Let's get started
1- On your storage account click on the data management drop-down, then click on the static website.
2- a) Click on enable
b) On the index document name enter "index.html" and on the error document path enter "error.html". then click on save.
3- Your primary and secondary endpoints have been generated.
4- a) Go back to your storage account
b) Click on containers you can see that a web container has been created to host your static website.
5- a) Open your visual studio code
b) Click on the file, then click on Open folder.
6 - a) Click on the folder that hosts your static website data
b) Click on index.html.
7- a) Your HTML code automatically reflects as shown below
b) Click CNTL S to save .
8- To connect to your Azure click on Azure subscription.
9- Click on the storage account drop-down.
10- a) The storage account you created on Azure will be displayed
b) Right-click on it, then click on "Deploy to the static website via Azure Storage".
11- Select your folder to deploy the static website.
12- Once your deployment is completed, click on "browse to website".
13- Your static website will display as shown below and the link to your static website is highlighted below.
14- Open your $web container and you can see it has successfully hosted your static website data.
15- a) For error.html, click on add file
b) Give your error file the name "error.html".
16- a) Open the error.html
b) For this blog, I will be pasting my error code.
c) My error.html code has been pasted as displayed below
d) Click on CNTL S to save.
17- a) Click on Resources, then click on subscription
b) Click on storage accounts
c) The storage account you created on Azure will be displayed
d) Right-click on it, then click on the "Deploy to the static website via Azure Storage".
18- Select your folder to deploy the static website.
19- a) Once the deployment is completed
b) Click on "browse to website".
20- To confirm if your error code is working, you can add "/home" to the link highlighted in red below then click on enter. You should have the error message displayed below.
21- Go back to your $web container, you can see it has successfully hosted your error.htm static website data.
