Post

Prise en main

Installez, configurez et déployez votre premier site basé sur Chirpy.

Prise en main

Créer le dépôt du site

Vous avez deux options :

Option 1. Utilisation du démarreur (recommandé)

Simplifie les mises à niveau, isole les fichiers inutiles et vous laisse vous concentrer sur l’écriture avec une configuration minimale.

  1. Connectez-vous à GitHub et ouvrez le starter.
  2. Cliquez sur Use this template > Create a new repository.
  3. Nommez le dépôt <username>.github.io, en remplaçant username par votre nom d’utilisateur GitHub en minuscules.

Option 2. Forker le thème

Pratique pour modifier des fonctionnalités ou l’interface, mais plus difficile à mettre à niveau. Ne choisissez cette voie que si vous connaissez Jekyll et comptez modifier fortement le thème.

  1. Connectez-vous à GitHub.
  2. Forkez le dépôt du thème.
  3. Nommez le dépôt <username>.github.io, en remplaçant username par votre nom d’utilisateur GitHub en minuscules.

Configuration de l’environnement

Une fois le dépôt créé, configurez votre environnement de développement de l’une des deux façons suivantes :

Conteneurs de développement (recommandé pour Windows)

Les Dev Containers offrent un environnement Docker isolé qui évite les conflits système et gère toutes les dépendances dans le conteneur.

Étapes :

  1. Installez Docker :
  2. Installez VS Code et l’extension Dev Containers.
  3. Clonez votre dépôt :
  4. Attendez la fin de la configuration.

Configuration native (recommandée pour les OS de type Unix)

Sur les systèmes de type Unix, une configuration native offre les meilleures performances ; les Dev Containers fonctionnent aussi.

Étapes :

  1. Suivez le Jekyll installation guide et assurez-vous que Git est installé.
  2. Clonez votre dépôt localement.
  3. Si vous avez forké le thème, installez Node.js et exécutez bash tools/init.sh à la racine pour initialiser le dépôt.
  4. Exécutez bundle à la racine du dépôt pour installer les dépendances.

Utilisation

Démarrer le serveur Jekyll

Lancez le site localement :

1
$ bundle exec jekyll serve

Avec les Dev Containers, exécutez cette commande dans le terminal VS Code.

Après quelques secondes, le site est disponible à http://127.0.0.1:4000.

Configuration

Mettez à jour _config.yml au besoin. Options courantes :

  • url
  • avatar
  • timezone
  • lang

Options de contact social

Les contacts sociaux apparaissent en bas de la barre latérale. Activez-les ou désactivez-les dans _data/contact.yml.

Personnalisation de la feuille de style

Copiez le fichier assets/css/jekyll-theme-chirpy.scss du thème dans le même chemin de votre site, puis ajoutez vos styles à la fin.

Personnalisation des actifs statiques

La configuration des actifs statiques est arrivée en 5.1.0. Leur CDN est défini dans _data/origin/cors.yml ; remplacez des entrées selon les conditions réseau de la région où votre site est publié.

Pour auto-héberger les actifs statiques, voir le dépôt chirpy-static-assets.

Déploiement

Avant le déploiement, vérifiez _config.yml et définissez correctement url. Pour un project site sans domaine personnalisé, ou pour servir sous une base URL hors GitHub Pages, définissez baseurl avec le nom du projet précédé de /, par exemple /project-name.

Choisissez maintenant une des méthodes suivantes.

Déployer avec GitHub Actions

Préparez ce qui suit :

  • Sur le forfait GitHub Free, gardez le dépôt du site public.
  • Si vous avez validé Gemfile.lock et que votre machine n’est pas sous Linux, ajoutez la plate-forme Linux :

    1
    
    $ bundle lock --add-platform x86_64-linux
    

Configurez ensuite Pages :

  1. Sur GitHub, ouvrez Settings > Pages. Sous Build and deployment > Source, sélectionnez GitHub Actions.
    Build source Build source

  2. Poussez un commit pour déclencher le workflow. Dans l’onglet Actions, suivez Build and Deploy ; en cas de succès, le site se déploie automatiquement.

Ouvrez l’URL fournie par GitHub pour voir votre site.

Construction et déploiement manuels

Pour les serveurs auto-hébergés, construisez le site localement et téléversez le résultat.

Depuis la racine du projet, construisez le site :

1
$ JEKYLL_ENV=production bundle exec jekyll b

Sauf autre chemin de sortie, les fichiers sont placés dans _site. Téléversez-les sur votre serveur.

This post is licensed under CC BY 4.0 by the author.