My weblog is hosted in a Git repository on Github. Github is bought by Microsoft, and now Github provides integration with Azure and its pipelines for build and deploy. This integration can be enabled through the Azure Pipelines app at the Github marketplace.
\nAfter setting up and configuring the Azure Pipelines app for your Github account move over to https://dev.azure.com. In the new configured Azure DevOps organization you can setup new projects.
\n\n
There are no build pipelines configured yet.
\n\n
When creating a new build pipeline the first question is: where is your repo. In my case the repo is hosted on Github.
\n\n
Authorize yourself, and select the repository to use in the deployment. The final step is to configure the build pipeline. This is done though a YAML file called azure-pipelines.yml that will be stored in the root of the Github repository. Because the project to deploy is a Node application the information in the documentation\nBuild, test, and deploy JavaScript and Node.js apps in Azure Pipelines describes the possible configuration settings that can be made.
\n In the above build pipeline configuration there are a few important elements: We now have a build result which must be deployed. The website is deployed as a static website on an Azure storage account, as described in the documentation Static website hosting in Azure Storage. Important for the next step is that when you create a static website on the storage (only one static website per storage account), the website is stored in the container The following step is the release pipeline for deployment of the build artifacts to the the static website. \n This release pipeline is triggered by a new build result, and requires only one task in the stage that is renamed to To static website. \n Import in the configuration of the Azure File Copy task is that the we need to take the source files from the One issue with the static web sites on Azure storage is that they support http only. This can be solved using an Azure CDN as described in Tutorial: Use Azure CDN to enable a custom domain with SSL for a static website. My first take on selecting a CDN was taking the Microsoft standard\nCDN. The issue that I faced was that when I updated an article the\nCDN did not reflect these changes. Expiration of items on the CDN\nare controlled by The CDN for this weblog is running on https://svdoever.azureedge.net. The custom domain name www.sergevandenoever.nl points to this url.\n
\nnpm install and an npm run azure-build which actually just calls gatsby build. The result of this build is a static website with all blog posts in the folder public.PublishBuildArtifacts tasks selects as path to publish only the contents on this public folder. Note that if the resulting artifacts a folder drop is created containing the contents of the public folder.$web. In the case of my weblog the resulting website is https://personalsvdoever.z6.web.core.windows.net.drop folder and copy them to the container $web.Cache-Control headers as explained in the\narticle Manage expiration of web content in Azure CDN. Because I’m running from a static web site hosted on Azure blob\nstorage I don’t have a web server in between where I can control\nthese headers like I can do on for example IIS. The other CDN\nofferings on Azure (Verizon, Akamai) give you more control to\noverride caching based on for example file extensions. I first tried\nthe Verizon offering which let you control these settings in a\nseparate and incomprehensible “manage” interface. After struggling\nfor a while I tried the Akamai offering of the CDN which has the\nAzure management screens as described in the above mentioned article\nso I could make all pages cache for 1 minute except for .js, .css\nand .json files which get a new unique url after each site\ngeneration and can be cached fr a year.