Aller au contenu principal

Publication sur un site Netlify

1. Description​

Il est possible de créer un pipeline Netlify pour construire et publier automatiquement le site web static sur un site Netlify.

2. Ajout du dépôt Gilab sur le compte Netlify​

  • Lier le site Netlify à un repository Gitlab

3. Création d'un pipeline CI/CD Netlify​

  • Configurer le pipeline Netlify, dans la section Build & deploy > Continuous deployment

4. Création du fichier netlify.toml​

Normalement, le site web Netlify est monorepo ie. le site web devrait être à la racine https://tzshare.netlify.app/ mais pour garder la même structure que ma page Gitlab, j'ai voulu que mon site web soit accessible depuis le sous-répertoire "homelabasdoc", afin d'accéder à mon site via l'URL : https://tzshare.netlify.app/docusaurus/.

J'ai également rajouté une redirection (HTTP/301) de la racine du site "/" vers le sous-répertoire "/homelabasdoc".

netlify.toml
[build]
command = "yarn build && mkdir public && mv build public/homelabasdoc"
publish = "public"
[build.environment]
URL = "https://tzshare.netlify.app"
BASEURL = "homelabasdoc"
[[redirects]]
from = "/"
to = "/homelabasdoc/"
status = 301
  • Modifier le fichier .gitlab-ci.yml afin de passer en variable d'environnement les variables url et baseUrl
.gitlab.yml
const config: Config = {
  title: 'HomeLabAsDoc',
  tagline: 'Bienvenue sur la page consacrée à mon HomeLab. Docs are cool !!',
  favicon: 'img/favicon.ico',
  
  // Set the production url of your site here
- url: 'https://tzshare.gitlab.io',
+ url: process.env.URL || 'https://tzshare.gitlab.io',
- baseUrl: '/homelabasdoc/',
+ baseUrl: process.env.BASEURL || '/homelabasdoc/',
  
  // Build warnings
  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',

5. Déploiement du site web sur Netlify​

  • Après avoir commit une modification sur votre dépôt Gitlab, le pipeline Netlify devrait s'exécuter automatiquement, construire le site web et le déployer sur le site web Netlify
  • Vérifier que le pipeline Netlify n'est pas en échec

6. Test du site web Netlify​