Skip to content

Création d'une page de A à Z

Après avoir mis en place l'intégration continue, j'ai du créer une page qui puisse servir d'intermédiaire pour visiter la styleguide ou la documentation d'un projet. J'ai d'abord commencé par créer la maquette de cette page sur Photoshop :

Maquette

Une fois la maquette validée, j'ai commencé à développé la page puis à faire la version pour mobile.

Voici ce qu'elle donne dans mon navigateur :

Mobile

Après avoir fini de développer la page, j'ai mis à jour mon fichier .gitlab-ci.yml pour y ajouter cette page.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
build:docs:
    image: cogset/mkdocs:0.16
    script:
    - mkdir public
    - cd documentation
    - mkdocs build
    - mv site ../public/
    artifacts:
      paths:
      - public
    only:
      - master

build:styleguide:
    image: node:7.10-alpine
    before_script:
    - mkdir public
    - cd styleguide
    - npm install
    script:
    - npm run build
    - mv dist ../public/
    artifacts:
      paths:
      - public
    only:
      - master

pages:
    stage: deploy
    script:
    - mv index.html public/
    - mv css/ public/
    - mv fonts/ public/
    - mv img/ public/
    artifacts:
      paths:
      - public