Как увидеть HTML-страницу на Github как обычную визуализированную HTML-страницу для просмотра в браузере без загрузки?

На http://github.com разработчик хранит HTML, CSS, JavaScript и файлы изображений проекта. Как я могу увидеть вывод HTML в браузере?

Например это: https://github.com/necolas/css3-social-signin-buttons/blob/master/index.html

Когда я открываю это, он не показывает отрендеренный HTML код автора. Он показывает страницу в виде исходного кода.

Можно ли увидеть это как визуализированный HTML напрямую? В противном случае мне всегда нужно скачать весь ZIP, чтобы увидеть результат.

Самый удобный способ предварительного просмотра HTML-файлов на GitHub - перейти на https://htmlpreview.github.io/ или просто добавить его к исходному URL-адресу, а именно: https://htmlpreview.github.io/?https:// github.com/bartaz/impress.js/blob/master/index.html

Если вы не хотите загружать архив, вы можете использовать GitHub Pages для этого.

1. Поместите репозиторий в свой аккаунт.
2. Клонируйте его локально на своей машине
3. Создайте gh-pagesветку (если она уже существует, удалите ее и создайте новую на основе master).
4. Верните ветку обратно на GitHub.
5. Посмотреть страницы на `http://username.github.io/repo

В коде:

git clone git@github.com: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

Вы можете использовать RawGit :
https://rawgit.com/necolas/css3-social-signin-buttons/master/index.html

Он работает лучше (на момент написания этой статьи), чем http://htmlpreview.github.com/ , обслуживая файлы с соответствующими заголовками Content-Type. Кроме того, он также предоставляет CDN URL для использования в производстве.

Это действительно легко сделать со страницами GitHub , это немного странно, когда вы делаете это в первый раз. Сорта, как в первый раз, когда вы научились вязать 3 котенка. (ОК, не все так плохо)

Вам нужна ветка gh-pages:

В основном github.com ищет ветку gh-pages в хранилище. Он будет обслуживать все HTML-страницы, найденные здесь, как обычный HTML-код прямо в браузере.

Как мне получить эту ветку gh-pages?

Легко. Просто создайте ветку вашего репозитория github gh-pages. Укажите, --orphanкогда вы создаете эту ветку, так как вы на самом деле не хотите сливать эту ветку обратно в ветку github, вам просто нужна ветка, которая содержит ваши HTML-ресурсы.

$ git checkout --orphan gh-pages

Как насчет всех других грязных в моем репо, как это вписывается в это?

Нет, вы можете просто удалить его. И теперь это безопасно, потому что вы обратили внимание и создали потерянную ветку, которую нельзя объединить с вашей основной веткой и удалить весь ваш код.

Я создал ветку, что теперь?

Вам нужно перенести эту ветку на github.com, чтобы их автоматизация могла запустить и начать размещать эти страницы для вас.

git push -u origin gh-pages

Но .. Мой HTML все еще не обслуживается!

Github требуется несколько минут для индексации этих веток и запуска необходимой инфраструктуры для обслуживания контента. До 10 минут в зависимости от GitHub.

Шаги, изложенные github.com

https://help.github.com/articles/creating-project-pages-manually

Я прочитал все комментарии и подумал, что GitHub мешал обычному пользователю создавать страницы GitHub, пока я не зашел на страницу тем GitHub, где четко упоминалось, что в разделе настроек соответствующего репозитория есть раздел «Страницы GitHub», где вы можете выберите опцию «использовать главную ветку для страниц GitHub». и вуаля !! ... оформить заказ на данный репозиторий на https://username.github.io/reponame

Кроме того, если вы используете Tampermonkey, вы можете добавить скрипт, который будет добавлять preview with http://htmlpreview.github.com/кнопки в меню действий рядом с кнопками «raw», «blame» и «history».

Сценарий как этот: https://gist.github.com/vanyakosmos/83ba165b288af32cf85e2cac8f02ce6d

Вы можете просмотреть HTML-код, используя следующее расширение Chrome -Run Selected HTML , довольно проста в использовании.

Если вы хотите перейти select all the codeв режим чтения GitHub, это также довольно просто: сначала переместите курсор мыши на начальную скобку <html>вверху, затем удерживайте нажатой Shiftклавишу, а затем переместите курсор на конечную скобку </html>внизу.

Запустить выбранный HTML - Интернет-магазин Chrome

https://chrome.google.com/webstore/detail/run-selected-html/eefflcdphpehljcadbmkdpopmbamfefl/

Шаг 1. В режиме чтения выберите все тело HTML-кода.

Шаг 2 : Щелкните правой кнопкой мыши «Run Seleted HTML», и вы увидите результат рендеринга в новой вкладке.

Результат выполнения:

Теперь, это устаревший ответ (потому что расширение «Изменить параметры типа контента» не работает должным образом.).

Это решение только для браузера Chrome. Я не уверен насчет другого браузера.

1. Добавьте расширение «Изменить параметры типа содержимого» в браузере Chrome.
2. Откройте ссылку "chrome-extension: //jnfofbopfpaoeojgieggflbpcblhfhka/options.html" в браузере.
3. Добавьте правило для необработанного файла. Например:
   • Фильтр URL: https: ///raw/master//fileName.html
   • Тип оригинала: текст / обычный
   • Тип замены: текст / HTML
4. Откройте браузер файлов, в который вы добавили URL в правиле (на шаге 3).

Это не прямой ответ, но я думаю, что это довольно приятная альтернатива.

http://www.s3auth.com/

Это позволяет вам размещать свои страницы за базовой аутентификацией. Отлично подходит для таких вещей, как api docs в вашем личном репозитории github. просто объявите s3 как часть вашей сборки API.

Вы можете просто включить Github Pages. ^ _ ^

Нажмите «Настройки», затем перейдите на «GitHub Pages» и нажмите на выпадающий список под «Источник» и выберите ветку, которую вы хотите опубликовать (где находится основной html-файл) aaa и vualaa. ^ _ ^