Website previews for custom Netlify deployments using GitLab CI

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • SaaSHub - Software Alternatives and Reviews
  • sign_up

  • GitLab bot account: Another GitLab account to post comments from the GitLab CI pipeline to the merge requests on our behalf. This can be also set up using the same sign-up page.

  • dockerfiles

    Dockerfiles for various pandoc images (by pandoc)

  • We'll later use Pandoc's containers to convert our index.md Markdown file to the index.html HTML file in the GitLab CI pipeline. We can also test it locally with Docker as follows:

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
  • In the above YAML snippet, we'll add a pipeline step to the publish stage and execute a container image I created for publishing sites to Netlify. The step will execute one command, gitlab-deploy-site, that's pre-built to the container image. Pretty much all of the magic for publishing to Netlify happen within the container image. We'll take a look at it in a later section.

  • open-api

    Open API specification of Netlify's API (by netlify)

  • The site deploy functionality is implemented using a small Go program. It performs the deployment using the official Netlify Open API client library from files on a directory. The directory, the site ID, the authentication token, and the rest of the details are configured using environment variables that are picked up using Kelsey Hightower's envconfig library. The program creates a preview site when the environment variable NETLIFY_DRAFT is set.

  • kelseyhightower/envconfig

    Golang library for managing configuration data from environment variables

  • The site deploy functionality is implemented using a small Go program. It performs the deployment using the official Netlify Open API client library from files on a directory. The directory, the site ID, the authentication token, and the rest of the details are configured using environment variables that are picked up using Kelsey Hightower's envconfig library. The program creates a preview site when the environment variable NETLIFY_DRAFT is set.

  • cli

    Netlify Command Line Interface (by netlify)

  • The site deployment could have also been done using Netlify's command-line interface, but I felt it didn't fit the purpose. The first issue is that it was pretty difficult to capture the draft link from the tool output so that I could send it forward. Second, the tool depends on a high amount of libraries and tools which made it hard to keep the container image small in size. For the CLI, it makes sense to have all the dependencies it has because it does more than just deployments, but in my case, they were just in the way.

  • lepo

  • If you're interested in seeing a real-world example of the setup in action, check out my website's GitLab project. Thanks for reading!

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

    WorkOS logo
  • pandoc

    Universal markup converter

  • We'll later use Pandoc's containers to convert our index.md Markdown file to the index.html HTML file in the GitLab CI pipeline. We can also test it locally with Docker as follows:

  • Puts Debuggerer

    Ruby library for improved puts debugging, automatically displaying bonus useful information such as source line number and source code.

  • As a developer of various websites, I find Netlify to be a fantastic platform for hosting static websites these days. It's straightforward to use and it provides a lot of nice integrations to development tools. For example, Netlify can attached to Git hosting platforms such as GitHub and GitLab, where a lot of web development is coordinated these days.

  • libcurl

    A command line tool and library for transferring data with URL syntax, supporting DICT, FILE, FTP, FTPS, GOPHER, GOPHERS, HTTP, HTTPS, IMAP, IMAPS, LDAP, LDAPS, MQTT, POP3, POP3S, RTMP, RTMPS, RTSP, SCP, SFTP, SMB, SMBS, SMTP, SMTPS, TELNET, TFTP, WS and WSS. libcurl offers a myriad of powerful features

  • In the GitLab CI pipeline, the Go program is wrapped with a Bash script that figures out all the configuration details from the CI environment variables and passes them to the program. Additionally, it takes care of posting the draft link as a comment to the merge request using curl.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts