Jekyll est l’un des générateurs de sites statiques (Static Site Generator ou SSG) les plus populaires, largement utilisé par la communauté des développeurs pour créer des blogs, des portfolios et des sites web personnels. Cet article explique comment créer un site Jekyll avec GitHub Actions et le déployer gratuitement avec l’hébergement de sites statiques de Kinsta.
L’hébergement de sites statiques de Kinsta peut construire automatiquement des sites à partir de SSG et d’applications web construites sur Node.js. Pour servir d’autres contenus statiques, tels que les sites statiques générés par Jekyll (construit sur Ruby), nous avons besoin d’une autre approche.
Pré-requis
Pour ce tutoriel, nous supposons que vous avez :
- Une expérience avec Jekyll et Git.
- Un site web Jekyll opérationnel localement.
Pour suivre, vous pouvez utiliser cet exemple de base de code comme référence.
Déployer votre site Jekyll sur Kinsta
Il existe différentes façons de déployer votre site Jekyll sur Kinsta :
- En utilisant l’hébergement d’applications de Kinsta.
- En utilisant l’hébergement de site statique de Kinsta via l’une ou l’autre de ces méthodes :
- A. Construire votre site web avec l’intégration continue et le déploiement continu (CI/CD) avant de le déployer sur Kinsta.
- B. Servir uniquement vos fichiers statiques.
Dans cet article, nous vous présentons les deux méthodes de déploiement de Jekyll avec l’hébergement de sites statiques de Kinsta.
A. Construire votre site web avec les actions GitHub avant de le déployer sur Kinsta
Cette méthode utilise un flux de travail GitHub Actions (GHA) pour construire votre site web sur une branche spécifique (deploy) et utiliser cette branche pour déployer les fichiers statiques générés sur Kinsta.
Pour utiliser cette méthode, comme nous utilisons les Actions GitHub, votre base de code doit être hébergée sur un dépôt GitHub (public ou privé). Mais vous pouvez utiliser d’autres outils CI/CD pour obtenir le même résultat.
Les avantages les plus significatifs de cette méthode sont les suivants :
- Vous pouvez mettre en œuvre des processus d’intégration continue (CI) pour votre site, par exemple, une étape
testet/oulintpour vérifier votre code. - Votre site est construit automatiquement à chaque poussée vers votre dépôt. Vous n’avez pas besoin de le construire avant de le pousser.
- Vous garantissez que votre site n’est mis à jour que si le pipeline CI/CD est terminé avec succès.
Étapes :
- Ouvrez votre terminal à la racine du dépôt de votre site Jekyll.
- Créez une nouvelle branche orpheline (empty) (
deploy) et ajoutez-la à votre dépôt :
git switch --orphan deploy
git commit --allow-empty -m "Initial commit on deploy branch"
git push -u origin deployN’ajoutez aucun fichier à cette branche. Elle sera automatiquement alimentée par le flux d’actions GitHub avec le contenu du dossier _site de Jekyll généré.
- Consultez la branche
main:
git checkout main- Créez un répertoire .github/workflows dans
main.
- Pour configurer GHA, créez un nouveau fichier gh-actions.yml sous .github/workflows avec le contenu suivant :
name: Deploy Jekyll
on:
# The workflow runs only on pushes to the <main> branch
push:
branches: ["main"]
workflow_dispatch:
jobs:
build:
name: Build
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Ruby
uses: ruby/setup-ruby@v1
with:
ruby-version: '3.2'
- name: Set up Jekyll
run: gem install bundler && bundle install
- name: Build site
run: bundle exec jekyll build
env:
JEKYLL_ENV: production
- name: Upload artifact
uses: actions/upload-artifact@v3
with:
name: compiled-site
path: _site
deploy:
name: Deploy
needs: build
runs-on: ubuntu-latest
permissions:
contents: write
steps:
# Commit and push the artifacts to the <deploy> branch
- uses: actions/checkout@v4
with:
ref: deploy
- name: Download artifacts
uses: actions/download-artifact@v3
with:
name: compiled-site
path: _site
- name: Commit and push
# Replace "<username>" with your GH org or user name
run: |
git config user.name "<username>"
git config user.email "<username>@users.noreply.github.com"
git pull origin deploy
git add _site
git commit -m "Auto generated from ${GITHUB_SHA::7}"
git push- Commencez et poussez le code sur la branche
main.
À chaque poussée vers la branche main, le flux de travail des actions GitHub :
- Construit votre site Jekyll avec les fichiers statiques sous _site.
- Crée des artefacts avec le contenu de _site.
- Vérifie la branche
deploy. - Transmet les modifications de _site à la branche
deploy.
Pour mettre à jour votre site, il vous suffit de pousser vos modifications vers la branche main.
Ne poussez pas directement les modifications sur la branche deploy. Vous pouvez opter pour le verrouillage de cette branche sur GitHub afin d’éviter les poussées involontaires.
Voyez comment le déployer sur Kinsta ci-dessous.
B. Construire votre site web localement et le déployer directement sur Kinsta
Comme alternative à la méthode ci-dessus, vous pouvez construire votre site localement (et mettre à jour le contenu du dossier _site localement), puis pousser le contenu du dossier _site de votre Jekyll vers un dépôt (sur GitHub, GitLab, ou Bitbucket). En utilisant cette méthode, vous n’avez pas besoin de GH Actions ou d’un autre outil CI/CD pour construire votre site à chaque envoi vers votre dépôt, et c’est donc beaucoup plus simple que la méthode précédente.
L’inconvénient de cette méthode est que vous devez construire le contenu de votre site avant chaque transfert vers votre dépôt.
Cette méthode n’utilise que le contenu du dossier _site et le sert directement sur l’hébergement de site statique de Kinsta.
Étapes :
- Ouvrez le fichier .gitignore de votre répertoire et supprimez la ligne avec
_site. - Commencez et poussez le dossier _site dans votre répertoire.
Pour mettre à jour votre site web, assurez-vous de construire votre site avec Jekyll avant de le pousser vers votre dépôt.
Déployez votre site Jekyll sur Kinsta avec l’hébergement de site statique
Méthode GitHub Actions
Si vous avez utilisé la méthode GitHub Actions pour créer votre site web, suivez les étapes ci-dessous pour le déployer avec l’hébergement de site statique de Kinsta.
- Connectez-vous à votre compte MyKinsta ou créez-en un nouveau.
- Allez sur votre tableau de bord MyKinsta.
- Cliquez sur l’icône de menu dans le coin supérieur gauche de votre écran.
- Dans la colonne latérale, cliquez sur Sites statiques.
- Dans le coin supérieur droit, cliquez sur Ajouter un site.
- Autorisez votre fournisseur Git.
- Sélectionnez votre dépôt.
- Sélectionnez la branche
deploycomme branche par défaut (où se trouve le contenu du dossier _site). - Sélectionnez Déploiement automatique à la livraison pour déployer votre site à chaque poussée vers votre dépôt.
- Ajoutez un nom d’affichage unique à votre site et cliquez sur Continuer.
- Définissez vos réglages de construction :
- Commande de construction: laissez vide.
- Version de Node: laissez tel quel.
- Répertoire de publication:
_site.
- Cliquez sur Créer un site.
Kinsta déploie votre site et vous demande l’URL du site par défaut. Vous pouvez ensuite ajouter votre propre domaine personnalisé et votre propre certificat SSL si vous le souhaitez.
Méthode de construction locale
Si vous avez utilisé la méthode de construction locale, suivez les mêmes étapes pour déployer votre site web. Vous devez seulement changer la branche à partir de laquelle vous voulez déployer (à l’étape 8). Au lieu de deploy, utilisez main ou toute autre branche de votre choix.
Résumé
Cet article vous a présenté deux méthodes possibles pour déployer votre site web Jekyll avec l’hébergement de site statique de Kinsta.
La première méthode utilise CI/CD pour construire votre application et générer le contenu du dossier _site sur une autre branche de votre dépôt. Les plus grands avantages de l’utilisation de cette méthode avec l’hébergement de sites statiques de Kinsta sont les suivants :
- Avec CI/CD, vous pouvez ajouter de nombreux processus à votre site.
- Vous déployez votre site avec un service d’hébergement exceptionnel et vous le servez avec une performance maximale.
- Vous n’avez pas besoin d’un compte premium GitHub pour garder votre dépôt privé (comme vous le feriez si vous utilisiez GitHub Pages, par exemple).
Dans la seconde méthode, nous construisons Jekyll localement et poussons le contenu du dossier _site dans la même branche que le reste de vos fichiers Jekyll. Cette méthode peut être répétée pour les dépôts hébergés par d’autres fournisseurs Git (GitLab et Bitbucket) sans autre configuration. C’est la méthode la plus simple mais avec l’inconvénient d’avoir à construire votre site avant chaque poussée vers votre dépôt.
En plus de ces options, vous pouvez choisir de déployer votre site Jekyll avec l’hébergement d’applications de Kinsta. Il offre une plus grande flexibilité d’hébergement, une gamme plus complète d’avantages et l’accès à des fonctionnalités plus robustes. Par exemple, l’évolutivité, le déploiement personnalisé à l’aide d’un fichier Docker et des analyses complètes englobant des données historiques et en temps réel.
Lisez d’autres articles sur les sites web statiques sur le blog de Kinsta.
Je suis le responsable de l'équipe éditoriale chez Kinsta. Je suis un passionné d'open source et j'adore coder. Avec plus de 7 ans de rédaction technique et de modification pour l'industrie technologique, j'adore collaborer avec les gens pour créer des contenus clairs et concis et améliorer les flux de travail.
Laisser un commentaire