build & release pipeline

Building and deploying Hexo to an Azure App Service from Azure DevOps

This blog runs on the wonderful Hexo, a Markdown-based and NodeJS-powered blog framework. The code is stored in a project on Azure DevOps (https://***.visualstudio.com/) and the blog runs on an Azure App Service.

In this blog post I’ll show you how I build and deploy my blog to Azure.

Project and solution

My Hexo blog lives in an otherwise empty ASP.NET Web Application because I want to run the hexo generate command - that generates the static files that need to be deployed - via the Post-build event command line.

To do this right-click the Project, select Properties, go to Build Events and add the following in Post-build event command line:

hexo generate

This will also trigger the same command when you build the project in Visual Studio.

The Build

Get Sources

npm install

npm install hexo-cli -g

Command and arguments: install hexo-cli -g

Visual Studio Build

In the logs you should see the hexo generate PostBuildEvent being triggered:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
PostBuildEvent:
  hexo generate
  INFO  Start processing
  INFO  Files loaded in 342 ms
  INFO  Generated: index.html
  INFO  Generated: about/index.html
  INFO  Generated: archives/index.html
  INFO  Generated: archives/2018/11/index.html
  INFO  Generated: fancybox/blank.gif
  INFO  Generated: tags/automate-everything/index.html
  [...]
  INFO  Generated: css/images/IMG_20181012_140103.jpg
  INFO  54 files generated in 1.07 s
Done Building Project "D:\a\3\s\Blog.csproj" (default targets).
Done Building Project "D:\a\3\s\Blog.sln" (default targets).

Build succeeded.

For this step I first tried to run hexo generate via npm too, as described in posts like this, but I could not get that to work…

Copy Files

Target Folder: $(Build.ArtifactStagingDirectory)

Publish Build Artifacts

The Release

The release is a standard Azure App Service Deploy: