Simple Guide to Developing a Static Website with Azure Storage

On today’s episode of documenting my journey in the cloud space, I will give a detailed explanation about how I built a static website with Azure storage.

PREREQUISITE

a. Download and install VS Code application.

If you are ready to know how I went about it, sit back and follow me through it.

1. You would need to have created an Azure account.

2. You need to install Azure Tools on the VScode application.

Now, let’s get right into getting our static website up and running.

3. Create a Storage Account on Azure just like I have done mine in the illustrations below.

NB: I left most of the options in default mode for the purpose of this illustration.

4. After deployment is complete and the Storage has been created, Click on Go to resource.

5. Under the Data Storage, you have to create a Container. The indicators have been highlighted below for you to follow through with it. Remember to give the container a unique name. After all selections have been made, select Create.

6. Below, you can see the container has been created.

7. Next, you have to create a Static Website. Under Data Management, select Static Website. Toggle on the Static Website to enable it.

   Under Index document name, type index.html and type error.html under Error document name.

   After all selections have been made, Click Save.

8. Go to Containers under Data Storage, you would see the web container that has been created automatically.

9. I downloaded a free sample website template on themezy.com. Extracted the compressed folder that I downloaded to make it easy for use.

   Go to Downloads, Select the Compressed folder that has been downloaded, Right click on it and select Extract all.

10. At this point, you open the VScode application, install Azure Toolkits pluggin using Extensions icon.

11. Click on File, Open folder and select the folder that has been extracted. Click Select folder

11. You confirm that the folder has been downloaded by going to your Azure account, Select Container and Click on $web container. You would have all the files and folders in that container.

12. At this point, the folder has loaded on the application. You can make any changes or adjustments on the different files on the folder to suit your needs on VScode. Make sure to Save any changes you make on VScode for it to be implemented.

    

13. Click on the Azure icon to connect to your Azure account. Select the Azure subscription.

14. Go to the Storage Account, Select the storage account you created on Azure, right click and select Deploy to Static Website via Azure Storage.

15. Deployment begins and you have to wait a few minutes for it to be complete.

16. Deployment is complete. Select Browse to website.

17. After selecting, browse to a website, you are automatically directed to the website that you have hosted. Keep in mind that I made certain adjustments to the files in the folder and those adjustments can be seen on the site.

17. Below is how the original website looked without the adjustments that I made on the files in VScode.

17. Finally, the error.html was created to redirect anyone who must have wrongly inputted the address of the site. This informs the individual of being on the wrong path and redirects the person to the homepage of the correct url address.

I hope you enjoying following through and I hope I made it easier for you to create a static website with Azure storage.

Join me on this cloud adventure and elevate your tech skills! Sign in to the Azure portal, follow my easy instructions, and unleash the power of Being in the cloud.

Subscribe to my blog for more tech tips and tricks that will keep you ahead in the digital game. Your journey to mastering Cloud computing starts here!

🌟 Thank you for being a part of this incredible journey! Together, let's unlock new opportunities and make the most out of our digital experiences. Happy computing! 🌟