{"id":1320,"date":"2024-05-02T23:59:00","date_gmt":"2024-05-02T23:59:00","guid":{"rendered":"https:\/\/bogdanburuiana.com\/?p=1320"},"modified":"2024-07-08T12:46:19","modified_gmt":"2024-07-08T12:46:19","slug":"guide-to-migrating-a-static-website-to-azure-blob-storage-step-by-step-tutorial","status":"publish","type":"post","link":"https:\/\/bogdanburuiana.com\/index.php\/2024\/05\/02\/guide-to-migrating-a-static-website-to-azure-blob-storage-step-by-step-tutorial\/","title":{"rendered":"Migrating a Website to Azure Blob Storage"},"content":{"rendered":"\n<p>In this article, we will explore the process of migrating a static website to Azure using Azure Blob Storage.<\/p>\n\n\n\n<p>Navigate to the Azure portal and click on &#8220;Storage Accounts&#8221; or use the search bar to locate and select &#8220;Storage Accounts.&#8221; Then, click on &#8220;Add.&#8221;<\/p>\n\n\n\n<p>For the purpose of this blog post, we will keep the Region and Performance settings at their default values. However, it&#8217;s important to familiarize yourself with these options and adjust them according to your requirements. Note that the Account kind must remain as &#8220;StorageV2&#8221; to enable hosting of a static website. Additionally, consider modifying the Location if you do not plan to utilize Azure CDN.<\/p>\n\n\n\n<ol>\n<li><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"952\" height=\"822\" data-id=\"1333\" src=\"\/wp-content\/uploads\/2024\/07\/Screenshot_1-1.jpg\" alt=\"\" class=\"wp-image-1333\" srcset=\"\/wp-content\/uploads\/2024\/07\/Screenshot_1-1.jpg 952w, \/wp-content\/uploads\/2024\/07\/Screenshot_1-1-300x259.jpg 300w, \/wp-content\/uploads\/2024\/07\/Screenshot_1-1-768x663.jpg 768w\" sizes=\"(max-width: 952px) 100vw, 952px\" \/><\/figure>\n<\/figure>\n\n\n\n<p>To leverage the power of Azure Blob Storage for hosting your static website, you first need to <strong>enable static website hosting<\/strong> on your storage account. Navigate to the account&#8217;s <strong>Overview <\/strong>pane and select the <strong>Capabilities<\/strong> tab. Here, you&#8217;ll find the option to enable Static Website hosting. <\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"440\" data-id=\"1337\" src=\"\/wp-content\/uploads\/2024\/07\/Screenshot_2-1-1024x440.jpg\" alt=\"\" class=\"wp-image-1337\" srcset=\"\/wp-content\/uploads\/2024\/07\/Screenshot_2-1-1024x440.jpg 1024w, \/wp-content\/uploads\/2024\/07\/Screenshot_2-1-300x129.jpg 300w, \/wp-content\/uploads\/2024\/07\/Screenshot_2-1-768x330.jpg 768w, \/wp-content\/uploads\/2024\/07\/Screenshot_2-1-1536x660.jpg 1536w, \/wp-content\/uploads\/2024\/07\/Screenshot_2-1.jpg 1980w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/figure>\n\n\n\n<p>Once enabled, specify the default index document (e.g., index.html) and error document (e.g., 404.html). Click &#8216;Save&#8217; to finalize the configuration, and your static website will be ready to serve content efficiently from Azure Blob Storage.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"762\" data-id=\"1340\" src=\"\/wp-content\/uploads\/2024\/07\/Screenshot_3-1-1024x762.jpg\" alt=\"\" class=\"wp-image-1340\" srcset=\"\/wp-content\/uploads\/2024\/07\/Screenshot_3-1-1024x762.jpg 1024w, \/wp-content\/uploads\/2024\/07\/Screenshot_3-1-300x223.jpg 300w, \/wp-content\/uploads\/2024\/07\/Screenshot_3-1-768x572.jpg 768w, \/wp-content\/uploads\/2024\/07\/Screenshot_3-1.jpg 1147w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/figure>\n\n\n\n<p>Next, I uploaded the website content.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-4 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"583\" height=\"925\" data-id=\"1342\" src=\"\/wp-content\/uploads\/2024\/07\/Screenshot_4-1.jpg\" alt=\"\" class=\"wp-image-1342\" srcset=\"\/wp-content\/uploads\/2024\/07\/Screenshot_4-1.jpg 583w, \/wp-content\/uploads\/2024\/07\/Screenshot_4-1-189x300.jpg 189w\" sizes=\"(max-width: 583px) 100vw, 583px\" \/><\/figure>\n<\/figure>\n\n\n\n<p>And the site was live! Unfortunately, I made a mistake, and instead of opening the website pages, they were being downloaded. So, let&#8217;s take a look at this issue<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-5 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"189\" data-id=\"1344\" src=\"\/wp-content\/uploads\/2024\/07\/Screenshot_5-1-1024x189.jpg\" alt=\"\" class=\"wp-image-1344\" srcset=\"\/wp-content\/uploads\/2024\/07\/Screenshot_5-1-1024x189.jpg 1024w, \/wp-content\/uploads\/2024\/07\/Screenshot_5-1-300x55.jpg 300w, \/wp-content\/uploads\/2024\/07\/Screenshot_5-1-768x142.jpg 768w, \/wp-content\/uploads\/2024\/07\/Screenshot_5-1-1536x283.jpg 1536w, \/wp-content\/uploads\/2024\/07\/Screenshot_5-1-2048x378.jpg 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/figure>\n\n\n\n<p>The issue arose because the <strong>content-type<\/strong> of the files was not set to <strong>text\/html,<\/strong> so I had to update this setting for all files.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-6 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"103\" data-id=\"1347\" src=\"\/wp-content\/uploads\/2024\/07\/Screenshot_8-2-1024x103.jpg\" alt=\"\" class=\"wp-image-1347\" srcset=\"\/wp-content\/uploads\/2024\/07\/Screenshot_8-2-1024x103.jpg 1024w, \/wp-content\/uploads\/2024\/07\/Screenshot_8-2-300x30.jpg 300w, \/wp-content\/uploads\/2024\/07\/Screenshot_8-2-768x77.jpg 768w, \/wp-content\/uploads\/2024\/07\/Screenshot_8-2-1536x155.jpg 1536w, \/wp-content\/uploads\/2024\/07\/Screenshot_8-2.jpg 1809w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article, we will explore the process of migrating a static website to Azure using Azure Blob Storage. Navigate to the Azure portal and click on &#8220;Storage Accounts&#8221; or use the search bar to locate and select &#8220;Storage Accounts.&#8221; Then, click on &#8220;Add.&#8221; For the purpose of this blog post, we will keep the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/bogdanburuiana.com\/index.php\/wp-json\/wp\/v2\/posts\/1320"}],"collection":[{"href":"https:\/\/bogdanburuiana.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bogdanburuiana.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bogdanburuiana.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bogdanburuiana.com\/index.php\/wp-json\/wp\/v2\/comments?post=1320"}],"version-history":[{"count":14,"href":"https:\/\/bogdanburuiana.com\/index.php\/wp-json\/wp\/v2\/posts\/1320\/revisions"}],"predecessor-version":[{"id":1351,"href":"https:\/\/bogdanburuiana.com\/index.php\/wp-json\/wp\/v2\/posts\/1320\/revisions\/1351"}],"wp:attachment":[{"href":"https:\/\/bogdanburuiana.com\/index.php\/wp-json\/wp\/v2\/media?parent=1320"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bogdanburuiana.com\/index.php\/wp-json\/wp\/v2\/categories?post=1320"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bogdanburuiana.com\/index.php\/wp-json\/wp\/v2\/tags?post=1320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}