bonnebulle/plain-html-redo
1
0
Fork 0
mirror of https://gitlab.com/bonnebulle/plain-html-redo.git synced 2025-12-06 10:08:45 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity
Files
aebc1708cfd6a4b5349c4319c7c7d7ce048d674c
plain-html-redo/README.md
vincent_b aebc1708cf TUTO Titles, cl
2024-11-19 21:01:23 +01:00

386 lines
10 KiB
Markdown
Raw Blame History

# Accéder au projet :
- https://USERNAME.gitlab.io/PROJECT_NAME
=>
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 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 ....
- 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
- 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
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'
Visualiser les modifications :
> git log -p -2
> git log --pretty=oneline
voir l'historique
> git log --pretty=format:"%h %s" --graph
# 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 )
# 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
---
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/.
---
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
**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)
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
## 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
Reference in New Issue View Git Blame Copy Permalink