Créer et mettre en ligne rapidement son CV avec Astro

Dans cet article, nous allons voir étape par étape comment créer son cv avec le framework Astro sur la base d'un template : https://github.com/Smilesharks/dev-portfolio. Nous verrons comment modifier le template de base, builder son site statique Astro et comment déployer le contenu pour le rendre disponible en ligne. L'objectif est de générer rapidement un résultat sans y passer plusieurs jours, d'aller à l'essentiel, d'obtenir une page web simple, élégante et responsive qui puisse s'adapter à tout type de support.

Prérequis

• pnpm

Installation

• pnpm create astro@latest -- --template Smilesharks/dev-portfolio

Développement

Lancer le serveur de dev :

• pnpm dev

Cliquez sur l'url pour visualiser votre cv localement sur votre poste de dev.

cv.json

Le fichier cv.json contient toutes les données nécessaires pour votre cv. Il peut facilement être modifié pour ajouter des sections personnalisées. C'est ce que j'ai fait par exemple pour différencier les compétences métiers, techniques et soft. Il ne faudra pas oublier aussi ajouter votre photo et un favicon personnalisé. C'est une étape chronophage qui peut sembler barbante mais c'est inévitable! Un Llm peut sans doute accélérer grandement le process ici!

Adaptations personnelles

J'ai réalisé plusieurs modifications pour mes besoins :

• Modification de l'organisation du layout et de la structure du cv.json
• Suppressions d'éléments non utilisés.
• Ajout types de compétences. (Métier, Technique, transverse)
• Ajout lien cv pdf.
• Ajout icon mdi.

Retrouvez les modifications sur mon dépôt github.

Production

Quand votre cv vous semble prêt, faire un :

• pnpm build

Si il n'y a aucune erreur, le site est généré dans le dossier "dist". C'est le contenu de ce dossier qui doit être déployé sur un hébergement web.

Hébergement

La documentation Astro donne beaucoup d'exemples pour déployer son site Astro chez un hébergeur. La manière la plus simple selon moi est de déployer sur une page github. Tout est détaillé dans ce lien.

J'ai choisi d'héberger mon cv sur mon site wordpress. Pour se faire, j'ai simplement créé un dossier "cv" à la racine. Via ftp, j'ai déposé les fichiers du dossier "dist" dans le dossier "cv". Mon cv est maintenant accessible : https://www.ndl-blog.net/cv/

Attention, les fichiers se trouvent dans un sous dossier "cv" et non à la racine. Il faut dans ce cas, spécifier à Astro lors du build que le site est dans un dossier spécifique. Cela se fait via le fichier de conf : "astro.config.js". Si vous ne faites pas ces modifications, le css, le javascript, les images, plus globalement toutes les ressources statiques de votre cv pourraient ne pas fonctionner ou s'afficher correctement.

import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";
import icon from "astro-icon";

// https://astro.build/config
export default defineConfig({
  base: '/cv',
  trailingSlash: "always",
  integrations: [tailwind(),icon()]
});

Déploiement automatique

Puisqu'on essaye de se simplifier la vie au maximum, j'ai ajouté une action github qui build et transfert les fichiers modifiés à chaque push sur la branche main.

name: Deploy to FTP

on:
  push:
    branches:
      - main

jobs:
  deploy:
    name: FTP Deploy sur o2switch dossier cv
    runs-on: ubuntu-latest
    steps:
      - name: Checkout du repository
        uses: actions/checkout@v4

      - uses: pnpm/action-setup@v4
        name: Install pnpm
        with:
          version: 10
          run_install: false

      - name: Install Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'

      - name: Install dependencies
        run: pnpm install --frozen-lockfile=false

      - name: Build project
        run: pnpm build

      - name: Deployer via FTP sur o2switch dossier cv
        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
        with:
          server: ${{ secrets.FTP_HOST }}
          username: ${{ secrets.FTP_USER }}
          password: ${{ secrets.FTP_PASS }}
          protocol: ftp  # Options possibles : ftp, ftps, sftp
          port: 21  # Par défaut : 21 pour FTP, 990 pour FTPS, 22 pour SFTP
          security: loose  # Options : loose, strict (strict = certificat SSL validé)
          local-dir: dist/
          server-dir: /cv/