bonnebulle/plain-html-redo
1
0
Fork 0
mirror of https://gitlab.com/bonnebulle/plain-html-redo.git synced 2025-12-06 01:59:32 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity
52 Commits 3 Branches 0 Tags
5e69cdc7b6edd11a41ef948cab95ae52c35e4241
Go to file
Clone
Open with VS Code Open with VSCodium Open with Intellij IDEA
Download ZIP Download TAR.GZ Download BUNDLE
vincent_b 5e69cdc7b6 README staged
2024-11-20 14:27:49 +00:00
.idea
TOKEN
2024-11-19 19:52:48 +01:00
public
navbar_no_left_padding
2024-11-19 17:31:39 +00:00
.gitlab-ci.yml
Update .gitlab-ci.yml
2022-04-25 10:40:37 +00:00
FORKIT.md
FORKIT.md new branche
2024-11-19 20:19:18 +01:00
fullyfly.md
fullyfly INIT
2024-11-19 20:24:25 +01:00
README.md
README staged
2024-11-20 14:27:49 +00:00

README.md

Accéder au projet :

( va afficher le contenu du dossier "/public" )

URL du projet perso

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 :

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 ==

. . .

OUVRIR ou CLONER

CHOIX - depuis gitLab/Hub : Edit avec l'IDE (le plus simple)

DO ....
RETOUR AU PROJET
--> Edit ( à côté du boutton bleu )
--> Web IDE

CHOIX - depuis le terminal (local)

On peut également cloner le projet depuis le terminal avec :

git clone https://gitlab.com/bonnebulle/plain-html-redo.git

détail - Terminal commandes (pwd/ls/cd)

/SI/ on veut le faire depuis Git/Labhub
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

PULL (aspirer == télécharger/sync)

Une fois un projet cloné.... quand on est dans son dossier on peut télécharger les dernières modifications apportées par les dev dans leur repertoire de travail git (distant)....

Récupèrer 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 )

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 :

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

Etat des fichiers + processus intermédiaires

  • staged/stash - état intermédaire des fichiers priss en compte (ou pas)
  • puis commit - sauvegarde de cet état de cet état (staged) du projet,
  • puis envoi - push

( source : https://nulab.com/learn/software-development/git-tutorial/git-basics/ )

( source : https://tecadmin.net/basic-git-workflow/ )

( source : https://www.earthdatascience.org/workshops/intro-version-control-git/basic-git-commands/ )

Quand un fichier est modifié, pour enregistrer son état actuel, ici, en local..
... dans un état actuel : staged
--> staged == "stade" / "état"

... la version prise en compte se retrouve dans un espace disque de sauvegarde "satsh"
... les fichiers dans le stash (et leur état staged) sera pris en compte durant le prochain commit
.... le commit permet d'indiquer aux autres utilisateurs quelles modifications ont été apportées au projet
.... Je peux indiquer ce qui marche et expliquer les modifications
.... la dernière étape sera d'envoyer l'état actuel des fichers (staged/stash) et le commentaire du commit ... au serveur !
... ! Pour l'user : D'autres utilisateur.ices pourrons ainsi se référer à ce point de sauvegarde
..... ( par son nom et son identifiant unique hash )
..... restaurer ou étudier le code depuis ce point de sauvegarde
... ! Pour la/le dev : plutôt que d'envoyer un à un chaque fichier, cette méthode permet de tout synchroniser d'un coup
.... quand le commit est prêt on git push !

Etat des fichiers -- staged/stash - status

On peut voir l'état des fichiers :

git status

EX/

Sur la branche main
Votre branche est à jour avec 'origin/main'.

Modifications qui seront validées :
  (utilisez "git restore --staged <fichier>..." pour désindexer)
	nouveau fichier : NEW_file_ready.md

Modifications qui ne seront pas validées :
  (utilisez "git add/rm <fichier>..." pour mettre à jour ce qui sera validé)
  (utilisez "git restore <fichier>..." pour annuler les modifications dans le répertoire de travail)
	supprimé :        fullyfly.md

Fichiers non suivis:
  (utilisez "git add <fichier>..." pour inclure dans ce qui sera validé)
	NEW_file.md
  • "non suivis" == le fichier n'a pas été ajouté (add) en staged
  • "qui ne seront pas validées" == fichier supprimé dans les fichiers (mais pas avec git rm)
  • "qui seront validées" == sont dans le stash (ajoutés)

On nous indique alors ceux qui sont modifiés, les quels sont dans le staged (ou non)
.. quels fichiers seront compris dans le prochain commit (et comment)

ADD

On peu ensuite ajouter l'état actuel de nos fichiers (modifications) au staged
Ajouter un fichier (ou tous *)

git add ./README.md git add *

RM / checkout / restore

Remove du staged (état lattant avant commit + push)
... Cela ne supprime pas le fichier sur notre ordinateur/serveur (en local)
... mais cela le retire du staged, de la liste des fichiers qui seront affectés par le prochain commit

git rm ./README.md

annuler un ajout sur un fichier

git checkout -- CONTRIBUTING.md

restaure

git restore --staged CONTRIBUTING.md

Commit + éditeur

( sauvegarder l'état actuel des fichiers locaux )
( tel que pris en compte dans le staged )

git commit

Editeur - ligne de commande

/CHOIX/ on peut écrir les modifications directement depuis la commmande

git commit -m 'initial commit of my project'

Editeur - nano / vim / autres

/CHOIX/ on écrit les modifications apportées dans l'éditeur de text dans le shell/terminal

. on peut installer nano https://command-not-found.com/nano

. ou utiliser Vim ( un autre éditeur )...
... ( les commandes se font au clavier ) ... ( : indique une commande ) ... --> https://vim.rtorr.com
....
.... on tappe -- ESCAPE + ":a" pour rendrer en mod édition
.... on quitte+save en tappant -- ESCAPE + ":wq"
.... on quitte no_save tappant -- ESCAPE + ":q!"

. ou autre éditeur tel VSCodium

Editeur - définir par défaut

/DO/

git config --global core.editor nano ( détail : https://git-scm.com/book/fr/v2/Démarrage-rapide-Paramétrage-à-la-première-utilisation-de-Git )

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/ 27162d625d

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 27162d625d

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 :

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

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.
Reference in New Issue View Git Blame Copy Permalink
Description
Fork d'un projet HTML rudimentaire J'y présente l'intérer d'une publication sur Git.hub/lab ... sur les principes de l'Indie web
Readme 95 KiB
Languages
HTML 64.4%
CSS 35.6%