Jak wyświetlić stronę HTML w Github jako normalną renderowaną stronę HTML, aby zobaczyć podgląd w przeglądarce, bez pobierania?

Na stronie http://github.com deweloper zachowuje pliki HTML, CSS, JavaScript i pliki projektu. Jak mogę zobaczyć wynik HTML w przeglądarce?

Na przykład to: https://github.com/necolas/css3-social-signin-buttons/blob/master/index.html

Po otwarciu nie wyświetla renderowanego kodu HTML autora. Pokazuje stronę jako kod źródłowy.

Czy można to zobaczyć bezpośrednio jako renderowany HTML? W przeciwnym razie zawsze muszę pobrać cały plik ZIP, aby zobaczyć wynik.

Najwygodniejszym sposobem podglądu plików HTML na GitHub jest przejście do https://htmlpreview.github.io/ lub po prostu dodanie go do oryginalnego adresu URL, tj .: https://htmlpreview.github.io/?https:// github.com/bartaz/impress.js/blob/master/index.html

Jeśli nie chcesz pobierać archiwum, możesz użyć GitHub Pages, aby to wyrenderować.

1. Rozwidlaj repozytorium na swoje konto.
2. Klonuj lokalnie na swoim komputerze
3. Utwórz gh-pagesgałąź (jeśli już istnieje, usuń ją i utwórz nową na podstawie master).
4. Przekaż gałąź z powrotem do GitHub.
5. Zobacz strony w `http://username.github.io/repo

W kodzie:

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

Możesz użyć RawGit :
https://rawgit.com/necolas/css3-social-signin-buttons/master/index.html

Działa lepiej (w momencie pisania tego tekstu) niż http://htmlpreview.github.com/ , obsługując pliki z odpowiednimi nagłówkami Content-Type. Dodatkowo zapewnia również adres URL CDN do użytku w produkcji.

Jest to naprawdę łatwe do zrobienia ze stronami github , jest to trochę dziwne za pierwszym razem, gdy to robisz. Tak jakbyś pierwszy raz musiał żonglować 3 kociętami podczas nauki dziania. (OK, nie jest tak źle)

Potrzebujesz oddziału gh-pages:

Zasadniczo github.com szuka gałęzi repozytorium gh-pages . Będzie obsługiwał wszystkie znalezione tu strony HTML jako zwykłe pliki HTML bezpośrednio w przeglądarce.

Jak mogę uzyskać tę gałąź GH-Pages?

Łatwy. Wystarczy utworzyć gałąź swojego repozytorium github o nazwie gh-pages. Określ, --orphankiedy tworzysz tę gałąź, ponieważ tak naprawdę nie chcesz scalać tej gałęzi z powrotem z gałęzią github, potrzebujesz tylko gałęzi zawierającej zasoby HTML.

$ git checkout --orphan gh-pages

A co z pozostałymi śmieciami w moim repozytorium, jak to się do tego nadaje?

Nie, możesz po prostu go usunąć. I jest to bezpieczne teraz, ponieważ zwracałeś uwagę i utworzyłeś sierocą gałąź, której nie można ponownie połączyć z główną gałęzią i usunąć cały kod.

Stworzyłem oddział, co teraz?

Musisz przenieść tę gałąź na github.com, aby ich automatyzacja mogła uruchomić się i zacząć hostować te strony dla Ciebie.

git push -u origin gh-pages

Ale .. Mój HTML wciąż nie jest obsługiwany!

Indeksowanie tych gałęzi i uruchamianie wymaganej infrastruktury w celu obsługi treści zajmuje kilka minut. Do 10 minut zgodnie z github.

Kroki określone przez github.com

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

Przeczytałem wszystkie komentarze i pomyślałem, że GitHub utrudnia zwykłemu użytkownikowi tworzenie stron GitHub, dopóki nie odwiedziłem strony motywu GitHub, gdzie wyraźnie wspomniano, że w sekcji ustawień danego repozytorium znajduje się sekcja „Strony GitHub”. wybierz opcję „użyj gałęzi głównej dla stron GitHub”. i voilà !! ... sprawdź to repozytorium na https://username.github.io/reponame

Ponadto, jeśli używasz Tampermonkey, możesz dodać skrypt, który doda preview with http://htmlpreview.github.com/przycisk do menu akcji obok przycisków „surowe”, „obwinianie” i „historia”.

Skrypt taki jak ten: https://gist.github.com/vanyakosmos/83ba165b288af32cf85e2cac8f02ce6d

Możesz wyświetlić podgląd kodu HTML, używając następującego rozszerzenia Chrome - Run Selected HTMLdość prosty w użyciu.

Jeśli chcesz select all the codew trybie odczytu GitHub, jest to również dość proste, najpierw przesuń kursor myszy do początkowego nawiasu <html>u góry, następnie przytrzymaj Shiftklawisz, a następnie przesuń kursor do końcowego nawiasu </html>u dołu.

Uruchom wybrany HTML - Chrome Web Store

https://chrome.google.com/webstore/detail/run-selected-html/eefflcdphpehljcadbmkdpopmbamfefl/

Krok 1 : W trybie odczytu wybierz całą treść kodu HTML.

Krok 2 : Kliknij prawym przyciskiem myszy „Uruchom wybrany HTML”, a następnie zobaczysz renderowany wynik w nowej karcie.

Wynik bieżący:

Teraz jest to nieaktualna odpowiedź (ponieważ rozszerzenie „Modyfikuj opcje typu zawartości” nie działa zgodnie z oczekiwaniami).

To rozwiązanie tylko dla przeglądarki Chrome. Nie jestem pewien co do innej przeglądarki.

1. Dodaj rozszerzenie „Modify Content-Type Options” w przeglądarce Chrome.
2. Otwórz „chrome-extension: //jnfofbopfpaoeojgieggflbpcblhfhka/options.html” w przeglądarce.
3. Dodaj regułę dla surowego adresu URL pliku. Na przykład:
   • Filtr adresów URL: https: ///raw/master//fileName.html
   • Typ oryginału: tekstowy / zwykły
   • Typ wymiany: text / html
4. Otwórz przeglądarkę plików, do której reguła dodałeś adres URL (w kroku 3).

To nie jest bezpośrednia odpowiedź, ale myślę, że to całkiem słodka alternatywa.

http://www.s3auth.com/

Pozwala hostować strony za podstawowym uwierzytelnianiem. Idealne do rzeczy takich jak dokumenty API w prywatnym repozytorium github. po prostu s3 umieścić jako część kompilacji interfejsu API.

Możesz po prostu włączyć strony Github. ^ _ ^

Kliknij „Ustawienia”, a następnie „Strony GitHub” i kliknij menu rozwijane w „Źródle” i wybierz gałąź, którą chcesz upublicznić (gdzie znajduje się główny plik HTML) aaa i vualaa. ^ _ ^