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

355

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.

Jitendra Vyas
źródło
1
od czerwca 2019 r. raw.githack.com wydaje się być najwygodniejszym rozwiązaniem (patrz odpowiedzi na powyższe pytanie połączone )
leopold.talirz

Odpowiedzi:

455

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

niutech
źródło
@Denis: jakiej przeglądarki i jakiego adresu URL używasz? Na razie obsługuje tylko przeglądarki Webkit i Gecko.
niutech
32
Pamiętaj, że działa to tylko w przypadku publicznych repozytoriów. Prywatni dadzą komunikat o błędzieError: Cannot load file
Erik Trautman
37
Witryna htmlpreview.github.com częściowo nie wyświetla renderowania JavaScript i CSS. Alternatywne rawgit.com działa lepiej, obsługując pliki z odpowiednimi nagłówkami Content-Type.
Julien Carsique
1
Świetne rozwiązanie, dziękuję! Dodałem linki do moich R Notebooków z prefiksem do pliku README.md i bardzo dobrze renderuje mój plik nb.html. Oto strona na wypadek, gdyby ktoś chciał zobaczyć, jak to działa: github.com/sargdavid/snippets.cvi i htmlpreview.github.io/?https://github.com/sargdavid/…
Davit Sargsyan
1
Wygląda na to, że to rozwiązanie przestało działać w ostatnich dniach grudnia 2018 r., Ale do tej pory mamy ten stackoverflow.com/a/8446391/860099
Kamil Kiełczewski
85

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
Ross
źródło
Rozwidliłem teraz projekt, w jaki sposób mogę skopiować go na strony github.
Jitendra Vyas,
1
Zaktualizowałem moją odpowiedź o proces.
Ross,
3
Jest to dobrze udokumentowane tutaj help.github.com/articles/creating-project-pages-manually
Leif Gruenwoldt
2
Po co najpierw tworzyć wzorzec i klonować go („grać bezpiecznie” w ręcznym tworzeniu stron projektu)? Czy można nie checkout --orphan gh-pages tylko je popchnąć, bez w ogóle bałagania u mistrza?
Denis
4
Strony przeniesiono do github.io, a nie github.com.
Damjan Pavlica,
64

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.

Julien Carsique
źródło
2
Potwierdzam, że działa lepiej niż htmlpreview. Przynajmniej pokazuje moje animacje WebGL.
Cyril Duchon-Doris,
1
Działa szybciej, a dzięki Bokeh ( np. ) Pokazuje niektóre interakcje (np. Podpowiedzi), które nie działają z podglądem HTML.
jadianes
Podobnie jak htmlpreview, nie działa z prywatnymi repozytoriami. Git tworzy adresy URL takich jak publiczne adresy URL, dodając? Token = <skrót>, ale narzędzia te powinny to zrozumieć i przekazać GH wraz z resztą.
zakmck
2
To jest z FAQ dla rawgit: Czy mogę użyć programistycznego adresu URL rawgit.com na stronie produkcyjnej lub w publicznym przykładowym kodzie? Nie. Używaj adresów URL rawgit.com do testowania małego ruchu lub do udostępniania tymczasowych wersji demonstracyjnych kilku osobom podczas programowania. Proszę używać cdn.rawgit.com do wszystkiego, co może powodować duży ruch lub że ludzie mogą kopiować i wklejać do własnego kodu. ... Dostępne jest więcej wyjaśnień
BarryPye,
3
Potwierdza: Rawgit zostanie zamknięty od października 2019 r.
samcozmid
34

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

hendrikswan
źródło
3
Działa świetnie. Jako git noob zapomniałem $ git commit -m 'init'między twoimi liniami.
systemaddict
1
Jaki będzie adres URL?
Koray Tugay,
hmm ... nie jestem pewien, czy jest to o wiele łatwiejsze niż żonglowanie
kociętami
14

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

zrzut ekranu potwierdzający moją odpowiedź

Mukesh
źródło
1

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.

Uruchom wybrany HTML

Wynik bieżący: wprowadź opis zdjęcia tutaj

Brawo Yeung
źródło
1

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).
Vijay
źródło
Pytający prawdopodobnie chce, aby wszyscy zobaczyli renderowaną stronę.
Ondra Žižka
@zakmck Browser wysyła nagłówek „text / plain”, ale musisz wysłać „text / html”. Nie mogę wysłać moich danych do strony trzeciej („ htmlpreview.github.com ”), dlatego wykonuję powyższe kroki. W powyższych krokach możesz także użyć wyrażenia regularnego dla adresu URL.
Vijay
Właśnie tego szukałem. Chcę zobaczyć stronę i oba na git jak na bitbucket.
Eduardo Reis,
Nie działało dla mnie.
Eduardo Reis
@EduardoReis Dzisiaj sprawdziłem na moim komputerze, nie działa teraz. Może być kilka zmian w rozszerzeniu „Modyfikuj opcje typu zawartości”. Jeśli znalazłem jakieś inne rozszerzenie, opublikuję tutaj. Dziękuję Ci.
Vijay
0

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.

rynop
źródło
Wygląda jak zewnętrzna usługa, która nie ma nic wspólnego z git. Gdzie jest instrukcja, jak go używać w kontekście tego pytania?
Stalinko
-3

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. ^ _ ^

jester96
źródło