Démarre Bootstrap

Une traduction du tutoriel de startbootstrap en français.

Démarrer

Ce site a été construit avec Bootstrap 4

et présente un traduction du tutoriel permettant d'héberger un site bootstrap sur Github. C'est idéal pour démarrer.

Il existe de nombreux outils pour construire des sites webs. Bootstrap est l'un d'eux.

Bootstrap est une collection d'outils utiles à la création du design de sites et d'applications web. C'est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi que des extensions JavaScript en option.
la page Wikipédia sur Bootstrap -|- le site officiel BOOTSTRAP

Avant de commencer

Prérequis technique : Dans ce guide, vous allez éditer le contenu du thème d'un site web!
Pour ce faire, vous allez avoir besoin de quelques connaissances en HTML.


Prérequis optionnel : Si vous souhaiter éditer le style du thème (couleur, police, etc.), vous aurez également besoin de connaissances en CSS. Ce n'est pas nécessaire si le thème que vous avez choisi vous convient.

Quelques Ressources gratuites sur codecademy

HTML (7 heures) :
https://www.codecademy.com/learn/learn-html
CSS (15 heures) :
https://www.codecademy.com/learn/learn-css
Créer un site Web (9 heures) :
https://www.codecademy.com/learn/make-a-website

Introduction

"Github Pages" est un super moyen pour obtenir un simple site web statique en ligne - specifiquement si vous utilisez un theme fourni par "Start Bootstrap"!
Il y a plein d'avantages à déposer son code en ligne sur Github, mais pour les besoins de ce tutoriel, le plus gros bonus est que vous allez pouvoir héberger un site web static gratuitement!
Prêt ? Allons-y !

Etape 1: Créer un compte sur Github

Commençons par le début, pour héberger un site web sur Github Pages, vous allez avoir besoin d'un compte Github si vous n'en avez pas déjà un.
Pour ce faire, rendez-vous à l'adresse https://github.com/ et créez un nouveau compte - c'est gratuit!

Etape 2: Téléchargez Github Desktop

La plupart des développeurs utilisent les lignes de commandes (push & pull) pour mettre à jour leurs fichiers sur Github, mais comme ce tutoriel est fait pour les débutants, nous allons utiliser un client graphique plus convivial que le terminal.
Github Desktop est également en téléchargement gratuit et est disponible à l'adresse https://desktop.github.com/.
Après le téléchargement et l'installation, ouvrez Github Desktop et connectez-vous en utilisant le compte Github que vous avez créé à l'étape 1.

Etape 3: Choisissez un thème

Maintenant que vous avez un compte Github, et Github Desktop installé, il est temps de choisir un thème !
Pour commencer, vous pouvez choisir parmi les thèmes Bootstrap à cette adresse https://startbootstrap.com/themes.
Lorsque vous avez trouvé le theme qui correspond à vos besoins, nous allons voir comment copier ce thème en "forkant" son dépôt.

Etape 4: Forkez votre thème

Etape 4a: Ouvrez le thème sur Github

Sur la page de vue d'ensemble du thème que vous avez choisis, cliquez sur le bouton "View on Github", qui se trouve juste en dessous des boutons "Free Download" & "Live Preview", dans la barre d'outils sur la droite - vous pouvez voir un exemple ici avec le thème "Resume / CV".

Etape 4b: Forkez-le

Une fois arrivé sur Github, vous allez devoir cliquer sur le bouton "Fork" tout en haut de l'écran. Ceci va créer une copie du dépôt du thème sur votre compte Github.
A ce stade, vous pouvez changer le nom de votre dépôt. Par exemple, si vous avez clôné le thème ‘startbootstrap-resume’, vous pouvez le renommer en `mon-cv`, si vous le souhaitez.
Cette opération s'effectue dans l'onglet "Settings" (Réglages) de votre dépôt nouvellement créé.

Etape 5: Clonez votre thème

Cloner un dépôt, signifie le rapatrier sur votre ordinateur.

Cloner un dépôt est facile sur Github. Une fois que vous avez forké le thème que vous avez choisi, allez sur la page d'accueil du dépôt et cliquez sur le bouton vert "Clone or Download", et choisissez "Open in Desktop" comme sur cette image.
Ceci devrait ouvrir votre application "Github Desktop", et vous proposer de cloner le dépôt dans un répertoire de votre PC.
Une fois que les fichiers sont sur votre machine locale, vous êtes en mesure de les éditer.

Etape 6: Modifiez votre thème

