# How to deploy an application to GitLab pages

Let's say we want to develop a simple application inspired by [Homework for Life](https://homeworkfor.life/). Before we even start development, let's figure out preview deployment first.

# GitLab pages
[GitLab pages](https://docs.gitlab.com/ee/user/project/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`:
```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 deploy `public` to pages
* `artifacts.paths = public` - another key value to make sure deployment happens. Without - nothing will be deployed
* `script: ...` - my minimalistic approach backfired without `scripts` the file doesn't validate correctly, so I put it a dummy value here

# Deployment
The successful [deployment](https://gitlab.com/how-to-dev/homework-for-life-vanilla/-/pipelines/357393442) will look like:
![pipelines.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629650783425/wpOZ1clBQ.png)

# Links
* [TED talk by the author of the idea](https://www.youtube.com/watch?v=x7p329Z8MD0)
* [repository](https://gitlab.com/how-to-dev/homework-for-life-vanilla/)
* [branch](https://gitlab.com/how-to-dev/homework-for-life-vanilla/-/tree/deploy-to-pages)

# Summary
In this article, we have seen how to deploy an application to GitLab Pages.

%%[gitlab]
