243 lines
7.4 KiB
Markdown
243 lines
7.4 KiB
Markdown
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
|
|
|
|
Ajouter un fichier (ou tous *)
|
|
> git add ./README.md
|
|
> git add *
|
|
|
|
Etat des fichiers :
|
|
> git status
|
|
|
|
voir les branches ( locales + distantes )
|
|
> git branch --all
|
|
|
|
voir l'historique
|
|
> git log --pretty=format:"%h %s" --graph
|
|
|
|
|
|
|
|
---
|
|
|
|
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
|