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

356

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

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

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

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

Джитендра Вьяс
источник
1
По состоянию на июнь 2019 года, raw.githack.com представляется наиболее удобным решением (см. ответы на вопрос, указанный выше )
leopold.talirz,

Ответы:

456

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

niutech
источник
@Denis: Какой браузер и какой URL вы используете? На данный момент он поддерживает только браузеры Webkit и Gecko.
niutech
32
Обратите внимание, что это работает только для публичных репозиториев. Личные сообщат об ошибкеError: Cannot load file
Эрик Траутман
37
htmlpreview.github.com частично терпит неудачу при рендеринге JavaScript и CSS. Альтернативный rawgit.com работает лучше, обслуживая файлы с соответствующими заголовками Content-Type.
Жюльен Карсик
1
Отличное решение, спасибо! Я добавил ссылки на свои R Notebooks с префиксом в файл README.md, и он очень хорошо отображает мой файл nb.html. Вот страница на тот случай, если кто-нибудь захочет посмотреть, как это работает: github.com/sargdavid/snippets.cvi и htmlpreview.github.io/?https://github.com/sargdavid/…
Давид Саргсян
1
Похоже, что это решение перестает работать в последние дни декабря 2018 года и до сих пор, однако у нас все еще есть этот stackoverflow.com/a/8446391/860099
Камиль Килчевски
85

Если вы не хотите загружать архив, вы можете использовать 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
Росс
источник
Теперь я разработал проект, как я могу скопировать его на страницы GitHub.
Джитендра Вьяс
1
Обновил мой ответ с процессом.
Росс
3
Это хорошо задокументировано здесь help.github.com/articles/creating-project-pages-manually
Лейф Грюнвольдт
2
Зачем сначала создавать мастер и клонировать его («будьте осторожны» при создании проекта-страниц-вручную)? Можно ли не checkout --orphan gh-pages только толкать это, не связываясь с мастером вообще?
Денис
4
Страницы перемещены на github.io, а не на github.com.
Дамжан Павлика
64

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

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

Жюльен Карсик
источник
2
Я подтверждаю, что это работает лучше, чем htmlpreview. По крайней мере, он показывает мою анимацию WebGL.
Кирилл Дюшон-Дорис
1
На самом деле он работает быстрее, а с Bokeh ( например ) он показывает некоторые взаимодействия (например, всплывающие подсказки), которые не работают с htmlpreview.
jadianes
Как и htmlpreview, не работает с частными репозиториями. Git делает URL-адреса для таких же общедоступных URL-адресов, добавляя? Token = <hash>, но эти инструменты должны понимать это и передавать его в GH вместе с остальными.
Закмк
2
Это из FAQ для rawgit: Могу ли я использовать URL разработки rawgit.com на рабочем сайте или в общедоступном примере кода? Нет. Используйте URL-адреса rawgit.com только для тестирования с низким трафиком или для демонстрации временных демонстраций нескольким людям во время разработки. Пожалуйста, используйте cdn.rawgit.com для всего, что может привести к интенсивному трафику или что люди могут скопировать и вставить в свой собственный код. ... Есть больше доступных объяснений
BarryPye
3
Могу подтвердить: Rawgit будет закрыт с октября 2019 года.
samcozmid
34

Это действительно легко сделать со страницами 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

hendrikswan
источник
3
Работает отлично. Как мерзавец, я забыл $ git commit -m 'init'между твоих строк.
systemaddict
1
Какой будет URL?
Корай Тугай
хм ... не уверен, что это намного проще, чем жонглирование котят ...
dreftymac
14

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

скриншот в поддержку моего ответа

Мукеш
источник
1

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

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

Aiven
источник
1

Вы можете просмотреть 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», и вы увидите результат рендеринга в новой вкладке.

Запустить выбранный HTML

Результат выполнения: введите описание изображения здесь

Браво Йенг
источник
1

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

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

  1. Добавьте расширение «Изменить параметры типа содержимого» в браузере Chrome.
  2. Откройте ссылку "chrome-extension: //jnfofbopfpaoeojgieggflbpcblhfhka/options.html" в браузере.
  3. Добавьте правило для необработанного файла. Например:
    • Фильтр URL: https: ///raw/master//fileName.html
    • Тип оригинала: текст / обычный
    • Тип замены: текст / HTML
  4. Откройте браузер файлов, в который вы добавили URL в правиле (на шаге 3).
Виджай
источник
Аскер, вероятно, хочет, чтобы все увидели визуализированную страницу.
Ондра Жижка
@zakmck Браузер отправляет заголовок «text / plain», но вам нужно отправить «text / html». Я не могу отправить свои данные третьей стороне (" htmlpreview.github.com "), поэтому я использую описанные выше шаги. Вы также можете использовать регулярное выражение для URL в приведенных выше шагах.
Виджай
Я искал именно это. Я хочу видеть страницу, и как на git, так и на bitbucket.
Эдуардо Рейс
Не работал для меня
Эдуардо Рейс
@EduardoReis Сегодня я проверил на своей машине, она не работает сейчас. Возможно, внесены некоторые изменения в расширение «Изменить параметры типа контента». Если я найду другое расширение, я опубликую здесь. Благодарю вас.
Виджай
0

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

http://www.s3auth.com/

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

rynop
источник
Выглядит как сторонний сервис, который не имеет ничего общего с git. Где инструкция как использовать это в контексте этого вопроса?
Сталинко
-3

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

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

jester96
источник