L'URL FINALE == https://bonnebulle.gitlab.io/plain-html-redo Redirige vers = https://plain-html-redo-751743.gitlab.io ( URL Non personelle ) . . . hébergement gratuit ! --- Tuto : Objectif : Cloner un projet initial existant ( "> git clone +url" ) Comprendre le versionning + fork ( sauvegarder l'état d'un projet : "> git commit" + "> git push" ) Revenir dans le temps à un état de sauvegarde passé ( grace à son identifiant unique : hash ) Auto-héberger une page sur GitLab ( gratuit ) Éditer du code ... Le partager et envoyer les dernières modifications : GITLAB permet de travailler sans rien installer ! Il embarque un IDE (éditeur de code accessible en ligne ) On va travailler à partir de cet interface web .... mais on peut aussi... INSTALLER EN LOCAL : + VSCODE / CODIUM : ? https://alternativeto.net/software/codium/ ! https://github.com/Alex313031/codium/releases ( WINDOWS : win32/64 .exe /ou/ MAC : x64/arm64 .dmg ) ! https://code.visualstudio.com/download passer en Francais : https://www.it-connect.fr/tuto-changer-langue-visual-studio-code-francais-anglais/ ? Alt : JETBRAINS IDE https://www.jetbrains.com/webstorm/ MAIS AUSSI : + Terminal : ( utiliser la ligne de commande ) https://openclassrooms.com/fr/courses/6173491-apprenez-a-utiliser-la-ligne-de-commande-dans-un-terminal/6349461-decouvrez-le-terminal#r-6349452 ! Tuto (Anglais) https://coolguy.website/map-is-the-territory/introduction.html + Git : https://git-scm.com/downloads Vérifier via Terminal > git -v --- CREER UN COMPTE GITlab https://gitlab.com/users/sign_up On aurra aussi besoin d'un Token d'accès.... Un code long qui donne certaines autorisations ( par exemple pour pull/push/commit, etc ) ---> TOKEN PAGE du PROJET -> GAUCHE -> Settings > Access Token --> Add New Token (boutton gris) --- Token name ... --- Select a role -> Owner -- Select scopes --> ---- read_repository (pull) ---- write_repository (push) Vérfier / Révoquer les acces : --> GOTO : https://gitlab.com/-/profile/preferences . . . FORK PROJET PAGE d'exemple : https://gitlab.com/pages/plain-html On clic "Fork" --> Cela va copier le projet existant dans tes projets sur les serveurs de GitLab/Hub --> Et tu pourras alors modifier cette version (copie) en toute libertée On présice la desintaion + nom du projet EX/ https://gitlab.com/bonnebulle/plain-html-redo . . . Pour rendre le projet accessible en ligne, hébergé par GitLab/Hub... "Transformer" en PAGE : Dans le projet actuel -> -> GAUCHE -> Build > Pipeline -> New Pipeline (boutton bleu) -> Run Pipeline (boutton bleu) RESULTAT : PAGE URL == - https://USERNAME.gitlab.io/PROJECT_NAME . . . RETOUR AU PROJET --> Code (boutton bleu) --> Ouvrir avec.... ---> Va ouvrir un IDE... /SI/ on veut cloner+ouvrir le projet en local... ( avec vscode/codium/IDE installé sur l'ordinateur ) Gitlab va proposer de clonner le projet avant de l'ouvrir avec .... /SI/ on veut travailler en ligne (IDE GitLab)... On peut ouvrir un fichier spécifique EX/ https://gitlab.com/bonnebulle/plain-html-redo/-/blob/main/README.md --> Edit (boutton bleu) --> Open in Web IDE... DEPUIS CET IDE, on va pouvoir sauvegarder l'état d'avancement du projet en utilisant GIT ( qui se charge : - de cloner "> clone https://gitlab.com/bonnebulle/plain-html-redo.git" - de télécharger l'état actuel du projet présent sur le serveur git "> git pull" - d'envoyer / sauvegarder "> git commit" + "> git push" . . . ) Les IDE proposent d'envoyer ces commandes Git sans utiliser de terminal : via leur GUI ( Graphical User Interface )... en appuyant sur des bouttons visuels ! - Ils donnent à voir l'état actuel du projet dans un Historique + Graph... Ils permettent... - d'ajouter les dernières modifications : "> git add *" - de Commit ( sauvegarder avec un titre ) "> git commit" ... ... en toute simplicité ! ... mais pour apprendre il est bien de se familiariser avec les lignes de commande... ... de passer du temps via le terminal ! ... ainsi on comprend ce qui se passe "derière" quand on clic les boutons ... ( quelles commandes sont envoyées ) - Git - Git dans Bash ↳ https://git-scm.com/book/fr/v2/Annexe-A:-Git-dans-d%e2%80%99autres-environnements-Git-dans-Bash - Git - Git dans IntelliJ / PyCharm / WebStorm / PhpStorm / RubyMine ↳ https://git-scm.com/book/fr/v2/Annexe-A:-Git-dans-d%e2%80%99autres-environnements-Git-dans-IntelliJ-/-PyCharm-/-WebStorm-/ -PhpStorm-/-RubyMine - Git - Git dans Visual Studio Code ↳ https://git-scm.com/book/fr/v2/Annexe-A:-Git-dans-d%e2%80%99autres-environnements-Git-dans-Visual-Studio-Code --- CHECKOUT Changer de branche TUTO https://git-scm.com/book/fr/v2/Les-branches-avec-Git-Gestion-des-branches Etat des fichiers : > git status Ajouter un fichier (ou tous *) > git add ./README.md > git add * Git commit > git commit ... on écrit les modifications apportées dans le navigateur text ... on peut installer nano https://command-not-found.com/nano ... ou utiliser vim... .... on tappe -- ESCAPE + ":a" pour rendrer en mod édition .... on quitte+save en tappant -- ESCAPE + ":wq" .... on quitte no_save tappant -- ESCAPE + ":q!" /OU/ directement depuis la commmande > git commit -m 'initial commit of my project' Visualiser les modifications : > git log -p -2 > git log --pretty=oneline voir l'historique > git log --pretty=format:"%h %s" --graph annuler un ajout sur un fichier > git checkout -- CONTRIBUTING.md restaure > git restore --staged CONTRIBUTING.md BRANCHES TUTO : https://git-scm.com/book/fr/v2/Les-branches-avec-Git-Les-branches-en-bref voir les branches ( locales + distantes ) > git branch --all changer (basculer de branche) > git checkout -b forkit revenir/changer à la branche d'origine "main" (ou "forkit") > git checkout main > git checkout forkit envoyer les modifications à une branche spécifique > git push --set-upstream origin main merge > git merge forkit gestion de conflit de versions TUTO : - https://git-scm.com/book/fr/v2/Les-branches-avec-Git-Branches-et-fusions%C2%A0:-les-bases#s_basic_merging > git status > git mergetool --- Example plain HTML site using GitLab Pages. Learn more about GitLab Pages at https://pages.gitlab.io and the official documentation https://docs.gitlab.com/ce/user/project/pages/. --- **Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)* - [GitLab CI](#gitlab-ci) - [GitLab User or Group Pages](#gitlab-user-or-group-pages) - [Did you fork this project?](#did-you-fork-this-project) - [Troubleshooting](#troubleshooting) ## GitLab CI This project's static Pages are built by [GitLab CI][ci], following the steps defined in [`.gitlab-ci.yml`](.gitlab-ci.yml): ```yml image: busybox pages: stage: deploy script: - echo 'Nothing to do...' artifacts: paths: - public expire_in: 1 day rules: - if: $CI_COMMIT_REF_NAME == $CI_DEFAULT_BRANCH ``` The above example expects to put all your HTML files in the `public/` directory. ## GitLab User or Group Pages To use this project as your user/group website, you will need one additional step: just rename your project to `namespace.gitlab.io`, where `namespace` is your `username` or `groupname`. This can be done by navigating to your project's **Settings**. Read more about [user/group Pages][userpages] and [project Pages][projpages]. ## Did you fork this project? If you forked this project for your own use, please go to your project's **Settings** and remove the forking relationship, which won't be necessary unless you want to contribute back to the upstream project. ## Troubleshooting 1. CSS is missing! That means that you have wrongly set up the CSS URL in your HTML files. Have a look at the [index.html] for an example. [ci]: https://about.gitlab.com/solutions/continuous-integration/ [index.html]: https://gitlab.com/pages/plain-html/-/blob/main/public/index.html [userpages]: https://docs.gitlab.com/ee/user/project/pages/introduction.html#gitlab-pages-in-projects-and-groups [projpages]: https://docs.gitlab.com/ee/user/project/pages/introduction.html#gitlab-pages-in-projects-and-groups