GitLab is a popular git-focused DevOps platform. Netlify is cloud computing startup that offers to host your static site. In this article I show how to configure the GitLab build pipeline to deploy to a Netlify project.
GitLab is a partially open source git-based hosting and DevOps platform with roots in the Ukraine. With its headquarters in San Francisco it offers issue tracking, continuous integration and a deployment pipeline. Since GitLab does not offer advanced cloud features like hosting static sites or serverless functions, you can combine GitLab with third-party offerings, for example from the Netlify company.
Netlify, also San Francisco based offers hosting of static sites and serverless functions. It was founded in 2014 and has a generous freemium business model. I use Netlify in this article to host the static files generated by the GitLab build pipeline.
When using both products and when you do not want to allow Netlify full access to your GitLab account, you can configure the GitLab build pipeline. In this example, I generate a static site with the Gatsby Node application and deploy it to Netlify.
The build pipeline configuration file in GitLab looks like this:
default: image: node:14-buster before_script: - npm install - npm install -g netlify-cli --unsafe-perm=true - npm run build deploy-job: stage: deploy script: - netlify deploy --site $NETLIFY_SITE_ID --auth $NETLIFY_AUTH_TOKEN --dir public/ --prod
The image is a Node image since my application runs using Node 14. In the before_script section I install and build the application. This generates the static website. I also install netlify-cli since using that application I can easily deploy to Netlify. The option unsafe-perm suppresses the UID/GID switching when running package scripts and is necessary to get permission to run the netlify executable.
In the deploy-job section of the yaml file the netlify command deploys the website files
from the public folder into the Netlify site specified by the variable
You can configure this variable and the Netlify authentication token in the CI/CD settings
Retrieve the value of both variables from the settings of you Netlify project. The site id (API ID) is located under “Site details”. In order to generate your authentication token, go to “User settings” and “Applications” and there you can generate the personal access token that you add as a variable in GitLab. Important is that you set your Netlify project as a manual deploy project.
After you have commited the .gitlab-ci.yml file your static website gets automatically deployed to your Netlify site whenever you commit and push to your project in GitLab.
For me configuring the GitLab pipeline to deploy to Netlify was straightforward. I hope with this article it will be even easier for you.
Cover photo: Pietro Jeng on Unsplash.