Как увидеть html-страницу на github как обычную рендеринг html-страницы, чтобы увидеть предварительный просмотр в браузере, без загрузки?

263

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

например, https://github.com/necolas/css3-social-signin-buttons/blob/master/index.html

когда я открываю это, он не отображает отображаемый html кода автора. он показывает страницу как исходный код.

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

Теги:
github
github-pages

9 ответов

392
Лучший ответ

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

Поделиться
  • 0
    @Denis: Какой браузер и какой URL вы используете? На данный момент он поддерживает только браузеры Webkit и Gecko.
  • 0
    @Denis: Извините, Firefox 3.6 слишком стар, чтобы его поддерживать. Тем не менее, вы можете открыть Firebug при любой попытке отладить его, если вы уверены.
Показать ещё 21 комментарий
68

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

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

В коде:

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
Поделиться
  • 0
    Теперь я разработал проект, как я могу скопировать его на страницы GitHub.
  • 0
    Обновил мой ответ с процессом.
Показать ещё 3 комментария
60

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

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

Поделиться
  • 2
    Я подтверждаю, что это работает лучше, чем htmlpreview. По крайней мере, он показывает мою анимацию WebGL.
  • 1
    На самом деле он работает быстрее, а с Bokeh ( например ) он показывает некоторые взаимодействия (например, всплывающие подсказки), которые не работают с htmlpreview.
Показать ещё 6 комментариев
24

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

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

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

Как получить эту ветвь gh-страниц?

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

$ git checkout --orphan gh-pages

Как насчет всего остального gunk в моем репо, как это подходит?

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

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

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

git push -u origin gh-pages

Но.. Мой HTML по-прежнему не обслуживается!

Для github требуется несколько минут, чтобы индексировать эти ветки и запускать необходимую инфраструктуру для обслуживания содержимого. До 10 минут согласно github.

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

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

Поделиться
  • 1
    Работает отлично. Как git noob, я забыл, что $ git commit -m 'init' между вашими строками.
  • 1
    Какой будет URL?
4

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

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

Поделиться
1

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

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

Поделиться
1

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

http://www.s3auth.com/

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

Поделиться
0

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

Изображение 2677

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

Поделиться
0

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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню