Deploying to Netlify from GitLab

GitLab is a popular git-focused DevOps platform. Netlify is a 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

GitLab is a partially open source git-based hosting and DevOps platform with roots in 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

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.

Deploy to Netlify from GitLab

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:

.gitlab-ci.yml

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 $NETLIFY_SITE_ID. You can configure this variable and the Netlify authentication token in the CI/CD settings of GitLab.

Retrieve the value of both variables from the settings of your 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 committed 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.

Conclusion

For me, configuring the GitLab pipeline to deploy to Netlify was straightforward. I hope with this article, it will be even easier for you.

References

• GitLab: https://gitlab.com/

• Netlify: https://netlify.com

• Netlify-cli: https://www.npmjs.com/package/netlify-cli

• Cover photo: Pietro Jeng on Unsplash.