DEV Community

anthony AMAJOH
anthony AMAJOH

Posted on

BLOG ON HOW TO HOST STATIC WEBSITE ON AZURE BLOB STORAGE

You will need to download Visual Studio Code. It is a code editor.
It is static because it is fixed i.e.one cannot interact with it.

STEPS
a. Download a sample website and save.
b. Open Visual Studio Code

i. To open Visual Studio Code; search for Visual Studio Code in the search bar at the bottom left, beside the windows icon
ii. Click on file at the top left. See below screenshot

Image description

iii. Select open folder from the dropdown to open the folder.

Image description

iv. Go to the download folder to select the folder you want to work on.
Click on it and select Folder

Image description

Image description

v. Click on index.html on visualstudio code to open it

Image description

vi. Then, you edit the portions written in white. They are between the tags. Extra care has to be taken so as not to delete or tamper with the codes.
The portions written in white are the things rendering on the page i.e. the things we can see on the page when it is opened on the browser.
After editing, you can now save.

  1. Go to Azure Portal i. Login to Azure ii. Create a Storage Account. Search for Storage Accounts in search bar, and select it

Image description

iii. Click on +Create on the top left of the page

Image description

iv. Edit the Basic page, leave the others at default. Then, review and create.

Image description

After successfully creating the storage account, click on go to Resource.

Image description

v. Locate the static website.
The static website can be located by either Clicking on 'capabilities' or by clicking 'Data Management' on left pane as shown below

Image description

Data Management
Click on Data Management, then, click on 'Static Website'

Image description

vi. After clicking static website; you enable it. Then, you input the index document name and the error document path. Then, you click save.
The index majorly is the root folder; from the index, you can link to other folders.

Image description

vii. After saving, an Azure Storage account will be created, as well as the 'Primary Endpoint link', and 'Secondary Endpoint link'. These links when opened on the browser will take you to your website.

Image description

viii. Go to Data Storage
Click on Containers. This will open the recently created storage account.
Click on the Azure storage account that was created

Image description

Image description

ix. Click on the Azure storage account, click 'upload' select the file to be uploaded from the folder. Drag and drop on the Azure storage account. Then, click on upload.

Image description

Image description

x. To access the website, go to the overview page.
Select Data Management, Click on Static website, and copy the 'Primary Endpoint', and paste it in your browser.

https://anthonywebsite.z19.web.core.windows.net/

Image description

Top comments (0)