Github'daki bir HTML sayfasını, indirmeden tarayıcıda önizlemeyi görmek için normal oluşturulmuş bir HTML sayfası olarak nasıl görebilirim?

356

On http://github.com geliştirici projenin HTML, CSS, JavaScript ve görüntü dosyalarını tutmak. HTML çıktısını tarayıcıda nasıl görebilirim?

Örneğin bu: https://github.com/necolas/css3-social-signin-buttons/blob/master/index.html

Bunu açtığımda yazarın kodunun işlenmiş HTML kodunu göstermiyor. Sayfayı kaynak kodu olarak gösterir.

Doğrudan oluşturulan HTML olarak görmek mümkün müdür? Aksi takdirde sonucu görmek için her zaman ZIP’in tamamını indirmem gerekir.

— Jitendra Vyas
kaynak

4

benzer soru: HTML dosyalarını yalnızca kaynaklarını görüntülemek yerine doğrudan GitHub'dan çalıştırabilir miyim?

— Amro

1

Haziran 2019 itibariyle raw.githack.com en uygun çözüm gibi görünüyor ( yukarıdaki bağlantıya verilen sorunun yanıtlarına bakın )

— leopold.talirz

456

HTML dosyalarını GitHub'da önizlemenin en rahat yolu https://htmlpreview.github.io/ adresine gitmek veya sadece orijinal URL'ye eklemek, yani: https://htmlpreview.github.io/?https:// github.com/bartaz/impress.js/blob/master/index.html

— niutech
kaynak

@Denis: Hangi tarayıcıyı ve hangi URL'yi kullanıyorsunuz? Şimdilik yalnızca Webkit ve Gecko tarayıcılarını destekliyor.

— niutech

32

Bunun yalnızca genel depolar için geçerli olduğunu unutmayın. Özel olanlar hata mesajı verecekError: Cannot load file

— Erik Trautman

37

htmlpreview.github.com , JavaScript ve CSS oluştururken kısmen başarısız oluyor. Alternatif rawgit.com daha iyi çalışır ve uygun İçerik Türü başlıklarına sahip dosyalar sunar.

— Julien Carsique

1

Harika bir çözüm, teşekkür ederim! README.md dosyasına öneki R defterlerime bağlantılar ekledim ve nb.html dosyamı çok iyi işler. Herkesin nasıl çalıştığını görmek istediği sayfa: github.com/sargdavid/snippets.cvi ve htmlpreview.github.io/?https://github.com/sargdavid/…

— Davit Sargsyan

1

Bu çözüm durur gibi görünüyor Aralık 2018'in son günlerinde şimdiye kadar çalışıyor, ancak hala bu stackoverflow.com/a/8446391/860099

— Kamil Kiełczewski

85

Bir arşiv indirmek istemiyorsanız, bunu oluşturmak için GitHub Sayfalarını kullanabilirsiniz .

