Let's say we want to develop a simple application inspired by Homework for Life. Before we even start development, let's figure out preview deployment first.
GitLab pages
GitLab pages is a hosting infrastructure we access in a free plan of a GitLab project. It's turned on by default, but we have to make sure we correctly name our Continuous Integration (CI) steps.
Username or organization gotcha
For everything to work smoothly, make sure to avoid . in the user or organization name you set up pages for. I had to rename my account from how-to.dev to how-to-dev because otherwise, the HTTPS wouldn't work with the page's domain.
Code
To start, let's limit ourselves to HTML. GitLab Pages will work only when we put the files in public folder, so let's create our index files directly there. public/index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Homework for life</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
</head>
<body>
<h1>Homework for life</h1>
<form>
<input type="date" />
<br>
<textarea placeholder="Put your story"></textarea>
</form>
</body>
</html>
The file is nothing else than basic HTML & placeholder for the future app.
Configuration
We configure CI with .gitlab-ci.yml:
pages:
artifacts:
paths:
- public
script:
- echo 'deploying...'
-
pages:- the name is important here - any other value will not cause GitLab to deploypublicto pages -
artifacts.paths = public- another key value to make sure deployment happens. Without - nothing will be deployed -
script: ...- my minimalistic approach backfired withoutscriptsthe file doesn't validate correctly, so I put it a dummy value here
Deployment
The successful deployment will look like:
Links
Summary
In this article, we have seen how to deploy an application to GitLab Pages.
Top comments (0)