Implémentation du site web

Dans cette partie, nous allons voir les aspects techniques du site web, son développement et son déploiement.

Développement

L’un des avantages de Hugo est l’utilisation de templates et de thèmes permettant la personnalisation du site. Pour développer rapidement le site, j’utilise un thème existant, “Docsy”.

Ce thème est utilisé pour :

  • Structurer le contenu : Docsy offre une structure claire pour organiser les documents et les sections du site, facilitant la navigation pour les utilisateurs.
  • Design réactif : Le thème est conçu pour être réactif, assurant une bonne expérience utilisateur sur différents appareils.
  • Fonctionnalités intégrées : Docsy inclut des fonctionnalités utiles comme la recherche, la navigation latérale et le support multilingue.

Structure du dossier du projet :

/hugo-cv
├──  /assets
|       ├──  /icons
|       ├──  /scss
├──  /content
|   ├──  /en
|       ├──  /about
|       ├──  /project
|       ├──  /work
|   ├──  /fr
|       ├──  /about
|       ├──  /project
|       ├──  /work
├──  /layouts
├──  /static
├── config.yaml
├── .gitlab-ci.yml

Durant le développement, plusieurs étapes clés ont été suivies :

  1. Configuration initiale : Installation de Hugo et configuration du projet avec le thème Docsy.
  2. Personnalisation : Adaptation du thème pour répondre aux besoins spécifiques du projet, y compris la modification des styles et des templates.
  3. Création de contenu : Rédaction des pages en Markdown et organisation des sections.
  4. Tests locaux : Utilisation de hugo server pour tester le site localement.

Déploiement

Une fois qu’une première version du site a été développée, il reste à héberger le site. L’une des solutions proposées par la documentation de Hugo est d’héberger sur GitLab. En créant un dépôt sur GitLab, on peut directement l’héberger :

GitLab logo

Source : GitLab

  1. Configuration du dépôt GitLab : Création d’un nouveau dépôt GitLab pour le site et configuration des fichiers de déploiement.
  2. Configuration CI/CD : Utilisation de GitLab CI/CD pour automatiser le déploiement. Cela inclut la création d’un fichier .gitlab-ci.yml pour définir les étapes de build et de déploiement.
  3. Hébergement : Configuration de GitLab Pages pour héberger le site, rendant le contenu accessible au public.

Le fichier .gitlab-ci.yml utilisé pour le déploiement :

stages:
  - build
  - deploy

variables:
  HUGO_VERSION: "0.137.1"
  GIT_SUBMODULE_STRATEGY: recursive

before_script:
  - apt-get update && apt-get install -y wget curl golang
  - wget https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_Linux-64bit.tar.gz
  - tar -xzf hugo_extended_${HUGO_VERSION}_Linux-64bit.tar.gz -C /usr/local/bin
  - hugo version
  - curl -fsSL https://deb.nodesource.com/setup_18.x | bash -
  - apt-get install -y nodejs

build:
  stage: build
  script:
    - if [ -f package.json ]; then npm install; fi
    - npm install -g sass
    - hugo --gc --minify --baseURL "$CI_PAGES_URL/"
  artifacts:
    paths:
      - public
  only:
    - main

pages:
  stage: deploy
  script:
    - echo "Deploying to GitLab Pages..."
  artifacts:
    paths:
      - public
  only:
    - main
  environment:
    name: production
    url: $CI_PAGES_URL

De plus, j’ai pu, avec hello.cv, acheter un domaine avec mon nom pour faciliter l’accès au site. Cela permet aux visiteurs de trouver facilement mon portfolio en utilisant une URL personnalisée et professionnelle.

Pour voir le projet, suivez ce lien vers le GitLab.