How to Download a Portfolio Template from ThemeWagon and Host it on Azure Blob Storage

Azure Blob Storage is an excellent choice for hosting static websites due to its scalability, affordability, and ease of use. In this guide, we’ll walk you through the steps to deploy and host a static website using Azure Blob Storage.

What is Azure Blob Storage?

Azure Blob Storage is a cloud-based service for storing large amounts of unstructured data. It supports hosting static content like HTML, CSS, JavaScript, and images, making it a great option for static websites.

Step-by-Step Guide to Hosting a Static Website on Azure Blob Storage

Creating and hosting a portfolio website has never been easier! With platforms like ThemeWagon providing stunning free and premium templates, and Azure Blob Storage offering cost-effective hosting, you can get your site online in no time.

In this guide, we’ll walk you through:

1. Downloading a portfolio template from ThemeWagon.

2. Hosting your static website on Azure Blob Storage

---

Step 1: Download a Portfolio Template from ThemeWagon

---

Step 1.1: Visit the ThemeWagon Website

1. Open your web browser and go to the ThemeWagon website.

2. Use the search bar or navigate to the Portfolio Templates section.

   

   

---

Step 1.2: Choose Your Template

1. Browse through the portfolio templates.

2. Click on a template to view its details. Check out the demo to ensure it meets your requirements.

---

Step 1.3: Download the Template

1. If the template is free:

   • Click the Download button and save the .zip file to your computer.

2. For premium templates:

   • Purchase the template, then download the .zip file.

---

Step 1.4: Extract the Template Files

1. Locate the downloaded .zip file.

   

2. Extract the contents to a folder using tools like WinRAR or 7-Zip.

   

3. Inside the extracted folder, you'll find:

   • index.html

   • Folders for CSS, JavaScript, images, etc.

     

   • Go to your code editor and Open the unzipped Folder using any code Editor of your choice e.g Visual studio code(VS code)

     

     

Create a new file 404.html and paste the codes below

• And then Save using Control S for Windows or Command S for Mac

---

Step 2: Host the Static Website on Azure Blob Storage

Azure Blob Storage is ideal for hosting static websites. Follow these steps to deploy your downloaded template.

---

Step 2.1: Create an Azure Storage Account

1. Log in to the Azure Portal.

   

2. Click Create a resource > Storage > Storage account.

   

   

   

3. Fill in the required fields:

   • Resource group: Select an existing one or create a new one.

   • Storage account name: Enter a globally unique name.

   • Region: Choose a region close to your audience.

   • Performance: Choose Standard.

   • Redundancy: Select LRS (Locally Redundant Storage).

4. Click Review + Create, and then click Create.

   

   

   

   

---

Step 2.2: Enable Static Website Hosting

1. Open your storage account in the Azure Portal.

2. In the left-hand menu, select Static website under Data management.

   

3. Toggle Static website to Enabled.

   • Index document name: Enter index.html.

   • Error document path: (Optional) Enter 404.html.

     

4. Click Save. Azure will provide a Primary Endpoint URL—this is your website’s public address.

   

---

Step 2.3: Upload Your Template Files

1. Navigate to the Containers section of your storage account.

   

   

2. Open the $web container (automatically created when static website hosting is enabled).

   

3. Click Upload and select all files from your extracted folder (HTML, CSS, JavaScript, images, etc.).

   • Maintain the folder structure as it is.

     

     

     

---

Step 2.4: Test Your Website

1. Copy the Primary Endpoint URL from the Static Website settings.

2. Paste it into your browser. Your portfolio website should now be live!

   

---

Step 3: (Optional) Add a Custom Domain

To make your website more professional, you can add a custom domain.

1. Update your domain’s DNS settings to include a CNAME record pointing to the Azure website endpoint.

2. In the Azure Portal, navigate to the Custom domain section of your storage account.

3. Enter your custom domain name and validate it.

---

Step 4: (Optional) Enable HTTPS

Azure Blob Storage provides HTTPS for the default domain. To enable HTTPS for a custom domain:

1. Use Azure Front Door or Azure CDN.

2. Follow the configuration steps to secure your site.

---

Conclusion

By following these steps, you can easily create and host a stunning portfolio website:

1. Download a professional template from ThemeWagon.

2. Host it on Azure Blob Storage for reliable and scalable access.

Now, go ahead and showcase your work with your new portfolio site!

Happy Hosting! 🎉