Havuzu hesabınıza çatallayın.
Makinenizde yerel olarak klonlayın
Bir gh-pagesşube oluşturun (varsa), kaldırın ve yeni bir şube oluşturun master).
Dalı GitHub'a geri itin.
Sayfaları `http://username.github.io/repo

Kodda:

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
kaynak

Github sayfalarına nasıl kopyalayabileceğimi şimdi bir proje çatalladım.

— Jitendra Vyas

1

Cevabım bir işlemle güncellendi.

— Ross

3

Burada iyi belgelenmiştir help.github.com/articles/creating-project-pages-manually

— Leif Gruenwoldt

2

Neden önce bir master oluşturun ve kopyalayın (proje sayfalarını elle oluştururken "güvenli oynayın")? Kişi checkout --orphan gh-pages sadece ustalarla uğraşmadan bunu zorlayamaz mı?

— denis

4

Sayfalar artık github.com'a değil, github.io'ya taşındı.

— Damjan Pavlica

64

RawGit'i kullanabilirsiniz :
https://rawgit.com/necolas/css3-social-signin-buttons/master/index.html

Uygun İçerik Türü başlıklarına sahip dosyalar sunarak http://htmlpreview.github.com/ adresinden daha iyi çalışır (bu yazı yazıldığı sırada) . Ayrıca, üretimde kullanılmak üzere CDN URL'si de sağlar.

— Julien Carsique
kaynak

2

Ben htmlpreview daha iyi çalıştığını onaylamak. En azından WebGL animasyonlarımı gösteriyor.

— Cyril Duchon-Doris

1

Aslında daha hızlı çalışır ve Bokeh ( örn. ) İle, htmlpreview ile çalışmayan bazı etkileşimleri (örn. Araç ipuçları) gösterir.

— jadianes

Htmlpreview gibi, özel depolarla çalışmaz. Git,? Token = <hash> ekleyerek bunların genel URL'ler gibi URL'lerini yapar, ancak bu araçlar bunu anlamalı ve geri kalanıyla birlikte GH'ye geçirmelidir.

— zakmck

2

Bu, rawgit ile ilgili SSS'den alınmıştır: Bir üretim web sitesinde veya genel örnek kodunda bir rawgit.com geliştirme URL'si kullanabilir miyim? Hayır. Rawgit.com URL'lerini düşük trafik testi için veya geliştirme sırasında birkaç kişiyle geçici demoları paylaşmak için kullanın. Lütfen yoğun trafiğe neden olabilecek veya insanların kendi kodlarına kopyalayıp yapıştırabilecekleri şeyler için cdn.rawgit.com adresini kullanın. ... Daha fazla açıklama var

— BarryPye

4

Onaylayabilir: Rawgit Ekim 2019'dan itibaren kapatılacak.

— samcozmid

34

Github sayfalarıyla yapmak gerçekten çok kolay , ilk kez yaptığınızda biraz garip. Örmeyi öğrenirken ilk kez 3 yavru kedi hokkabazlık yapmak zorundasın gibi. (Tamam, o kadar da kötü değil)

Bir gh sayfalar dalına ihtiyacınız var:

Temel olarak github.com , deponun bir gh sayfaları dalını arar . Burada bulduğu tüm HTML sayfalarını normal HTML olarak doğrudan tarayıcıya sunacaktır.

Bu gh-sayfalar dalını nasıl edinebilirim?

Kolay. Sadece github repo denilen bir şube oluşturun gh-pages. --orphanBu dalı oluşturduğunuzda belirtin , bu dalı aslında github şubenizle birleştirmek istemediğiniz için, yalnızca HTML kaynaklarınızı içeren bir dal istiyorsunuz.

$ git checkout --orphan gh-pages

Reporumdaki diğer tüm serserilere ne dersiniz?

Hayır, devam edip silebilirsiniz. Ve şimdi yapmak güvenlidir, çünkü dikkat gösteriyorsunuz ve ana şubenizle birleştirilemeyen ve tüm kodunuzu kaldıramayacak bir yetim dalı oluşturdunuz.

Şube yarattım, şimdi ne olacak?

Bu şubeyi github.com'a yükseltmelisiniz, böylece otomasyonları devreye girebilir ve bu sayfaları sizin için barındırmaya başlayabilir.

git push -u origin gh-pages

Ama .. HTML'm hala sunulmuyor!

Github'un bu dalları dizine eklemesi ve içeriği sunmak için gerekli altyapıyı tetiklemesi birkaç dakika sürer. Github'a göre 10 dakikaya kadar.

Github.com tarafından atılan adımlar

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

— hendrikswan
kaynak

3

Harika çalışıyor. Git çaylak olarak, $ git commit -m 'init'çizgilerinizin arasına girmeyi unuttum .

— systemaddict

1

URL ne olacak?

— Koray Tugay

hmm ... bu yavru kedi hokkabazlık çok daha kolay olduğundan emin değil ...

— dreftymac

14

Ben tüm yorumları okudum ve ziyaret edene kadar GitHub GitHub sayfaları oluşturmak için normal bir kullanıcı için çok zor hale düşündüm GitHub tema Page onun açıkça endişe repo ayarlarına Sayfa yapabileceğiniz altındaki "GitHub Sayfalar" bir bölümü olduğu belirtilen "GitHub Sayfaları için ana dalı kullan" seçeneğini belirleyin. ve voilà !! ... https://username.github.io/reponame adresindeki ilgili repoya göz atın

cevabımı desteklemek için ekran görüntüsü

— Mukesh
kaynak

1

Ayrıca, Tampermonkey kullanıyorsanız preview with http://htmlpreview.github.com/eylemler menüsüne 'ham', 'suçlama' ve 'geçmiş' düğmelerinin yanında düğme ekleyecek bir komut dosyası ekleyebilirsiniz .

Bunun gibi komut dosyası: https://gist.github.com/vanyakosmos/83ba165b288af32cf85e2cac8f02ce6d

— aiven
kaynak

1

Aşağıdaki kullanarak HTML kodunu önizleme yapabilirsiniz Chrome uzantısını - Run Selected HTMLoldukça basit kullanımı.

select all the codeGitHub'ın okuma modunda istiyorsanız , oldukça basittir, önce fare imlecini <html>üstteki başlangıç köşesine taşıyın , sonra tuşu basılı tutun Shiftve imleci </html>altta bitiş köşesine taşıyın .

Seçilen HTML'yi Çalıştır - Chrome Web mağazası

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

Adım 1 : Okuma modunda, html kodunun tüm gövdesini seçin.

Adım 2 : Fare "Seçili HTML Çalıştır" ı sağ tıklatın, oluşturulan sonucu yeni sekmede görebilirsiniz.

Çalışan sonuç:

— Bravo Yeung
kaynak

1

Şimdi, Bu eski bir yanıttır (Çünkü "İçerik Türü Seçeneklerini Değiştir" uzantısı beklendiği gibi çalışmıyor.).

Bu çözüm yalnızca krom tarayıcı için. Diğer tarayıcılardan emin değilim.

Chrome tarayıcısına "İçerik Türü Seçeneklerini Değiştir" uzantısını ekleyin.
Tarayıcıda "chrome-extension: //jnfofbopfpaoeojgieggflbpcblhfhka/options.html" URL'sini açın.
Ham dosya URL'si için kuralı ekleyin. Örneğin:
- URL Filtresi: https: ///raw/master//fileName.html
- Orijinal Türü: metin / düz
- Değiştirme Türü: metin / html
Kural olarak url'yi eklediğiniz dosya tarayıcısını açın (3. adımda).

— Vijay
kaynak

Asker muhtemelen herkesin oluşturulan sayfayı görmesini ister.

— Ondra 29ižka

@zakmck "text / plain" başlığını gönderen tarayıcı ancak "text / html" göndermeniz gerekiyor. Verilerimi üçüncü taraflara (" htmlpreview.github.com ") gönderemiyorum, bu yüzden yukarıdaki adımları kullanıyorum. Yukarıdaki adımlarda URL için normal ifadeyi de kullanabilirsiniz.

— Vijay

Tam olarak bunu arıyordum. Sayfayı görmek istiyorum ve her ikisi de bitbucket'teki gibi git.

— Eduardo Reis

@EduardoReis Bugün, makinemi kontrol ettim, şimdi çalışmıyor. "İçerik Türü Seçeneklerini Değiştir" uzantısında bazı değişiklikler olabilir. Başka bir uzantı bulduğumda buraya göndereceğim. Teşekkür ederim.

— Vijay

0

Bu doğrudan bir cevap değil, ama bence çok tatlı bir alternatif.

http://www.s3auth.com/

Sayfalarınızı temel kimlik doğrulamasının arkasında barındırmanızı sağlar. Özel github deponuzda api belgeleri gibi şeyler için harika. sadece api yapınızın bir parçası olarak koymak bir s3 reklam.

— rynop
kaynak

Git ile ortak bir şey olmayan bir 3. taraf hizmet gibi görünüyor. Talimat bu soru bağlamında nasıl kullanılır?

— Stalinko

-3

Sadece Github Sayfalarını açabilirsiniz. ^ _ ^

"GitHub Sayfaları" na gitmek için "Ayarlar" a tıklayın ve "Kaynak" altındaki açılır menüye tıklayın ve herkese açık olmasını istediğiniz dalı seçin (ana html dosyasının bulunduğu yer) aaaand vualaa. ^ _ ^

— jester96
kaynak