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

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

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

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

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

240
css git github github-pages html

8 ответов

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

343

если вы не хотите загружать архив, вы можете использовать Страницы GitHub чтобы сделать это.

  1. раскройте репозиторий на свою учетную запись.
  2. клонировать его локально на вашей машине
  3. создать gh-pages ветвь (если она уже существует, удалите ее и создайте новую на основе off 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
66

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

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

57

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

вам нужна ветвь GH-страниц:

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

как я получу эту ветку gh-pages?

легко. Просто создайте ветвь своего репозитория github под названием GH-branches. Укажите --сирота когда вы создаете эту ветку, так как вы на самом деле не хотите объединять эту ветку обратно в свою ветку 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

25

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

http://www.s3auth.com/

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

1

Я прочитал все комментарии и подумал, что github слишком сложно для обычного пользователя создавать страницы github, пока я не посетил страница темы github где четко указано, что есть раздел "страницы Github" на странице настроек соответствующего РЕПО, где вы можете выбрать опцию "Использовать главную ветвь для страниц GitHub.- а волла!!...проверка этого конкретного РЕПО на https://username.github.io/reponame

скриншот поддержите мой ответ

1

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

  1. добавить расширение "изменить параметры типа контента" в браузере chrome.
  2. открыть " chrome-расширение:/ / jnfofbopfpaoeojgieggflbpcblhfhka / options.html " url в браузере.
  3. Добавить правило для RAW файл url. Например:
    • фильтр URL: https:///raw/master//fileName - ... HTML-код
    • оригинальный тип: text / plain
    • Тип Замена : text / html
  4. откройте файловый браузер, который вы добавили url в правиле (на Шаге 3).
0

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

скрипт, подобный этому: https://gist.github.com/vaniakosmos/83ba165b288af32cf85e2cac8f02ce6d

0