Netlify Preview Deploys on Self-Hosted Gitlab Instances
Tags: netlify, gitlab, gatsby
Published: 2020-02-14 10:05:40

---
title: Netlify Preview Deploys on Self-Hosted Gitlab Instances
published: true
description: A simple approach on how you can link Netlify preview deploys to Gitlab merge requests on a self-hosted instance.
tags: #netlify, #gitlab, #gatsby
---

When creating static websites with your preferred generator, it’s sometimes hard to keep track of and review changes as they come in through your source code management system. 

One possible alleviation of this process are preview deploys to a static hosting provider such as Netlify, now.sh, Github Pages or what have you. I will be referring to Netlify in this post, but feel free to extrapolate to the provider of your choice. 

If you follow a typical Git flow the changesets arrive in the form of pull (or merge) requests, and the review process can be greatly accelerated by preparing preview deploys to the assigned reviewers. 

[Netlify does that out of the box](https://docs.netlify.com/configure-builds/get-started/#basic-build-settings) when you employ one of the big source forges, but when you’re running your own, say, Gitlab instance, you’re out on your own. 

Below I lay out a simple approach on how you can achieve the same using Gitlab CI and a few calls to the Gitlab API, the static site generator used is Gatsby.

Here is a step-by-step instruction. 

1. Get a [personal access token]( https://docs.gitlab.com/ee/user/profile/personal_access_tokens.html) from your self hosted Gitlab instance. You’ll need this to make changes to your merge requests.

2. Sign up for a free [Netlify](https://www.netlify.com/) account if you don’t already have one. 

3. Create a site on Netlify. Because you cannot connect it via Git, the only way to to this, is to upload a static site folder (in the case of Gatsby, `/public`).

    ![Netlify Dropzone](https://dev-to-uploads.s3.amazonaws.com/i/i4fpnvvk2q84sbixxtqx.png)

4. Go to **Site > Site Settings** and take a note of your site id.

    ![Netlify Site Settings](https://dev-to-uploads.s3.amazonaws.com/i/ctwuuuoyj9gkwlbemaw9.png)

5. Go to **User Settings > Applications** and create a new access token.

    ![Netlify User Settings](https://dev-to-uploads.s3.amazonaws.com/i/ktu70ym54tij48dw6kka.png)    

    ![Create Access Token](https://dev-to-uploads.s3.amazonaws.com/i/lpw1yw04t5mplp1z8qui.png)
    
6. In your Gitlab project, go to **Settings > CI/CD** and enter these as variables `PRIVATE_ACCESS_TOKEN`, `NETLIFY_SITE_ID` and `NETLIFY_AUTH_TOKEN`

    ![Gitlab CI/CD Settings](https://dev-to-uploads.s3.amazonaws.com/i/sd4nemf91gtzdvonk19r.png)

7. Below is a sample `.gitlab-ci.yml` file. The hidden champion in this case is the awesome [jq](https://stedolan.github.io/jq/) tool 🌟

Enjoy!

```yml
image: node:10-buster

stages:
  - preview

preview:
  stage: preview
  only:
    - merge_requests
  script:
    - apt-get update && apt-get install -y jq curl
    - npm i
    - npm run build
    - npm i -g netlify-cli
    - NETLIFY_JSON=$(netlify deploy --site $NETLIFY_SITE_ID --auth $NETLIFY_AUTH_TOKEN --json)
    - DEPLOY_URL=$(echo $NETLIFY_JSON | jq -r ".deploy_url")
    - MR_DESCRIPTION=$(curl "https://my-gitlab-instance/api/v4/projects/$CI_PROJECT_ID/merge_requests/$CI_MERGE_REQUEST_IID?private_token=$PRIVATE_ACCESS_TOKEN" | jq -r ".description")
    - MR_DESCRIPTION="$MR_DESCRIPTION\n\n[$DEPLOY_URL]($DEPLOY_URL)"
    - 'curl -X PUT -H "Content-Type: application/json" -d "{\"description\":\"$MR_DESCRIPTION\"}" "https://my-gitlab-instance/api/v4/projects/$CI_PROJECT_ID/merge_requests/$CI_MERGE_REQUEST_IID?private_token=$PRIVATE_ACCESS_TOKEN"'
```