Host Static Web Sites for Free in Azure

Published Feb 11 2022 07:08 AM 2,503 Views
Microsoft

SameerDoshi_2-1644535977453.png

Have a simple site that’s just html, css, javascript and other static content?  You can host it for free in Azure. Not only is it free to host it is much easier to maintain than most off the self content management systems.

Scenario

Recently a colleague  had a simple question: How do I host my static site in Azure? The customer had been using a 3rd party hosting service that provided them an FTP directory- anything they put into the directory would appear on their domain. The information on the site changed approximately once a year.  The site was hosted on a custom domain and used a free LetsEncrypt certificate that was auto-renewed by the LetsEncrypt bot.

Why Not Use Static Web Sites For Blob

My colleague  initially tried using Static Web Sites for Blob.  The problem was that he could not use a built in certificate rotation because he wanted to host his content on a naked domain (ex: https://mydomain.com or www.mydomain.com).

Fortunately, Azure Static Web Apps (SWA) solved his problem. Here’s what we did.

Host Static Content on SWA

There are only a few simple steps to get your site live!

First, put all your content into a GitHub repo. The repo can be public or private.

Second, Deploy an Azure Static Web App.

Under Build Details select the template “Custom” point the app location to the location of the static content in your GitHub repo. If your static content is at the base of your repo just enter ”/” and leave all other fields blank.

SameerDoshi_1-1644535487728.png

 

Once the deployment is complete go back to your GitHub repo.  Azure Static Web Apps has inserted a new file that we’ll need to edit.

Edit the file under .github/workflows

The file will have a unique name.

You’ll need to add a line to the workflow:

 

 

skip_app_build: true

 

 

Here's a full snippet as where line 14 shows the skip_app_build inserted an example:

 

 

 

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          skip_app_build: true
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ASHY_STONE_0BDFA3010 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######

 

 

Save and commit and that’s it!

In a few moments your content is con the web at an SWA address like 3424.blue-orchard.azurewebsites.com .

 

Now when the contents of the GitHub repo are modified the GitHub workflow will copy the new content and update the site for you!

 

What about SSL? As soon as you add a custom domain SWA will automatically get an SSL cert that matches your domain. It will renew as needed- you need to do nothing else!

 

Link to the full documentation for the azure-static-web-app deployment workflow can be found.

 

Benefits of Azure Static Web Apps

Static Web Apps have many benefits- even at the free tier.

  1. Free
  2. Add a custom domain (on the free tier)
  3. Free, auto renewed SSL certs
  4. Scale to premium or use cdn for even better performance
  5. No infrastructure ot manage or upgrade
  6. Adds source control to your static site

Reference: A full comparison of SWA and Static Sties for Blob.

Among all of these benefits the addition of source control to your static content can’t be understated. 


Most importantly- with SWA you can get started right now, for FREE!

%3CLINGO-SUB%20id%3D%22%5C%26quot%3Blingo-sub-3152200%5C%26quot%3B%22%20slang%3D%22%5C%26quot%3Ben-US%5C%26quot%3B%22%3EHost%20Static%20Web%20Sites%20for%20Free%20in%20Azure%26lt%3B%5C%2Flingo-sub%26gt%3B%3CLINGO-BODY%20id%3D%22%5C%26quot%3Blingo-body-3152200%5C%26quot%3B%22%20slang%3D%22%5C%26quot%3Ben-US%5C%26quot%3B%22%3E%3CP%3EHave%20a%20simple%20site%20that%E2%80%99s%20just%20html%2C%20css%2C%20javascript%20and%20other%20static%20content%3F%26nbsp%3B%20You%20can%20host%20it%20for%20free%20in%20Azure.%20Not%20only%20is%20it%20free%20to%20host%20it%20is%20much%20easier%20to%20maintain%20than%20most%20off%20the%20self%20content%20management%20systems.%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CH1%20id%3D%22%5C%26quot%3Btoc-hId--2134795850%5C%26quot%3B%22%20id%3D%22toc-hId--2134729446%22%20id%3D%22toc-hId--2134729446%22%20id%3D%22toc-hId--2134729446%22%3EScenario%26lt%3B%5C%2FH1%26gt%3B%5Cn%3CP%3ERecently%20a%20colleague%20%26nbsp%3Bhad%20a%20simple%20question%3A%20How%20do%20I%20host%20my%20static%20site%20in%20Azure%3F%20The%20customer%20had%20been%20using%20a%203%3CSUP%3Erd%26lt%3B%5C%2FSUP%26gt%3B%20party%20hosting%20service%20that%20provided%20them%20an%20FTP%20directory-%20anything%20they%20put%20into%20the%20directory%20would%20appear%20on%20their%20domain.%20The%20information%20on%20the%20site%20changed%20approximately%20once%20a%20year.%26nbsp%3B%20The%20site%20was%20hosted%20on%20a%20custom%20domain%20and%20used%20a%20free%20LetsEncrypt%20certificate%20that%20was%20auto-renewed%20by%20the%20LetsEncrypt%20bot.%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FSUP%3E%3C%2FP%3E%3C%2FH1%3E%3CH1%20id%3D%22%5C%26quot%3Btoc-hId-352716983%5C%26quot%3B%22%20id%3D%22toc-hId-352783387%22%20id%3D%22toc-hId-352783387%22%20id%3D%22toc-hId-352783387%22%3EWhy%20Not%20Use%20Static%20Web%20Sites%20For%20Blob%26lt%3B%5C%2FH1%26gt%3B%5Cn%3CP%3EMy%20colleague%20%26nbsp%3Binitially%20tried%20using%20%3CA%20href%3D%22%5C%26quot%3Bhttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fazure%2Fstorage%2Fblobs%2Fstorage-blob-static-website-host%5C%26quot%3B%22%20target%3D%22%5C%26quot%3B_blank%5C%26quot%3B%22%20rel%3D%22%5C%26quot%3Bnoopener%20nofollow%20noopener%20noreferrer%22%20noreferrer%3D%22%22%3EStatic%20Web%20Sites%20for%20Blob%26lt%3B%5C%2FA%26gt%3B.%20%26nbsp%3BThe%20problem%20was%20that%20he%20could%20not%20use%20a%20built%20in%20certificate%20rotation%20because%20he%20wanted%20to%20host%20his%20content%20on%20a%20naked%20domain%20(ex%3A%20%3C%2FA%3E%3CA%20href%3D%22%5C%26quot%3Bhttps%3A%2F%2Fmydomain.com%5C%26quot%3B%22%20target%3D%22%5C%26quot%3B_blank%5C%26quot%3B%22%20rel%3D%22%5C%26quot%3Bnoopener%20nofollow%20noopener%20noreferrer%22%20nofollow%3D%22%22%20noreferrer%3D%22%22%3Ehttps%3A%2F%2Fmydomain.com%26lt%3B%5C%2FA%26gt%3B%20or%20%3C%2FA%3E%3CA%20href%3D%22%5C%26quot%3Bhttp%3A%2F%2Fwww.mydomain.com%5C%26quot%3B%22%20target%3D%22%5C%26quot%3B_blank%5C%26quot%3B%22%20rel%3D%22%5C%26quot%3Bnoopener%20nofollow%20noopener%20noreferrer%22%20nofollow%3D%22%22%20noreferrer%3D%22%22%3Ewww.mydomain.com%26lt%3B%5C%2FA%26gt%3B).%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FA%3E%3C%2FP%3E%3CP%3EFortunately%2C%20%3CA%20href%3D%22%5C%26quot%3Bhttps%3A%2F%2Fazure.microsoft.com%2Fen-us%2Fservices%2Fapp-service%2Fstatic%2F%5C%26quot%3B%22%20target%3D%22%5C%26quot%3B_blank%5C%26quot%3B%22%20rel%3D%22%5C%26quot%3Bnoopener%20nofollow%20noopener%20noreferrer%22%20noreferrer%3D%22%22%3EAzure%20Static%20Web%20Apps%26lt%3B%5C%2FA%26gt%3B%20(SWA)%20solved%20his%20problem.%20Here%E2%80%99s%20what%20we%20did.%26lt%3B%5C%2FP%26gt%3B%5Cn%3CH1%20id%3D%22%5C%26quot%3Btoc-hId--1454737480%5C%26quot%3B%22%20id%3D%22toc-hId-352783387%22%20id%3D%22toc-hId-352783387%22%20id%3D%22toc-hId-352783387%22%3EHost%20Static%20Content%20on%20SWA%26lt%3B%5C%2FH1%26gt%3B%5Cn%3CP%3EThere%20are%20only%20a%20few%20simple%20steps%20to%20get%20your%20site%20live!%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3EFirst%2C%20put%20all%20your%20content%20into%20a%20GitHub%20repo.%20The%20repo%20can%20be%20public%20or%20private.%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3ESecond%2C%20%3CA%20href%3D%22%5C%26quot%3Bhttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fazure%2Fstatic-web-apps%2Fget-started-portal%3Ftabs%3Dvanilla-javascript%23create-a-static-web-app%5C%26quot%3B%22%20target%3D%22%5C%26quot%3B_blank%5C%26quot%3B%22%20rel%3D%22%5C%26quot%3Bnoopener%20nofollow%20noopener%20noreferrer%22%20noreferrer%3D%22%22%3EDeploy%20an%20Azure%20Static%20Web%20App%26lt%3B%5C%2FA%26gt%3B.%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FA%3E%3C%2FP%3E%3CP%3EUnder%20Build%20Details%20select%20the%20template%20%E2%80%9CCustom%E2%80%9D%20point%20the%20app%20location%20to%20the%20location%20of%20the%20static%20content%20in%20your%20GitHub%20repo.%20If%20your%20static%20content%20is%20at%20the%20base%20of%20your%20repo%20just%20enter%20%E2%80%9D%2F%E2%80%9D%20and%20leave%20all%20other%20fields%20blank.%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22%5C%26quot%3Blia-inline-image-display-wrapper%22%20lia-image-align-inline%3D%22%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Fgxcuf89792%2F%5C%26quot%3Bhttps%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F347167i3FD22CFEE8B7477D%2Fimage-size%2Fmedium%3Fv%3Dv2%26amp%3Bpx%3D400%5C%26quot%3B%22%20role%3D%22%5C%26quot%3Bbutton%5C%26quot%3B%22%20title%3D%22SameerDoshi_1-1644535487728.png%22%20alt%3D%22%5C%26quot%3BSameerDoshi_1-1644535487728.png%5C%26quot%3B%22%20%2F%3E%26lt%3B%5C%2Fspan%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3EOnce%20the%20deployment%20is%20complete%20go%20back%20to%20your%20GitHub%20repo.%20%26nbsp%3BAzure%20Static%20Web%20Apps%20has%20inserted%20a%20new%20file%20that%20we%E2%80%99ll%20need%20to%20edit.%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3EEdit%20the%20file%20under%20%3CA%20href%3D%22%5C%26quot%3Bhttps%3A%2F%2Fgithub.com%2FSameerDoshi%2FSampleStaticContentSite%2Ftree%2Fmain%2F.github%2Fworkflows%5C%26quot%3B%22%20target%3D%22%5C%26quot%3B_blank%5C%26quot%3B%22%20rel%3D%22%5C%26quot%3Bnoopener%20nofollow%20noopener%20noreferrer%22%20noreferrer%3D%22%22%3E%3CSPAN%3E.github%2F%26lt%3B%5C%2FSPAN%26gt%3Bworkflows%26lt%3B%5C%2FA%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FSPAN%3E%3C%2FA%3E%3C%2FP%3E%3CP%3EThe%20file%20will%20have%20a%20unique%20name.%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3EYou%E2%80%99ll%20need%20to%20add%20a%20line%20to%20the%20workflow%3A%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3CPRE%20class%3D%22%5C%26quot%3Blia-code-sample%22%20language-applescript%3D%22%22%3E%3CCODE%3Eskip_app_build%3A%20true%26lt%3B%5C%2Fcode%26gt%3B%26lt%3B%5C%2Fpre%26gt%3B%5Cn%3C%2FCODE%3E%3C%2FPRE%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3EHere's%20a%20full%20snippet%20as%20where%20line%2014%20shows%20the%20skip_app_build%20inserted%20an%20example%3A%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3CPRE%20class%3D%22%5C%26quot%3Blia-code-sample%22%20language-yaml%3D%22%22%3E%3CCODE%3Ejobs%3A%5Cn%20%20build_and_deploy_job%3A%5Cn%20%20%20%20if%3A%20github.event_name%20%3D%3D%20%5C'push%5C'%20%7C%7C%20(github.event_name%20%3D%3D%20%5C'pull_request%5C'%20%26amp%3B%26amp%3B%20github.event.action%20!%3D%20%5C'closed%5C')%5Cn%20%20%20%20runs-on%3A%20ubuntu-latest%5Cn%20%20%20%20name%3A%20Build%20and%20Deploy%20Job%5Cn%20%20%20%20steps%3A%5Cn%20%20%20%20%20%20-%20uses%3A%20actions%2Fcheckout%40v2%5Cn%20%20%20%20%20%20%20%20with%3A%5Cn%20%20%20%20%20%20%20%20%20%20submodules%3A%20true%5Cn%20%20%20%20%20%20-%20name%3A%20Build%20And%20Deploy%5Cn%20%20%20%20%20%20%20%20id%3A%20builddeploy%5Cn%20%20%20%20%20%20%20%20uses%3A%20Azure%2Fstatic-web-apps-deploy%40v1%5Cn%20%20%20%20%20%20%20%20with%3A%5Cn%20%20%20%20%20%20%20%20%20%20skip_app_build%3A%20true%5Cn%20%20%20%20%20%20%20%20%20%20azure_static_web_apps_api_token%3A%20%24%7B%7B%20secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ASHY_STONE_0BDFA3010%20%7D%7D%5Cn%20%20%20%20%20%20%20%20%20%20repo_token%3A%20%24%7B%7B%20secrets.GITHUB_TOKEN%20%7D%7D%20%23%20Used%20for%20Github%20integrations%20(i.e.%20PR%20comments)%5Cn%20%20%20%20%20%20%20%20%20%20action%3A%20%5C%22upload%5C%22%5Cn%20%20%20%20%20%20%20%20%20%20%23%23%23%23%23%23%20Repository%2FBuild%20Configurations%20-%20These%20values%20can%20be%20configured%20to%20match%20your%20app%20requirements.%20%23%23%23%23%23%23%5Cn%20%20%20%20%20%20%20%20%20%20%23%20For%20more%20information%20regarding%20Static%20Web%20App%20workflow%20configurations%2C%20please%20visit%3A%20https%3A%2F%2Faka.ms%2Fswaworkflowconfig%5Cn%20%20%20%20%20%20%20%20%20%20app_location%3A%20%5C%22%2F%5C%22%20%23%20App%20source%20code%20path%5Cn%20%20%20%20%20%20%20%20%20%20api_location%3A%20%5C%22%5C%22%20%23%20Api%20source%20code%20path%20-%20optional%5Cn%20%20%20%20%20%20%20%20%20%20output_location%3A%20%5C%22%5C%22%20%23%20Built%20app%20content%20directory%20-%20optional%5Cn%20%20%20%20%20%20%20%20%20%20%23%23%23%23%23%23%20End%20of%20Repository%2FBuild%20Configurations%20%23%23%23%23%23%23%26lt%3B%5C%2Fcode%26gt%3B%26lt%3B%5C%2Fpre%26gt%3B%5Cn%3C%2FCODE%3E%3C%2FPRE%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3ESave%20and%20commit%20and%20that%E2%80%99s%20it!%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3EIn%20a%20few%20moments%20your%20content%20is%20con%20the%20web%20at%20an%20SWA%20address%20like%203424.blue-orchard.azurewebsites.com%20.%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3ENow%20when%20the%20contents%20of%20the%20GitHub%20repo%20are%20modified%20the%20GitHub%20workflow%20will%20copy%20the%20new%20content%20and%20update%20the%20site%20for%20you!%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3EWhat%20about%20SSL%3F%20As%20soon%20as%20you%20add%20a%20custom%20domain%20SWA%20will%26nbsp%3B%3CEM%3Eautomatically%26lt%3B%5C%2FEM%26gt%3B%20get%20an%20SSL%20cert%20that%20matches%20your%20domain.%20It%20will%20renew%20as%20needed-%20you%20need%20to%20do%20nothing%20else!%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FEM%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%3CA%20href%3D%22%5C%26quot%3Bhttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fazure%2Fstatic-web-apps%2Fbuild-configuration%3Ftabs%3Dgithub-actions%23build-and-deploy%5C%26quot%3B%22%20target%3D%22%5C%26quot%3B_blank%5C%26quot%3B%22%20rel%3D%22%5C%26quot%3Bnoopener%20nofollow%20noopener%20noreferrer%22%20noreferrer%3D%22%22%3ELink%20to%20the%20full%20documentation%20for%20the%20azure-static-web-app%20deployment%20workflow%20can%20be%20found.%26lt%3B%5C%2FA%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3C%2FH1%3E%3CH1%20id%3D%22%5C%26quot%3Btoc-hId-1032775353%5C%26quot%3B%22%20id%3D%22toc-hId--1454671076%22%20id%3D%22toc-hId--1454671076%22%20id%3D%22toc-hId--1454671076%22%3EBenefits%20of%20Azure%20Static%20Web%20Apps%26lt%3B%5C%2FH1%26gt%3B%5Cn%3CP%3EStatic%20Web%20Apps%20have%20many%20benefits-%20even%20at%20the%20free%20tier.%26lt%3B%5C%2FP%26gt%3B%5Cn%3COL%3E%5Cn%3CLI%20style%3D%22%5C%26quot%3Bfont-style%3A%22%20inherit%3D%22%22%3EFree%26lt%3B%5C%2FLI%26gt%3B%5Cn%3C%2FLI%3E%3CLI%20style%3D%22%5C%26quot%3Bfont-style%3A%22%20inherit%3D%22%22%3EAdd%20a%20custom%20domain%20(on%20the%20free%20tier)%26lt%3B%5C%2FLI%26gt%3B%5Cn%3C%2FLI%3E%3CLI%20style%3D%22%5C%26quot%3Bfont-style%3A%22%20inherit%3D%22%22%3EFree%2C%20auto%20renewed%20SSL%20certs%26lt%3B%5C%2FLI%26gt%3B%5Cn%3C%2FLI%3E%3CLI%20style%3D%22%5C%26quot%3Bfont-style%3A%22%20inherit%3D%22%22%3EScale%20to%20premium%20or%20use%20cdn%20for%20even%20better%20performance%26lt%3B%5C%2FLI%26gt%3B%5Cn%3C%2FLI%3E%3CLI%20style%3D%22%5C%26quot%3Bfont-style%3A%22%20inherit%3D%22%22%3ENo%20infrastructure%20ot%20manage%20or%20upgrade%26lt%3B%5C%2FLI%26gt%3B%5Cn%3C%2FLI%3E%3CLI%20style%3D%22%5C%26quot%3Bfont-style%3A%22%20inherit%3D%22%22%3EAdds%20source%20control%20to%20your%20static%20site%26lt%3B%5C%2FLI%26gt%3B%5Cn%26lt%3B%5C%2FOL%26gt%3B%5Cn%3CP%20style%3D%22%5C%26quot%3Bfont-style%3A%22%20inherit%3D%22%22%3EReference%3A%20%3CA%20href%3D%22%5C%26quot%3Bhttps%3A%2F%2Fdevblogs.microsoft.com%2Fdevops%2Fcomparing-azure-static-web-apps-vs-azure-webapps-vs-azure-blob-storage-static-sites%2F%5C%26quot%3B%22%20target%3D%22%5C%26quot%3B_blank%5C%26quot%3B%22%20rel%3D%22%5C%26quot%3Bnoopener%20nofollow%20noopener%20noreferrer%22%20noreferrer%3D%22%22%3EA%20full%20comparison%20of%20SWA%20and%20Static%20Sties%20for%20Blob.%26lt%3B%5C%2FA%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FA%3E%3C%2FP%3E%3CP%3EAmong%20all%20of%20these%20benefits%20the%20addition%20of%20source%20control%20to%20your%20static%20content%20can%E2%80%99t%20be%20understated.%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%3CBR%20%2F%3EMost%20importantly-%20with%20SWA%20you%20can%20get%20started%20right%20now%2C%20for%20FREE!%26lt%3B%5C%2FP%26gt%3B%26lt%3B%5C%2Flingo-body%26gt%3B%3CLINGO-TEASER%20id%3D%22%5C%26quot%3Blingo-teaser-3152200%5C%26quot%3B%22%20slang%3D%22%5C%26quot%3Ben-US%5C%26quot%3B%22%3E%3C%2FLINGO-TEASER%3E%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22%5C%26quot%3Blia-inline-image-display-wrapper%22%20lia-image-align-inline%3D%22%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Fgxcuf89792%2F%5C%26quot%3Bhttps%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F347168i2B436EFCD8F0C14A%2Fimage-size%2Fmedium%3Fv%3Dv2%26amp%3Bpx%3D400%5C%26quot%3B%22%20role%3D%22%5C%26quot%3Bbutton%5C%26quot%3B%22%20title%3D%22SameerDoshi_2-1644535977453.png%22%20alt%3D%22%5C%26quot%3BSameerDoshi_2-1644535977453.png%5C%26quot%3B%22%20%2F%3E%26lt%3B%5C%2Fspan%26gt%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3E%26nbsp%3B%26lt%3B%5C%2FP%26gt%3B%5Cn%3C%2FP%3E%3CP%3EHave%20a%20simple%20site%20that%E2%80%99s%20just%20html%2C%20css%2C%20javascript%20and%20other%20static%20content%3F%26nbsp%3B%20You%20can%20host%20it%20for%20free%20in%20Azure.%20Not%20only%20is%20it%20free%20to%20host%20it%20is%20much%20easier%20to%20maintain%20than%20most%20off%20the%20self%20content%20management%20systems.%26lt%3B%5C%2FP%26gt%3B%26lt%3B%5C%2Flingo-teaser%26gt%3B%3CLINGO-LABS%20id%3D%22%5C%26quot%3Blingo-labs-3152200%5C%26quot%3B%22%20slang%3D%22%5C%26quot%3Ben-US%5C%26quot%3B%22%3E%3CLINGO-LABEL%3EHLS_Hack%26lt%3B%5C%2Flingo-label%26gt%3B%26lt%3B%5C%2Flingo-labs%26gt%3B%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3C%2FP%3E%3C%2FLI%3E%3C%2FOL%3E%3C%2FP%3E%3C%2FH1%3E%3C%2FA%3E%3C%2FP%3E%3C%2FH1%3E%3C%2FLINGO-BODY%3E%3C%2FLINGO-SUB%3E%3CLINGO-SUB%20id%3D%22lingo-sub-3152200%22%20slang%3D%22en-US%22%3EHost%20Static%20Web%20Sites%20for%20Free%20in%20Azure%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3152200%22%20slang%3D%22en-US%22%3E%3CP%3EHave%20a%20simple%20site%20that%E2%80%99s%20just%20html%2C%20css%2C%20javascript%20and%20other%20static%20content%3F%26nbsp%3B%20You%20can%20host%20it%20for%20free%20in%20Azure.%20Not%20only%20is%20it%20free%20to%20host%20it%20is%20much%20easier%20to%20maintain%20than%20most%20off%20the%20self%20content%20management%20systems.%3C%2FP%3E%0A%3CH1%20id%3D%22toc-hId--2134795850%22%20id%3D%22toc-hId-1032841757%22%3EScenario%3C%2FH1%3E%0A%3CP%3ERecently%20a%20colleague%20%26nbsp%3Bhad%20a%20simple%20question%3A%20How%20do%20I%20host%20my%20static%20site%20in%20Azure%3F%20The%20customer%20had%20been%20using%20a%203%3CSUP%3Erd%3C%2FSUP%3E%20party%20hosting%20service%20that%20provided%20them%20an%20FTP%20directory-%20anything%20they%20put%20into%20the%20directory%20would%20appear%20on%20their%20domain.%20The%20information%20on%20the%20site%20changed%20approximately%20once%20a%20year.%26nbsp%3B%20The%20site%20was%20hosted%20on%20a%20custom%20domain%20and%20used%20a%20free%20LetsEncrypt%20certificate%20that%20was%20auto-renewed%20by%20the%20LetsEncrypt%20bot.%3C%2FP%3E%0A%3CH1%20id%3D%22toc-hId-352716983%22%20id%3D%22toc-hId--774612706%22%3EWhy%20Not%20Use%20Static%20Web%20Sites%20For%20Blob%3C%2FH1%3E%0A%3CP%3EMy%20colleague%20%26nbsp%3Binitially%20tried%20using%20%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fazure%2Fstorage%2Fblobs%2Fstorage-blob-static-website-host%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EStatic%20Web%20Sites%20for%20Blob%3C%2FA%3E.%20%26nbsp%3BThe%20problem%20was%20that%20he%20could%20not%20use%20a%20built%20in%20certificate%20rotation%20because%20he%20wanted%20to%20host%20his%20content%20on%20a%20naked%20domain%20(ex%3A%20%3CA%20href%3D%22https%3A%2F%2Fmydomain.com%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Ehttps%3A%2F%2Fmydomain.com%3C%2FA%3E%20or%20%3CA%20href%3D%22http%3A%2F%2Fwww.mydomain.com%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Ewww.mydomain.com%3C%2FA%3E).%3C%2FP%3E%0A%3CP%3EFortunately%2C%20%3CA%20href%3D%22https%3A%2F%2Fazure.microsoft.com%2Fen-us%2Fservices%2Fapp-service%2Fstatic%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EAzure%20Static%20Web%20Apps%3C%2FA%3E%20(SWA)%20solved%20his%20problem.%20Here%E2%80%99s%20what%20we%20did.%3C%2FP%3E%0A%3CH1%20id%3D%22toc-hId--1454737480%22%20id%3D%22toc-hId-1712900127%22%3EHost%20Static%20Content%20on%20SWA%3C%2FH1%3E%0A%3CP%3EThere%20are%20only%20a%20few%20simple%20steps%20to%20get%20your%20site%20live!%3C%2FP%3E%0A%3CP%3EFirst%2C%20put%20all%20your%20content%20into%20a%20GitHub%20repo.%20The%20repo%20can%20be%20public%20or%20private.%3C%2FP%3E%0A%3CP%3ESecond%2C%20%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fazure%2Fstatic-web-apps%2Fget-started-portal%3Ftabs%3Dvanilla-javascript%23create-a-static-web-app%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EDeploy%20an%20Azure%20Static%20Web%20App%3C%2FA%3E.%3C%2FP%3E%0A%3CP%3EUnder%20Build%20Details%20select%20the%20template%20%E2%80%9CCustom%E2%80%9D%20point%20the%20app%20location%20to%20the%20location%20of%20the%20static%20content%20in%20your%20GitHub%20repo.%20If%20your%20static%20content%20is%20at%20the%20base%20of%20your%20repo%20just%20enter%20%E2%80%9D%2F%E2%80%9D%20and%20leave%20all%20other%20fields%20blank.%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22SameerDoshi_1-1644535487728.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F347167i3FD22CFEE8B7477D%2Fimage-size%2Fmedium%3Fv%3Dv2%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22SameerDoshi_1-1644535487728.png%22%20alt%3D%22SameerDoshi_1-1644535487728.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EOnce%20the%20deployment%20is%20complete%20go%20back%20to%20your%20GitHub%20repo.%20%26nbsp%3BAzure%20Static%20Web%20Apps%20has%20inserted%20a%20new%20file%20that%20we%E2%80%99ll%20need%20to%20edit.%3C%2FP%3E%0A%3CP%3EEdit%20the%20file%20under%20%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSameerDoshi%2FSampleStaticContentSite%2Ftree%2Fmain%2F.github%2Fworkflows%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3E%3CSPAN%3E.github%2F%3C%2FSPAN%3Eworkflows%3C%2FA%3E%3C%2FP%3E%0A%3CP%3EThe%20file%20will%20have%20a%20unique%20name.%3C%2FP%3E%0A%3CP%3EYou%E2%80%99ll%20need%20to%20add%20a%20line%20to%20the%20workflow%3A%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-applescript%22%3E%3CCODE%3Eskip_app_build%3A%20true%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EHere's%20a%20full%20snippet%20as%20where%20line%2014%20shows%20the%20skip_app_build%20inserted%20an%20example%3A%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CPRE%20class%3D%22lia-code-sample%20language-yaml%22%3E%3CCODE%3Ejobs%3A%0A%20%20build_and_deploy_job%3A%0A%20%20%20%20if%3A%20github.event_name%20%3D%3D%20'push'%20%7C%7C%20(github.event_name%20%3D%3D%20'pull_request'%20%26amp%3B%26amp%3B%20github.event.action%20!%3D%20'closed')%0A%20%20%20%20runs-on%3A%20ubuntu-latest%0A%20%20%20%20name%3A%20Build%20and%20Deploy%20Job%0A%20%20%20%20steps%3A%0A%20%20%20%20%20%20-%20uses%3A%20actions%2Fcheckout%40v2%0A%20%20%20%20%20%20%20%20with%3A%0A%20%20%20%20%20%20%20%20%20%20submodules%3A%20true%0A%20%20%20%20%20%20-%20name%3A%20Build%20And%20Deploy%0A%20%20%20%20%20%20%20%20id%3A%20builddeploy%0A%20%20%20%20%20%20%20%20uses%3A%20Azure%2Fstatic-web-apps-deploy%40v1%0A%20%20%20%20%20%20%20%20with%3A%0A%20%20%20%20%20%20%20%20%20%20skip_app_build%3A%20true%0A%20%20%20%20%20%20%20%20%20%20azure_static_web_apps_api_token%3A%20%24%7B%7B%20secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ASHY_STONE_0BDFA3010%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20repo_token%3A%20%24%7B%7B%20secrets.GITHUB_TOKEN%20%7D%7D%20%23%20Used%20for%20Github%20integrations%20(i.e.%20PR%20comments)%0A%20%20%20%20%20%20%20%20%20%20action%3A%20%22upload%22%0A%20%20%20%20%20%20%20%20%20%20%23%23%23%23%23%23%20Repository%2FBuild%20Configurations%20-%20These%20values%20can%20be%20configured%20to%20match%20your%20app%20requirements.%20%23%23%23%23%23%23%0A%20%20%20%20%20%20%20%20%20%20%23%20For%20more%20information%20regarding%20Static%20Web%20App%20workflow%20configurations%2C%20please%20visit%3A%20https%3A%2F%2Faka.ms%2Fswaworkflowconfig%0A%20%20%20%20%20%20%20%20%20%20app_location%3A%20%22%2F%22%20%23%20App%20source%20code%20path%0A%20%20%20%20%20%20%20%20%20%20api_location%3A%20%22%22%20%23%20Api%20source%20code%20path%20-%20optional%0A%20%20%20%20%20%20%20%20%20%20output_location%3A%20%22%22%20%23%20Built%20app%20content%20directory%20-%20optional%0A%20%20%20%20%20%20%20%20%20%20%23%23%23%23%23%23%20End%20of%20Repository%2FBuild%20Configurations%20%23%23%23%23%23%23%3C%2FCODE%3E%3C%2FPRE%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ESave%20and%20commit%20and%20that%E2%80%99s%20it!%3C%2FP%3E%0A%3CP%3EIn%20a%20few%20moments%20your%20content%20is%20con%20the%20web%20at%20an%20SWA%20address%20like%203424.blue-orchard.azurewebsites.com%20.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ENow%20when%20the%20contents%20of%20the%20GitHub%20repo%20are%20modified%20the%20GitHub%20workflow%20will%20copy%20the%20new%20content%20and%20update%20the%20site%20for%20you!%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EWhat%20about%20SSL%3F%20As%20soon%20as%20you%20add%20a%20custom%20domain%20SWA%20will%26nbsp%3B%3CEM%3Eautomatically%3C%2FEM%3E%20get%20an%20SSL%20cert%20that%20matches%20your%20domain.%20It%20will%20renew%20as%20needed-%20you%20need%20to%20do%20nothing%20else!%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fazure%2Fstatic-web-apps%2Fbuild-configuration%3Ftabs%3Dgithub-actions%23build-and-deploy%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3ELink%20to%20the%20full%20documentation%20for%20the%20azure-static-web-app%20deployment%20workflow%20can%20be%20found.%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CH1%20id%3D%22toc-hId-1032775353%22%20id%3D%22toc-hId--94554336%22%3EBenefits%20of%20Azure%20Static%20Web%20Apps%3C%2FH1%3E%0A%3CP%3EStatic%20Web%20Apps%20have%20many%20benefits-%20even%20at%20the%20free%20tier.%3C%2FP%3E%0A%3COL%3E%0A%3CLI%20style%3D%22font-style%3A%20inherit%3B%20font-weight%3A%20inherit%3B%22%3EFree%3C%2FLI%3E%0A%3CLI%20style%3D%22font-style%3A%20inherit%3B%20font-weight%3A%20inherit%3B%22%3EAdd%20a%20custom%20domain%20(on%20the%20free%20tier)%3C%2FLI%3E%0A%3CLI%20style%3D%22font-style%3A%20inherit%3B%20font-weight%3A%20inherit%3B%22%3EFree%2C%20auto%20renewed%20SSL%20certs%3C%2FLI%3E%0A%3CLI%20style%3D%22font-style%3A%20inherit%3B%20font-weight%3A%20inherit%3B%22%3EScale%20to%20premium%20or%20use%20cdn%20for%20even%20better%20performance%3C%2FLI%3E%0A%3CLI%20style%3D%22font-style%3A%20inherit%3B%20font-weight%3A%20inherit%3B%22%3ENo%20infrastructure%20ot%20manage%20or%20upgrade%3C%2FLI%3E%0A%3CLI%20style%3D%22font-style%3A%20inherit%3B%20font-weight%3A%20inherit%3B%22%3EAdds%20source%20control%20to%20your%20static%20site%3C%2FLI%3E%0A%3C%2FOL%3E%0A%3CP%20style%3D%22font-style%3A%20inherit%3B%20font-weight%3A%20inherit%3B%22%3EReference%3A%20%3CA%20href%3D%22https%3A%2F%2Fdevblogs.microsoft.com%2Fdevops%2Fcomparing-azure-static-web-apps-vs-azure-webapps-vs-azure-blob-storage-static-sites%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EA%20full%20comparison%20of%20SWA%20and%20Static%20Sties%20for%20Blob.%3C%2FA%3E%3C%2FP%3E%0A%3CP%3EAmong%20all%20of%20these%20benefits%20the%20addition%20of%20source%20control%20to%20your%20static%20content%20can%E2%80%99t%20be%20understated.%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CBR%20%2F%3EMost%20importantly-%20with%20SWA%20you%20can%20get%20started%20right%20now%2C%20for%20FREE!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-3152200%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22SameerDoshi_2-1644535977453.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F347168i2B436EFCD8F0C14A%2Fimage-size%2Fmedium%3Fv%3Dv2%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22SameerDoshi_2-1644535977453.png%22%20alt%3D%22SameerDoshi_2-1644535977453.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EHave%20a%20simple%20site%20that%E2%80%99s%20just%20html%2C%20css%2C%20javascript%20and%20other%20static%20content%3F%26nbsp%3B%20You%20can%20host%20it%20for%20free%20in%20Azure.%20Not%20only%20is%20it%20free%20to%20host%20it%20is%20much%20easier%20to%20maintain%20than%20most%20off%20the%20self%20content%20management%20systems.%3C%2FP%3E%3C%2FLINGO-TEASER%3E%3CLINGO-LABS%20id%3D%22lingo-labs-3152200%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EHLS_Hack%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Version history
Last update:
‎Feb 15 2022 07:25 AM
Updated by: