azure-devops | gatsby | hosting

Azure DevOps - GatsbyJs Build Pipeline

Continuous Integration & Continuous Deployment for your GatsbyJS website using Azure Pipelines.

Abhith Rajan
Abhith RajanFebruary 04, 2020 · 3 min read · Last Updated:

For long I was using Netlify to do CI/CD for this website and was using their free plan. But when they introduced the build minutes limit, I had to switch to another option.

I already have a paid account with SmarterASP.NET where I host Piggy and is very much suitable for personal side projects since it is very cheap. So I thought of moving back to SmarterASP.NET and for CI/CD Azure DevOps Build & Release Pipelines since am using the same at work.

Build Pipeline

We used the YAML based pipeline and steps are self-explanatory.

2 - master
5 vmImage: "ubuntu-latest"
8 - task: NodeTool@0
9 inputs:
10 versionSpec: "10.x"
11 displayName: "Install Node.js"
13 - script: |
14 npm install -g gatsby-cli
15 displayName: "Install gatsby-cli"
17 - script: |
18 yarn install
19 displayName: "Install dependencies"
21 - script: |
22 yarn build
23 displayName: "Gatsby build"
25 - task: CopyFiles@2
26 inputs:
27 sourceFolder: "public"
28 contents: "**"
29 targetFolder: "$(Build.ArtifactStagingDirectory)"
30 cleanTargetFolder: true
31 displayName: "Copy built site"
32 condition: and(succeeded(), ne(variables['Build.Reason'], 'PullRequest'))
34 - task: PublishBuildArtifacts@1
35 inputs:
36 PathtoPublish: "$(Build.ArtifactStagingDirectory)"
37 ArtifactName: "drop"
38 publishLocation: "Container"
39 condition: and(succeeded(), ne(variables['Build.Reason'], 'PullRequest'))
40 displayName: "Publish Build Artifacts"

This pipeline will run for pull request as well. In those cases we don’t need to build the artifacts. That’s why we put the below condition for CopyFiles@2 and PublishBuildArtifacts@1 tasks.

1condition: and(succeeded(), ne(variables['Build.Reason'], 'PullRequest'))

And a successfull build looks like,

Azure DevOps Build Pipeline for Gatsby
Azure DevOps Build Pipeline for Gatsby

Release Pipeline

Once we configured our build pipeline, created a release pipeline.

Build pipeline vs Release pipeline

A build is a pipeline that has no side-effects, it only takes in code and puts out compiled “artifacts”. A release is a pipeline that has side-effects, it takes in artifacts and publishes or deploys them to environments.

For the release pipeline, in case of SmarterASP.NET, the stage contain one job and it has only one task, the FTP Upload.

Release Pipeline for Gatsby
Release Pipeline for Gatsby

And the yml for the same look like below,

2- task: FtpUpload@2
3 displayName: 'FTP Upload to SmarterASP.NET'
4 inputs:
5 credentialsOption: inputs
6 serverUrl: '$(FTP.ServerUrl)'
7 username: '$(FTP.Username)'
8 password: '$(FTP.Password)'
9 rootDirectory: '$(System.DefaultWorkingDirectory)/'
10 remoteDirectory: /sitefolder/
11 preservePaths: true
12 trustSSL: true
13 condition: and(succeeded(), ne(variables['Build.Reason'], 'PullRequest'))


  • All the \$(---) are pipeline variables
  • rootDirectory can be browsed through the button near to the Root folder text input (check the comments below)

Even though I have successfully configured the CI/CD. But the time it took to complete the deployment was too long since the artifact size was high. The gatsby-images generate so many versions of the image files resulting increase in the artifact size. So the FTP upload takes so much time to finish.

Because of this, I searched for another hosting provider and found out Render. They have a free plan for static sites and offers almost similar experience when comparing to Netlify.

If you know any better hosting solution for GatsbyJs website, let me know in the comments. 👇

Abhith Rajan

Written by Abhith Rajan
Abhith Rajan is an aspiring software engineer with more than nine years of experience and has a proven successful track record of delivering technology-based products and services.

This page is open source. Noticed a typo? Or something unclear?
Improve this page on GitHub

Related ArticlesView All

Related StoriesView All

Related Tools & ServicesView All

MX Lookup Tool - MxToolbox

Check your DNS MX Records online

Render · The Easiest Cloud For All Your Apps and Websites

A unified platform to build and run all your apps and web app free SSL, a global CDN, private networks and auto deploys from Git, FREE for static web page.