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.

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

Tout ce que vous avez toujours voulu savoir sur les APIs

Les APIs sont légions sur le web et offrent simplement et rapidement la possibilité de démultiplier la force de vos applications. De la définition de l'acronyme en passant par la notion de webhook et quelques exemples d'utilisations, Sebastien Saunier, CTO du Wagon, vous invite à découvrir les bases de ce nouvel enjeu stratégique pour votre projet.

Graduate stories

Une reconversion professionnelle dans la tech: le bootcamp du Wagon

Axelle a longtemps travaillé comme infirmière en France avant de déménager à Montréal. Nouvelle ville, nouvelle expérience, elle en a profité pour changer de carrière. Dans cet article, publié par Urelles, elle nous raconte comment s'est passé cette reconversion.

Graduate stories

Développeur freelance & musicien : Louis navigue entre ses deux passions

Musicien professionnel, arrangeur et réalisateur artistique passionné depuis plusieurs années, Louis suit la formation du Wagon pendant l'été 2018 pour apprendre à coder. Un an plus tard, il sillonne les routes en tournée et travaille en parallèle sur ses projets en tant que développeur freelance.

Vous souhaitez apprendre à coder en 9 semaines ?

Nous sommes dans 35 villes dans le monde.