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

• GitLab CI
• GitLab User or Group Pages
• Did you fork this project?
• Troubleshooting

GitLab CI

This project's static Pages are built by GitLab CI, following the steps defined in .gitlab-ci.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 and project Pages.

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.