Aller au contenu

Comment créer un site à partir d'un autre ?⚓︎

I. Recopier le site⚓︎

👉 Aller sur le dépôt du site qui sert de modèle.

Site à copier

👉 On va recopier le site : Cliquer sur le bouton «Créer une divergence» en haut à droite («fork» en anglais)

nom image

👉 Remplir le champ Project name, puis sélectionner le domaine avec le menu déroulant.

Cocher «Public» pour publier le projet puis cliquer sur «Fork project»

nom image

😀 On obtient :

nom image

👉 Dans le menu de gauche sélectionner "Intégration et livraison continue" puis "Pipelines"

pipeline

👉 Puis en haut à droite cliquer sur «Run pipeline»

run pipeline2

👉 Puis cliquer à nouveau sur «Run pipeline» sans rien changer à ce qui est proposé

run pipeline3

⌛ Etre assez patient et attendre un peu. On attend pendant qu'il s'affiche build.

build

😀 Après quelques instants s'affiche :

passed

👉 Vous pouvez enfin cliquer sur "Déploiement" puis sur "pages"

rendu

👉 Il faut décocher "Utiliser un domaine unique"

Vous obsrvez que l'url proposée est très compliquée. Elle sera simplifiée après avoir décoché "Utiliser un domaine unique" puis enregistré la modification

Décocher puis enregistrer

👉 Après avoir enregistré la modification, vous obtenez une url plus simple :

url simple

C'est l'adresse de rendu de votre site, vous pouvez la noter 😊.

II. Personnaliser le site⚓︎

😀 C'est presque fini !

Il faut modifier le README.md

👉 Cliquer sur le nom de votre site en haut à gauche

clic mon site

👉 Cliquer sur "Modifier", puis sélectionner "EDI Web"

web ide

👉 Cliquer sur le fichier README.md

readme

👉 Visualisation du fichier README.md

fichier readme

👉 Modifier le fichier README.md

fichier readme

👉 Enregistrer la modification du fichier en réalisant un "commit"

Voir ci-dessous

Réaliser un commit

Suivre cette méthode pour toutes les modifications de fichiers de votre site.

Cliquer sur l'icône :

commit

Renseigner le commit :

message commit

Visualiser les modifications apportées par le commit demandé :

visu

Faire le commit :

faire commit

En bas à droite (visible quelques instants), Cliquer sur Go to project pour visualiser l'évolution de la construction du site.

retour projet

Au début, la construction est en cours :

pipeline attend

Une fois la construction terminée, on obtient :

pipeline ok

Rafraichir la page du rendu de votre site. Il faut attendre un peu, et parfois recommencer, pour voir apparaître les modifications.

Personnaliser le projet : Modifier le fichier mkdocs.yml

👉 Revenir sur Web IDE

web ide

👉 Sélectionner le fichier mkdocs.yml

fichier mkdocs.yml

👉 Modifier le fichier mkdocs.yml

Modifier les clefs de configurations :

  • site_name:
  • site_description:
  • copyright:
  • extra: social: link: (celui avec le lien mailto:)
  • éventuellement theme:

👉 Faire le commit

Modifier le fichier index.md

👉 Revenir sur Web IDE

web ide

👉 Sélectionner le fichier index.md du dossier docs

index

  • Éditer le fichier index.md
  • Le personnaliser. Il s'agit de la page d'accueil de votre site.

Si besoin voir le tutoriel Avant de démarrer

👉 Faire le commit

URL du site

😀 On peut se rendre sur l'adresse du rendu (nous l'avons trouvée dans "Déploiement" puis "Pages") pour voir le résultat.

Changer de logo

Vous pouvez choisir un autre logo en suivant ce lien : Logos Material Design Icons

  • Comme expliqué précédemment, ouvrir le fichier mkdocs.yml
  • Vers la ligne 25 vous pouvez lire :
    logo: material/stairs-up

👉 Il suffit de remplacer stairs-up par la référence choisie.

Par exemple :

avec : logo: material/teddy-bear

on obtient le rendu suivant :

logo ours

III. Votre propre contenu⚓︎

Pour ajouter vos propres pages, voir le tutoriel Kit de survie Gitlab en ligne

⚙️ Modification avancée de votre site

⚠️ Cette modification n'est à réaliser que si vous avez bien réfléchi aux conséquences.

Elle supprime le lien direct de votre site

  • vers le dépôt du site : forge

  • vers le dépôt de la page active : modif_page

👉 Vous pourrez toujours atteindre votre dépôt à partir de son adresse url.

👉 Ci-dessous votre haut de page avant et après la modification :

Avant : avant

Après : après

Comment faire ?
  • Suivre les explications du II. pour ouvrir le fichier mkdocs.yml

  • Vers la ligne 53, repérer :

# Fin de modifications à effectuer, ne pas toucher les lignes suivantes sauf si vous comprenez ce que vous faites.

Quelques lignes en dessous, mettre en commentaire (ajouter simplement # au début de la ligne) les deux lignes suivantes.

# repo_url: !ENV [CI_PROJECT_URL]
# edit_uri: !ENV [EDIT_VARIABLE]

👉 Faire le commit

Ne pas supprimer

Il est recommandé de ne pas supprimer ces deux lignes pour pouvoir les rétablir facilement en supprimant le # du début de la ligne.