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.
We used the YAML based pipeline and steps are self-explanatory.
1trigger:2 - master34pool:5 vmImage: "ubuntu-latest"67steps:8 - task: NodeTool@09 inputs:10 versionSpec: "10.x"11 displayName: "Install Node.js"1213 - script: |14 npm install -g gatsby-cli15 displayName: "Install gatsby-cli"1617 - script: |18 yarn install19 displayName: "Install dependencies"2021 - script: |22 yarn build23 displayName: "Gatsby build"2425 - task: CopyFiles@226 inputs:27 sourceFolder: "public"28 contents: "**"29 targetFolder: "$(Build.ArtifactStagingDirectory)"30 cleanTargetFolder: true31 displayName: "Copy built site"32 condition: and(succeeded(), ne(variables['Build.Reason'], 'PullRequest'))3334 - task: PublishBuildArtifacts@135 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,
Once we configured our build pipeline, created a 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.
And the yml for the same look like below,
1steps:2- task: FtpUpload@23 displayName: 'FTP Upload to SmarterASP.NET'4 inputs:5 credentialsOption: inputs6 serverUrl: '$(FTP.ServerUrl)'7 username: '$(FTP.Username)'8 password: '$(FTP.Password)'9 rootDirectory: '$(System.DefaultWorkingDirectory)/_Abhith.abhith.net/drop'10 remoteDirectory: /sitefolder/11 preservePaths: true12 trustSSL: true13 condition: and(succeeded(), ne(variables['Build.Reason'], 'PullRequest'))14``
- 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.
Tried #AzureDevOps to do the build and FTP upload task to push the artifact to @smarterasp, it worked fine but the time took to complete the release is almost 2 hrs. (artifact is around 500 MB in size & number of files 📂 around 3k). pic.twitter.com/wcltxbObRj— Abhith Rajan (@AbhithRajan) December 27, 2019
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. 👇