Comment voir une page html sur github comme une page html rendue normale pour voir un aperçu dans le navigateur, sans téléchargement?
Sur http://github.com développeur conservez les fichiers html, csss, javascript et images du projet. Comment puis-je voir la sortie HTML dans le navigateur?
par exemple this https://github.com/necolas/css3-social-signin-buttons/blob/master/index.html
quand j'ouvre ceci il ne montre pas le HTML rendu du code de l'auteur. il montre la page comme un code source.
Est-il possible de voir le rendu HTML directement? sinon j'ai toujours besoin de télécharger tout le zipt juste pour voir le résultat
Le moyen le plus pratique de prévisualiser les fichiers HTML sur GitHub consiste à aller à http://htmlpreview.github.com/ ou à simplement l'ajouter à l'URL d'origine, par exemple: http: // htmlpreview.github.com/?https://github.com/bartaz/impress.js/blob/master/index.html
Si vous ne voulez pas télécharger une archive, vous pouvez utiliser GitHub Pages pour le rendre.
- Ajoutez le référentiel à votre compte.
- Clonez-le localement sur votre machine
- Créez une branche
gh-pages(si elle existe déjà, supprimez-la et créez-en une nouvelle basée surmaster). - Repoussez la branche vers GitHub.
- Voir les pages sur
http://username.github.io/repo`
Dans du code:
git clone [email protected]:username/repo.git
cd repo
git branch gh-pages
# Might need to do this first: git branch -D gh-pages
git Push -u Origin gh-pages # Push the new branch back to github
Go to http://username.github.io/repo
Vous pouvez utiliser RawGit :
https://rawgit.com/necolas/css3-social-signin-buttons/master/index.html
Cela fonctionne mieux (au moment d'écrire ces lignes) que http://htmlpreview.github.com/ , servant des fichiers avec les en-têtes Content-Type appropriés. De plus, il fournit également une URL CDN à utiliser en production.
C'est très facile à faire avec pages github , c'est un peu bizarre la première fois que vous le faites. Un peu comme la première fois que vous avez dû jongler avec 3 chatons tout en apprenant à tricoter. (OK, ce n'est pas si mal que ça)
Vous avez besoin d'une branche gh-pages:
Fondamentalement, github.com recherche une branche gh du référentiel. Il servira toutes les pages HTML trouvées ici en tant que HTML normal directement au navigateur.
Comment puis-je obtenir cette branche gh-pages?
Facile. Créez simplement une branche de votre dépôt Github appelée gh-branches. Spécifiez - Orphan lorsque vous créez cette branche, car vous ne souhaitez pas réellement fusionner cette branche dans votre branche github, vous voulez simplement une branche qui contient vos ressources HTML.
$ git checkout --Orphan gh-pages
Qu'en est-il de tous les autres gunk de mon dépôt, comment cela s'inscrit-il?
Non, vous pouvez simplement le supprimer. Et vous pouvez le faire maintenant, car vous y avez prêté attention et créé une branche orpheline qui ne peut pas être fusionnée dans votre branche principale et supprimer tout votre code.
J'ai créé la branche, maintenant?
Vous devez installer cette branche sur github.com, afin que leur automatisation puisse démarrer et commencer à héberger ces pages pour vous.
git Push -u Origin gh-pages
Mais .. Mon HTML n'est toujours pas servi!
Cela prend quelques minutes à github pour indexer ces branches et lancer l’infrastructure requise pour servir le contenu. Jusqu'à 10 minutes selon github.
Les étapes décrites par github.com
https://help.github.com/articles/creating-project-pages-manually
J'ai lu tous les commentaires et j'ai pensé que GitHub rendait la création de pages GitHub trop difficile pour un utilisateur normal tant que je ne l'avais pas visité page de thème GitHub où il est clairement mentionné qu'il existe une section de "Pages GitHub" dans la page de paramètres du dépôt concerné où vous pouvez choisir l'option "utiliser la branche principale pour GitHub Pages". et voilà !! ... vérifiez ce dépôt particulier sur https://username.github.io/reponame
Cette solution concerne uniquement le navigateur chrome. Je ne suis pas sûr de l'autre navigateur.
- Ajoutez l'extension "Modify Content-Type Options" dans le navigateur chrome.
- Ouvrez l'URL "chrome-extension: //jnfofbopfpaoeojgieggflbpcblhfhka/options.html" dans le navigateur.
- Ajoutez la règle pour l'URL du fichier brut. Par exemple:
- Filtre d'URL: https: ///raw/master//fileName.html
- Type d'origine: text/plain
- Type de remplacement: text/html
- Ouvrez le navigateur de fichiers auquel vous avez ajouté l'URL dans la règle (à l'étape 3).
De plus, si vous utilisez Tampermonkey, vous pouvez ajouter un script qui ajoutera le bouton preview with http://htmlpreview.github.com/ au menu des actions à côté des boutons 'raw', 'blame' et 'history'.
Un script comme celui-ci: https://Gist.github.com/vanyakosmos/83ba165b288af32cf85e2cac8f02ce6d
Ce n'est pas une réponse directe, mais je pense que c'est une alternative plutôt douce.
Il vous permet d’héberger vos pages derrière l’authentification de base. Idéal pour des choses comme les documents api dans votre dépôt privé github. il suffit d’ajouter un s3 dans le cadre de votre construction d’API.
Vous pouvez prévisualiser le code HTML en utilisant l’extension Chrome suivante - Run Selected HTML, assez simple à utiliser.
Si vous voulez select all the code en mode lecture de GitHub, c’est aussi assez simple: déplacez tout d’abord le curseur de la souris sur le crochet de début de <html> en haut, puis maintenez la touche enfoncée. Shift et déplacez ensuite le curseur de la parenthèse finale de </html> en bas.
Exécuter le code HTML sélectionné - Chrome Web store
https://chrome.google.com/webstore/detail/run-selected-html/eefflcdphpehljcadbmkdpopmbamfefl/
Étape 1 : en mode lecture, sélectionnez tout le corps du code html.
Étape 2 : Cliquez avec le bouton droit de la souris sur "Exécuter le code HTML sélectionné" pour afficher le résultat dans un nouvel onglet.
Le résultat courant: 
Vous pouvez simplement activer les pages Github. ^ _ ^
Cliquez sur "Paramètres", puis allez dans "Pages GitHub" et cliquez sur le menu déroulant sous "Source" et choisissez la branche que vous souhaitez rendre publique (où le fichier html principal est situé) aaaand vualaa. ^ _ ^