Prise en main

Créer le dépôt du site

Lors de la création du dépôt du site, vous avez deux options selon vos besoins :

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

Cette approche simplifie les mises à niveau, isole les fichiers inutiles et convient parfaitement aux utilisateurs qui souhaitent se concentrer sur l’écriture avec une configuration minimale.

1. Connectez-vous à GitHub et accédez au starter.
2. Cliquez sur le bouton Utiliser ce modèle, puis sélectionnez Créer un nouveau dépôt.
3. Nommez le nouveau dépôt <username>.github.io, en remplaçant username par votre nom d’utilisateur GitHub minuscule.

Option 2. Forker le thème

Cette approche est pratique pour modifier des fonctionnalités ou la conception de l’interface utilisateur, mais présente des défis lors des mises à niveau. N’essayez donc pas ceci à moins que vous ne soyez familier avec Jekyll et que vous envisagez de modifier fortement ce thème.

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

Configuration de l’environnement

Une fois votre dépôt créé, il est temps de configurer votre environnement de développement. Il existe deux méthodes principales :

Utilisation de conteneurs de développement (recommandé pour Windows)

Les conteneurs de développement offrent un environnement isolé utilisant Docker, qui évite les conflits avec votre système et garantit que toutes les dépendances sont gérées au sein du conteneur.

Étapes:

1. Installez Docker :
   • Sous Windows/macOS, installez Docker Desktop.
   • Sous Linux, installez Docker Engine.
2. Installez VS Code et l’extension Dev Containers.
3. Clonez votre dépôt :
   • Pour Docker Desktop : démarrez VS Code et clonez votre dépôt dans un volume conteneur.
   • Pour Docker Engine : clonez votre dépôt localement, puis ouvrez-le dans un conteneur via VS Code.
4. Attendez la fin de la configuration des conteneurs de développement.

Configuration native (recommandée pour les systèmes d’exploitation de type Unix)

Pour les systèmes de type Unix, vous pouvez configurer l’environnement de manière native pour des performances optimales, mais vous pouvez également utiliser des conteneurs de développement comme alternative.

Étapes:

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

Utilisation

Démarrez le serveur Jekyll

Pour exécuter le site localement, utilisez la commande suivante :

$ bundle exec jekyll serve

Si vous utilisez des conteneurs de développement, vous devez exécuter cette commande dans le terminal VS Code.

Après quelques secondes, le serveur local sera disponible à http://127.0.0.1:4000.

Configuration

Mettez à jour les variables dans _config.yml si nécessaire. Certaines options typiques incluent :

• url
• avatar
• timezone
• lang

Options de contact social

Les options de contact social sont affichées en bas de la barre latérale. Vous pouvez activer ou désactiver des contacts spécifiques dans le fichier _data/contact.yml.

Personnalisation de la feuille de style

Pour personnaliser la feuille de style, copiez le fichier assets/css/jekyll-theme-chirpy.scss du thème dans le même chemin de votre site Jekyll et ajoutez vos styles personnalisés à la fin du fichier.

Personnalisation des actifs statiques

La configuration des actifs statiques a été introduite dans la version 5.1.0. Le CDN des actifs statiques est défini dans _data/origin/cors.yml. Vous pouvez en remplacer certains en fonction des conditions du réseau dans la région où votre site Web est publié.

Si vous préférez auto-héberger les actifs statiques, référez-vous au dépôt chirpy-static-assets.

Déploiement

Avant le déploiement, vérifiez _config.yml et assurez-vous que url est correctement défini. Si vous utilisez un project site sans domaine personnalisé, ou si votre site est servi avec une base URL hors GitHub Pages, définissez baseurl avec le nom du projet en commençant par /, par exemple /project-name.

Vous pouvez désormais choisir UNE des méthodes suivantes pour déployer votre site Jekyll.

Déployer avec GitHub Actions

Préparez ce qui suit :

• Si vous bénéficiez du forfait GitHub Free, gardez le dépôt de votre site public.

• Si vous avez validé Gemfile.lock dans le dépôt et que votre machine locale n’exécute pas Linux, mettez à jour la liste des plates-formes du fichier de verrouillage :

  $ bundle lock --add-platform x86_64-linux
  

Ensuite, configurez le service Pages :

1. Accédez à votre dépôt sur GitHub. Sélectionnez l’onglet Paramètres, puis cliquez sur Pages dans la barre de navigation de gauche. Dans la section Source (sous Build et déploiement), sélectionnez GitHub Actions dans le menu déroulant.

2. Envoyez tous les commits vers GitHub pour déclencher le workflow Actions. Dans l’onglet Actions de votre dépôt, vous devriez voir le workflow Build and Deploy en cours d’exécution. Une fois la construction terminée et réussie, le site sera déployé automatiquement.

Vous pouvez maintenant visiter l’URL fournie par GitHub pour accéder à votre site.

Construction et déploiement manuels

Pour les serveurs auto-hébergés, vous devrez créer le site sur votre ordinateur local, puis télécharger les fichiers du site sur le serveur.

Accédez à la racine du projet source et créez votre site avec la commande suivante :

$ JEKYLL_ENV=production bundle exec jekyll b

Sauf si vous avez spécifié le chemin de sortie, les fichiers du site générés seront placés dans le dossier _site du répertoire racine du projet. Téléchargez ces fichiers sur votre serveur cible.