Pour tester votre thème en local, ouvrez le fichier "index.html" avec votre navigateur (Firefox, Chrome ou Internet Explorer).
Maintenant que votre thème fonctionne sur votre machine locale, il est temps de le modifier.
Ouvrez le fichier "index.html" avec un éditeur de texte tel que Notepad ++ et modifiez son contenu.
A ce stade, si vous débutez, limitez-vous aux fichiers HTML de votre thème.
Si vous souhaitez faire autre chose comme changer les couleurs du thème, vous aurez besoin de quelques connaissances CSS.
Lorsque vous avez terminé vos modifications, il est temps de les publier!

Etape 7: "Commitez" et "pushez" les fichiers modifiés

Etape 7a: Commit

Ouvrez à nouveau l'application "Github Desktop". Comme vous avez modifié certains fichiers localement, le programme détecte que ces fichiers ont changé. Il est temps de "pusher" (envoyer) ces changement à votre dépôt Github distant.
Entrez simplement un message de "commit" dans la boite de dialogue correspondante (en bas à gauche de l'application), et une description si vous le souhaitez, et ensuite, cliquez sur 'Commit to master'.

Etape 7b: Push

Mais les changements n'ont pas encore étés pushés vers Github!
Pour que cela soit fait, vous allez devoir cliquer sur 'Push Origin' en haut de l'écran de l'application.

Maintenant si vous retournez sur votre dépôt sur Github, vous allez voir que les changements sont bien remontés!
Allez voir sur votre dépôt et vérifiez que les changements ont bien été pris en compte.
Sur votre fork du dépôt, vous devriez voir apparaître le message de commit que vous avez saisi à l'étape 7a, avec un la date de changement sur les fichiers modifiés.

Etape 8: Fusionnez les fichiers modifiés dans la branche 'gh-pages'

Vos changements ont étés "commités" et "pushés" vers la branche "master" de votre dépôt, mais lorsque l'on utilise les 'Github pages', ce sont les fichiers qui sont présents dans la branche 'gh-pages' qui sont présentés.
Cela signifie que nous devons fusionner les fichiers modifiés depuis la branche 'master' vers la branche 'gh-pages'!

Etape 8a:

Fusionner votre branche 'master' vers votre branche 'gh-pages' nécessite quelques étapes.
D'abord, vous devez allez sur votre dépôt, assurez-vous que vous êtes bien positionné sur votre branche "master" et cliquez sur le bouton "New pull request"

Etape 8b:

Ensuite, comme nous avons "forké" le thème depuis un autre dépôt, nous devons être certains que le dépôt de base est bien notre dépôt et non celui d'origine (Start Bootstrap).
Pour le modifier, changez le dépôt de base dans le menu déroulant et choisissez le dépôt "votre_nom_utilisateur_github/le_nom_de_votre_depot" (comme choisi à l'étape 4b).

Lorsque vous avez réglé le dépôt de base sur votre propre compte, vous allez devoir indiquer la branche de base pour cette "pull request".
Dans le menu déroulant, assurez-vous que le dépôt "Base" est positionné sur 'gh-pages'. Ceci va comparer la branche 'master' avec la branche 'gh-pages'

Etape 8c:

A ce stade, vous devriez retrouver votre message de commit ainsi qu'un résumé des fichiers qui vont être fusionnés. Cliquez sur 'Create pull request'.

Etape 8d:

Enfin, vous devez cliquer sur 'Merge pull request' et ensuite sur 'Confirm merge' pour finaliser la fusion.

Si tout se passe bien, la branche 'gh-pages' est maintenant identique à la branche "master" et 'Github pages' doit afficher votre site web à l'adresse http://nom_de_votre_compte.github.io/nom_de_votre_depot.
Gardez à la l'esprit que la mise à jour peut prendre quelques minutes avant d'être réellement visible, c'est le temps que le serveur prenne en compte votre modification.
Laissez-lui un peu de temps, et assurez-vous que votre site web est accessible après quelques instants.

Détails additionnels

Si vous souhaitez mettre à jour votre site, répétez juste les étapes 6 à 8 de ce tutoriel.
Vous allez effectuer les changements localement et "pusher" les changements vers la branche 'master' de votre dépôt Github, puis de nouveau fusionner la branche 'master' dans la branche 'gh-pages'!

Si vous souhaitez un nom de domaine personnalisé pour votre site web, vous pouvez également le régler dans 'Github pages'. Vous aurez alors besoin d'acheter un nom de domaine chez un fournisseur et faire pointer ce domaine sur le serveur github. Github fournit de la doc à ce sujet.

C'est tout !

Maintenant vous avez un site web en ligne gratuitement ! Merci Github !

Et merci à vous d'avoir suivi ce tutoriel !

[rappel : traduction de How to Create and Launch a Website from Start to Finish]

Subscribe to receive updates!

Address

4923 Market Street, Orlando FL

Email

hello@yourdomain.com

Phone

+1 (555) 902-8832