# Accéder au projet : ( va afficher le contenu du dossier "/public" ) URL du projet perso - https://USERNAME.gitlab.io/PROJECT_NAME => EX/ mon projet (fork) L'URL FINALE == https://bonnebulle.gitlab.io/plain-html-redo Redirige vers = https://plain-html-redo-751743.gitlab.io ( URL Non personelle ) . . . mais 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 l'installer "en local" : # 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/ ## 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 --- # En ligne sur GitLab/Hub CREER UN COMPTE GItLab/Hub https://gitlab.com/users/sign_up ## TOKEN On aurra aussi besoin d'un Token d'accès.... Un code long qui donne certaines autorisations ( par exemple pour pull/push/commit, etc ) DO .... 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 DO .... 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 . . . # METTRE EN LIGNE 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 . . . # OUVRIR ou CLONER DO .... RETOUR AU PROJET --> Code (boutton bleu) --> Ouvrir avec.... ---> Va ouvrir un IDE... ## Cloner le projet en entier (travailler en local) /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 .... ## depuis le terminal On peut également cloner le projet depuis le terminal avec : /SI/ on veut le faire manuellement DO .... RETOUR AU PROJET --> Code (boutton bleu) --> Clone with HTTPS (copy https.....monprojet.git) Dans le terminal aller dans un dossier ou télécharger le projet . . . Chemin actuel > pwd Se déplacer cd EX dossier actuel/ ./(+press TABULATION) EX dossier parent/ ../(+press TABULATION) > cd ./ > cd ../ Une fois dans le bon dossier (au choix) > git clone https....monprojet.git lister fichiers clonés > ls --> dossier du projet --> on va dedans > cd monprojet > ls Localiser le chemin du dossier actuel > pwd ## Utiliser l'IDE en ligne - Ouvir 1 fichier... en ligne sur l'IDE embarquée de GitLab... /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... # DO Git commandes depuis l'IDE local apres un clone DEPUIS notre 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 ) # TUTOS + COMMANDES - 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 --- ## PULL (aspirer) Récupère les fichiers tels que présents sur GitLab/Hub ( on récupère l'état de travail des fichiers présents sur le serveur ) > git pull ( va prévenir si des modifications difèrent en local ) ## Etat des fichiers : > git status Ajouter un fichier (ou tous *) > git add ./README.md > git add * Remove du stash (état lattant avant commit + push) > git rm ./README.md annuler un ajout sur un fichier > git checkout -- CONTRIBUTING.md restaure > git restore --staged CONTRIBUTING.md ## Commit Git commit ( sauvegarder l'état actuel des fichiers locaux ) > 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' ## Log Visualiser les modifications : > git log -p -2 > git log --pretty=oneline ## History voir l'historique > git log --pretty=format:"%h %s" --graph ## Sur GitLab/Hub On peut retrouver les commit ici ; > EX/ https://gitlab.com/USER_NAME/PROJECT_NAME/-/commits/main?ref_type=heads # ENVOYER ## PUSH Envoi des modifications après un commit ( qui valides les modifications locales apportées à tel ou tel fichier ) > git push ( id + TOKEN ) préciser la branch à qui envoyer le commit (et fichiers) > git push --set-upstream origin main ( id + TOKEN ) # RESET (retour vers le passé/futur) à chaque commit un identifiant unique est créé (hash) > EX/ 27162d625d6665a824be74c281d07f6894f16888 On peut retrouver les commit ici ; > EX/ https://gitlab.com/USER_NAME/PROJECT_NAME/-/commits/main?ref_type=heads En faisant un reset hard on retrouve les fichiers telque durant le dit commit > git reset --hard 27162d625d6665a824be74c281d07f6894f16888 # 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 CHECKOUT Changer de branche TUTO https://git-scm.com/book/fr/v2/Les-branches-avec-Git-Gestion-des-branches 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 --- # READ_ME D'origine : 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