Choisissez une ville

Publiez votre premier site web en moins de 10 minutes

Vous souhaitez tester une idée ou mettre votre portfolio en ligne ? Alors ce tuto sur Github Pages est fait pour vous. En seulement quelques clics, vous pourrez héberger gratuitement votre premier site statique intégralement customisable et le partager ensuite au gré de vos envies.

Publiez votre premier site web en moins de 10 minutes
Partager l'article
Vous souhaitez tester une idée ou mettre votre portfolio en ligne ? Alors ce tuto sur Github Pages est fait pour vous. En seulement quelques clics, vous pourrez héberger gratuitement votre premier site statique intégralement customisable et le partager ensuite au gré de vos envies.

Votre compte Github

Si vous ne connaissez pas encore Github, le service de collaboration entre développeurs, nous vous recommandons de suivre le tuto vidéo sur Git et Github de @ssaunier, CTO du Wagon, et de vous créer un compte gratuitement sur GitHub (obligatoire pour la suite).
2014-11-19-tuto-gh-pages-1.jpg 61.52 KB

Le Setup : GitHub Mac/Windows

Téléchargez ensuite GitHub Mac ou GitHub Windows et configurez là en suivant les 3 étapes :

Votre premier projet

Créez un dossier sur votre machine github-pages-exemple (le nom reste à votre convenance) et glissez-le sur la fenêtre de l'application GitHub.
2014-11-19-tuto-gh-pages-2.jpg 24.28 KB
Un popup d'avertissement vous informera que ce projet n'est pas encore un repository (comprenez un projet dans le jargon Github) connu de votre compte et vous demandera si vous souhaitez qu'il soit considéré en tant que tel. Cliquez sur Créer et Ajouter.

Important Créez une nouvelle branche gh-pages sur votre projet en cliquant sur l'icône dédiée en haut à gauche.
2014-11-19-tuto-gh-pages-3.jpg 37.49 KB

À l'intérieur de votre dossier local, et grâce à votre éditeur de texte préféré (ex: Sublime Text), créez une page index.html et placez-y le code de Boostrap Boilerplate. Ce premier markup HTML initialise le framework CSS Bootstrap ce qui permet de construire très simplement votre landing page. Ajoutez également un peu de texte sous la balise <body>.

Exemple :

<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-offset-4">
      <h1>Vous voilà prêt à conquérir les internets !"</h1>
    </div>
  </div>
</div>
2014-11-19-tuto-gh-pages-4.jpg 92.92 KB
De retour sur votre application GitHub vous observerez quelques changements. La liste des fichiers présents dans votre repository est apparue à gauche alors que le code associé à chacun d'entre eux vous est présenté sur la droite.
2014-11-19-tuto-gh-pages-5.jpg 86.35 KB

Prenez une photographie de votre travail en nommant et en enregistrant votre premier commit.

Important: A chaque fois que vous effectuerez cette action, une sorte de checkpoint sera créé. Par la suite, GitHub suivra l'évolution de votre code de manière incrémentale en vous signalant via un code couleur (vert/rouge) les lignes modifiées et/ou ajoutées. À vous de commiter régulièrement dès que vous installerez une nouvelle feature !
2014-11-19-tuto-gh-pages-6.jpg 69.94 KB
Pour le moment vos changements sont uniquement visibles en local. Afin de partager vos créations sur le web, cliquez sur le bouton Synchroniser en haut à droite. Une fenêtre apparaîtra afin de vous inviter à nommer votre projet. Par défaut, celui-ci prend le nom du dossier. Cliquez ensuite sur Push pour envoyer et stocker vos fichiers en ligne sur GitHub.
2014-11-19-tuto-gh-pages-7.jpg 47.38 KB
Rendez-vous ensuite sur : http://github.com/VOTRE_NOM_GITHUB/VOTRE_PROJET afin de vous assurez que l'ensemble de vos fichiers soient bien présents.

Pour visualiser votre site, rendez-vous sur http://VOTRE_NOM_GITHUB.github.io/VOTRE_PROJET

Vous voilà désormais à la tête d'un site en ligne !

Pour donner un peu plus de cachet à tout cela et rajouter de nouveaux éléments, n'hésitez pas à consulter le tuto de Boris, CEO du Wagon, The one hour landing page afin d'attaquer HTML, CSS et Bootstrap en 2 heures de temps.

Partagez vos créations dans les commentaires ci-dessous ou via Twitter en mentionnant @LeWagonParis !
Vous souhaitez en savoir plus sur la formation de 9 semaines du Wagon ?
Téléchargez le syllabus
Continuer la lecture
Learn to code

Codez votre premier site web - HTML & CSS

Et si vous profitiez de votre weekend pour coder votre première page web ? On a décidé de vous offrir la bonne vidéo pour sauter le pas. En moins de 2 heures vous aurez attaqué HTML, CSS et Bootstrap.

Graduate stories

Clément, enseignant en économie devenu développeur web

C’est souvent un peu compliqué pour un futur étudiant de se rendre compte de l’impact du Wagon et de ce que le programme peut vraiment lui apporter. Est-ce qu’on sort du bootcamp avec de véritables compétences même quand on a jamais codé ? Est-ce que je pourrai mettre sur mon profil LinkedIn que je suis développeur ? Réponse juste ici.

Graduate stories

Se former pour rester connectée

Après plusieurs années dans le marketing numérique, Adèle décide de se former au sein du wagon pour avoir une compréhension plus poussée du web. Son principal objectif était d'être mieux armée pour faire passer sa carrière dans une nouvelle dimension.

Vous souhaitez rejoindre la meilleure formation Développeur Web ?

Nous sommes dans 39 villes dans le monde.