BLOG ON HOW TO HOST STATIC WEBSITE ON AZURE BLOB STORAGE
anthony AMAJOH
Posted on July 5, 2024
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
iii. Select open folder from the dropdown to open the folder.
iv. Go to the download folder to select the folder you want to work on.
Click on it and select Folder
v. Click on index.html on visualstudio code to open it
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.
- Go to Azure Portal i. Login to Azure ii. Create a Storage Account. Search for Storage Accounts in search bar, and select it
iii. Click on +Create on the top left of the page
iv. Edit the Basic page, leave the others at default. Then, review and create.
After successfully creating the storage account, click on go to Resource.
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
Data Management
Click on Data Management, then, click on 'Static Website'
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.
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.
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
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.
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.
Posted on July 5, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 29, 2024