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

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

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

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

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

Ответы

Ответ 2

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

Ответ 3

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

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

Ответ 4

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

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

В основном github.com ищет ветку ga-страниц хранилища. Он будет обслуживать все найденные здесь 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

Ответ 5

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

screenshot to support my answer

Ответ 6

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

http://www.s3auth.com/

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

Ответ 7

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

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

Ответ 8

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

Ответ 9

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

Run Selected HTML

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

Ответ 10

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

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