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

Question

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

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

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

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

Answer 1

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

Answer 2

Если вы не хотите загружать архив, вы можете использовать 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

Answer 3

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

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

Answer 4

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

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

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

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

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

А как насчет всего другого ганка в моем репо, как он к нему подходит?

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

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

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

git push -u origin gh-pages

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

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

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

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

Answer 5

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

Answer 6

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

Сценарий, подобный этому:https://gist.github.com/vanyakosmos/83ba165b288af32cf85e2cac8f02ce6d

Answer 7

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

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

Answer 8

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

http://www.s3auth.com/

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

Answer 9

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

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

Answer 10

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

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