Deploy From GitLab: Connect Your Account and Deploy on Every Push

To deploy from GitLab on Light Cloud, connect your GitLab account in the console, click New... , Deploy from GitLab , pick the project and branch, and click Deploy. From then on, every push to that branch deploys again, every other branch gets its own preview URL, and merge requests get a note with the preview link and a green or red status.

What you will build

A one-page static site, deployed from GitLab:

• the main branch at its own URL, updated on every push,
• a preview for a feature branch, linked from the merge request,
• a light and a dark theme, following the visitor's system setting.

Source code: gitlab.com/julia188/tutorial-git-providers.

Before you start

• A GitLab account.
• A Light Cloud account. The Free plan is enough for a static site.
• Git and a terminal. On Windows, use PowerShell 7.

Step 1: Get the example project

Open the example project on GitLab and click Fork , choosing your own namespace. Then clone your fork, with your GitLab username in place of you:

$ git clone [e-mail]:you/tutorial-git-providers.git
$ cd tutorial-git-providers


PS> git clone [e-mail]:you/tutorial-git-providers.git
PS> cd tutorial-git-providers

It is plain HTML, CSS and a few lines of JavaScript for the theme switch. Any project of your own works the same way.

Step 2: Connect GitLab

In the Light Cloud console, click the GitLab icon at the top right, then Connect GitLab :

GitLab asks you to authorize Light Cloud for the api and read_user scopes. Click Authorize , and you are back in the console with your account listed. The api scope lets Light Cloud read your projects, including private ones, add a webhook to the projects you deploy, and report deployments back to GitLab.

Step 3: Deploy the project

1. Click New... and then Deploy from GitLab.
2. Search for tutorial and pick tutorial-git-providers :

The list shows projects from your account and from the GitLab groups you belong to.

1. Light Cloud detects Static HTML. Keep Branch at main, the project's default branch, and click Deploy :

Mine was live 68 seconds later at https://main-tutorial-git-providers-yourworkspace.light-cloud.io:

The button at the top right switches between the light and the dark theme; without it, the page follows your system setting.

Step 4: Push a change

Change Version 1 to Version 2 in index.html, then commit and push:

$ git commit -am "Version 2"
$ git push
To https://gitlab.com/julia188/tutorial-git-providers.git
   673a268..a725a2d main -> main


PS> git commit -am "Version 2"
PS> git push
To https://gitlab.com/julia188/tutorial-git-providers.git
   673a268..a725a2d main -> main

Your output shows your own project and commit ids. git commit also prints a short summary. Refresh the page: in my run, Version 2 was live 41 seconds after the push. When you deployed, Light Cloud added a webhook to the project, and GitLab now tells it about every push.

Step 5: Preview a branch in a merge request

Create a branch, change the heading in index.html from Deployed from Git to Deployed from GitLab, then commit and push the branch:

$ git switch -c new-heading
$ git commit -am "Say GitLab in the heading"
$ git push -u origin new-heading
remote: To create a merge request for new-heading, visit:
remote: https://gitlab.com/julia188/tutorial-git-providers/-/merge_requests/new?merge_request%5Bsource_branch%5D=new-heading
To https://gitlab.com/julia188/tutorial-git-providers.git
 * [new branch] new-heading -> new-heading
branch 'new-heading' set up to track 'origin/new-heading'.


PS> git switch -c new-heading
PS> git commit -am "Say GitLab in the heading"
PS> git push -u origin new-heading
remote: To create a merge request for new-heading, visit:
remote: https://gitlab.com/julia188/tutorial-git-providers/-/merge_requests/new?merge_request%5Bsource_branch%5D=new-heading
To https://gitlab.com/julia188/tutorial-git-providers.git
 * [new branch] new-heading -> new-heading
branch 'new-heading' set up to track 'origin/new-heading'.

Light Cloud creates an environment for the new branch at https://new-heading-tutorial-git-providers-yourworkspace.light-cloud.io; mine was live 68 seconds after the push.

Open the link GitLab printed and create the merge request. A few seconds later, Light Cloud adds a note with the preview link:

The merge request also shows a passed pipeline:

That pipeline is Light Cloud's commit status for the deployment; GitLab shows it as an external pipeline, so you need no .gitlab-ci.yml. A failed deployment shows up as a failed pipeline. GitLab also lists both environments, with their URLs, under Operate , Environments.

Every push to the branch updates the preview, the note and the status.

Step 6: Merge

Click Merge on the merge request, with Delete source branch ticked. Light Cloud deploys main again; the page said Deployed from GitLab 66 seconds after the merge. Deleting the branch also deleted its preview environment: the preview URL was gone by the time main was live.

The environment's Deployments tab shows each deployment and what started it:

Choose what GitLab shows

All of this is on by default. To change it, open the app's Settings :

• Report deployments as GitLab commit statuses : the pipeline tick or cross on commits and merge requests, and the environments under Operate.
• Comment preview links on merge requests : one note per environment, updated in place. Never on merge requests from forks.

Both post as the GitLab user you connected, so that user needs at least the Developer role on the project. Under Branch Automation on the same page, you can turn off a preview environment per branch, or keep previews after their branch is deleted.