Développement d'un site web portfolio et de présentation basé sur le framework Hugo

• 1: Implémentation du site web

Fonctionnement de Hugo

Source : Hugo

Hugo est un framework moderne de génération de sites statiques, largement apprécié pour sa rapidité et sa simplicité. Voici quelques points clés concernant Hugo :

1. Vitesse : Hugo est connu pour sa capacité à générer des sites web à une vitesse impressionnante, ce qui le rend idéal pour les projets nécessitant des mises à jour fréquentes.

2. Simplicité : Avec Hugo, la création de contenu est simplifiée grâce à l’utilisation de fichiers Markdown, permettant une rédaction facile et intuitive.

3. Flexibilité : Hugo offre une grande flexibilité grâce à son système de thèmes et de templates, permettant une personnalisation poussée du design et des fonctionnalités du site.

4. Communauté active : Hugo bénéficie d’une communauté active et d’une documentation complète, facilitant l’apprentissage et le dépannage.

5. Multilingue : Hugo supporte nativement la création de sites multilingues, ce qui est un atout majeur pour les projets internationaux.

Hugo fonctionne en convertissant le contenu écrit en Markdown et les templates en HTML statique.

• Création de contenu : Les utilisateurs créent du contenu en utilisant des fichiers Markdown, ce qui permet une rédaction simple et efficace.
• Templates et thèmes : Hugo utilise des templates et des thèmes pour définir l’apparence et la structure du site. Ces templates sont écrits en HTML et CSS, avec des fonctionnalités supplémentaires fournies par Hugo.
• Génération du site : Lorsque vous exécutez Hugo, il compile le contenu et les templates pour générer un site web statique, prêt à être déployé sur un serveur web.

1 - Implémentation du site web

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 :

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.