In this post, I will explain all the steps required to create a continuous integration and continuous deployment process to deploy a static website into Azure.
The Goal
The idea here is to have on a local machine a folder tracked by git. At every push, we want that change to trigger our CI-CD process. The Build Pipeline will generates the static website. The Release Pipeline will create our Azure resources and publish those artifacts.
The Static Website
In this post, I'm using Wyam.io as static website generator. However, it doesn't matter. There is a ton of excellent generator available: Jekyll, Hugo, Hexo, etc. I selected Wyam because it is written in .Net and If eventually, I want to dig dipper it would be easier for me.
For all those generated websites, it the same pattern. You have an input folder where you have all your posts and images and an output folder that contains the generated result. You don't need to track the content of your output folder, so it would be a good practice to modify the .gitignore file accordingly. As an example here how look mine.
output/
tool/
tools/
wwwroot/
config.wyam.dll
config.wyam.hash
config.wyam.packages.xml
Build Pipeline
The build pipeline will generate our website for us. There so, it needs to have the generator installed. A great tool to do this kind of tasks is Cake. What I like with that tool is that it is cross platform so I can use it without worrying on wish OS it will run.rd.
The Azure pipeline is defined in an
azure-pipeline.yml file. Installing Cake should definitely be in our first steps. To know how to do that, navigate to the Get started page of the Cake's website, it's explained that we need to execute a build.ps1 or build.sh (depending on your build setup). That will install Cake and execute the file build.cake. Those files can be found on the GitHub repository as mentioned on the website.On the Wyam website, in the deployment section of the documentation, you will find a sample for our required
build.cake file. It looks like this:#tool nuget:?package=Wyam&version=2.2.0
#addin nuget:?package=Cake.Wyam&version=2.1.3
var target = Argument("target", "Build");
Task("Build")
.Does(() =>
{
Wyam( new WyamSettings {
Recipe = "Blog",
Theme = "CleanBlog"
});
});
Task("Preview")
.Does(() =>
{
Wyam(new WyamSettings
{
Recipe = "Blog",
Theme = "CleanBlog",
Preview = true,
Watch = true
});
});
RunTarget(target);
On the first line, it will install the required NuGet package (you should definitely specify the version). Then it defines some tasks, and run the generation command. Create that file at the root of the website folder.
Now let's have a look at the
azure-pipeline.yml file.trigger:
- master
variables:
DOTNET_SDK_VERSION: '2.1.401'
pool:
vmImage: 'VS2017-Win2016'
steps:
- task: DotNetCoreInstaller@0
displayName: 'Use .NET Core SDK $(DOTNET_SDK_VERSION)'
inputs:
version: '$(DOTNET_SDK_VERSION)'
- powershell: ./build.ps1
displayName: 'Execute Cake PowerShell Bootstrapper'
- task: CopyFiles@2
displayName: 'Copy generated content'
inputs:
SourceFolder: '$(Build.SourcesDirectory)/output'
contents: '**\*'
targetFolder: $(Build.ArtifactStagingDirectory)/outpout
cleanTargetFolder: true
- task: PublishBuildArtifacts@1
displayName: 'Publish Artifact'
inputs:
PathtoPublish: '$(build.artifactstagingdirectory)'
The first line is to specify the pipeline trigger. In our case, we will look at the master branch. Then I declare a variable to keep the .Net Core version. That way, it will be easier to maintain the script in the future.
The
pool command is to specify what kind of server is created. Here I'm using a Windows one, yet I could have used Linux too (all components are cross-platform).Then comes the list of steps. The first one install .Net Core. The second step is a
powershell command to execute our build.ps1 file. At this stage, the static website should be generated in a subfolder output. The last two steps are to copy the content of the output folder into the ArtifactStagingDirectory and then publish it. This way the Release Pipeline can access the artifacts.There is detailed information about all the commands for a YAML Azure Pipeline file in the documentation. Create your own or copy-paste this one in a new
azure-pipeline.yml file under a subfolder named deployment. Once your file is created, commit and push them to GitHub or any repository.Navigate to Azure DevOps (dev.azure.com). Open your project, or create a new one. Now from the left menu click on the Pipeline (the rocket icon), to create a new one. If you are using an external repository, like me, you will need to authorize Azure DevOps to your repo.
To configure the pipeline, since we already have created the
azure-pipeline.yml file, select the Existing Azure Pipeline YAML file option and point it to our file in the deployment folder.
It will open our YAML file. If you wish you could update it. Run it, by clicking to Run blue button in the top-right corner. Your build pipeline is done. Now every time you will push changes into your repository that build will get triggered and generate the static website.
(Next post in the series - Deploy automatically a static website into an Azure Blob storage with Azure DevOps Pipeline)
