Updated: 03 September 2023

CI Pipelines

Static Site

To deploy a static site we make use of the pages object. Our script will make a new public directory and copy our site files to this directory. The only lists the branch from which we want our deployments to run from

Also note that for GitLab Pages Deployments you need to ensure that the deployment arifacts end up in the public directory because Pages cannot deploy from anywhere else

Hence the cp .public, mv .public stuff

1
pages:
2
  stage: deploy
3
  script:
4
    - mkdir .public
5
    - cp -r * .public
6
    - mv .public public
7
  artifacts:
8
    paths:
9
      - public
10
  only:
11
    - master

Angular

We have two stages from our Angular deployment

Build

During our build stage we install our dependencies, do the application build, and expose our distfolder as an artifact which can be passed to our deploy stage

Deploy

We simply copy the contents of our dist folder to our public directory.

Note that we also need to modify our index.html file’s base url to be <base href=""> otherwise our app will get a 404 error when trying to get our script and css files

1
build:
2
  image: node:latest
3
  stage: build
4
  script:
5
    - echo "compile"
6
    - npm install
7
    - npm install -g @angular/cli
8
    - npm run build
9
    - ls dist
10
  artifacts:
11
    paths:
12
      - dist
13
  cache:
14
    paths:
15
      - node_modules

1
pages:
2
  stage: deploy
3
  script:
4
    - ls
5
    - echo "deploy"
6
    - ls dist
7
    - mkdir .public
8
    - cp -r dist/. .public
9
    - mv .public public
10
    - ls public
11
  artifacts:
12
    paths:
13
      - public
14
  only:
15
    - develop

1
stages:
2
  - build
3
  - deploy
4

5
build:
6
  image: node:latest
7
  stage: build
8
  script:
9
    - echo "compile"
10
    - npm install
11
    - npm install -g @angular/cli
12
    - npm run build
13
    - ls dist
14
  artifacts:
15
    paths:
16
      - dist
17
  cache:
18
    paths:
19
      - node_modules
20

21
pages:
22
  stage: deploy
23
  script:
24
    - ls
25
    - echo "deploy"
26
    - ls dist
27
    - mkdir .public
28
    - cp -r dist/. .public
29
    - mv .public public
30
    - ls public
31
  artifacts:
32
    paths:
33
      - public
34
  only:
35
    - develop

1
<!doctype html>
2
<html lang="en">
3
<head>
4
  <meta charset="utf-8">
5
  <title>Nabeel's Blog</title>
6
  <base href="">
7
  <meta name="viewport" content="width=device-width, initial-scale=1">
8
  <link rel="icon" type="image/x-icon" href="favicon.ico">
9
</head>
10
<body>
11
  <app-root class="content"></app-root>
12
</body>
13
</html>