Deployment of a static website on Azure Storage using Terraform

So initially I created a static website using Html , CSS and JavaScript. I have the following files in my local system : index.html , style.css and script.js .

Now, I wish to deploy the website (which is made up of these 3 files) on Azure using Terraform.

In order to do that we need to use the following codes :

main.tf file:

provider "azurerm" {
  features {}
}

resource "azurerm_resource_group" "rg" {
  name     = var.resource_group_name
  location = var.location
}

resource "azurerm_storage_account" "sa" {
  name                     = var.storage_account_name
  resource_group_name      = azurerm_resource_group.rg.name
  location                 = azurerm_resource_group.rg.location
  account_tier             = "Standard"
  account_replication_type = "LRS"

  static_website {
    index_document    = "index.html"
    error_404_document = "404.html"
  }
}

resource "azurerm_storage_blob" "index_html" {
  name                   = "index.html"
  storage_account_name   = azurerm_storage_account.sa.name
  storage_container_name = "$web"
  type                   = "Block"
  source                 = "index.html"
  content_type           = "text/html"
}

resource "azurerm_storage_blob" "script_js" {
  name                   = "script.js"
  storage_account_name   = azurerm_storage_account.sa.name
  storage_container_name = "$web"
  type                   = "Block"
  source                 = "script.js"
  content_type           = "application/javascript"
}

resource "azurerm_storage_blob" "style_css" {
  name                   = "style.css"
  storage_account_name   = azurerm_storage_account.sa.name
  storage_container_name = "$web"
  type                   = "Block"
  source                 = "style.css"
  content_type           = "text/css"
}

outputs.tf file:

output "static_website_url" {
  value = azurerm_storage_account.sa.primary_web_endpoint
}

variables.tf file:

variable "resource_group_name" {
  description = "The name of the resource group."
  default     = "resourcegroupname"
}

variable "location" {
  description = "The location of the resource group."
  default     = "East US"
}

variable "storage_account_name" {
  description = "The name of the storage account."
  default     = "storageaccountname"
}

So after doing all these things , this is how our system will look like :

Then we've to use the following commands:

terraform init

terraform plan

terraform apply

On doing so , our objective gets fulfilled and we get the following :

On opening the link , we can see the website .

Finally , destroy all the resources with the below command :

terraform destroy