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 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 because otherwise, the HTTPS wouldn't work with the page's domain.
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.
<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.
We configure CI with
pages: artifacts: paths: - public script: - echo 'deploying...'
pages:- the name is important here - any other value will not cause GitLab to deploy
artifacts.paths = public- another key value to make sure deployment happens. Without - nothing will be deployed
script: ...- my minimalistic approach backfired without
scriptsthe file doesn't validate correctly, so I put it a dummy value here
The successful deployment will look like:
In this article, we have seen how to deploy an application to GitLab Pages.