Accueil > Skills > Publiez votre premier site web en moins de 10 minutes
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.
Sommaire
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.
Connectez l'application à votre compte Github fraîchement créé en précisant votre nouveau login et password.
Pour la config Git, précisez absolument l'email que vous avez utilisé lors de la création de votre compte GitHub afin de permettre au service de bien associer votre travail à votre compte.
L'application cherchera des projets existants sur votre machine. Vous pouvez passer cette étape si vous le souhaitez.
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.jpg24.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.
À 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>
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.jpg86.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.jpg69.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.jpg47.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 !
