Bagaimana cara melihat halaman HTML di Github sebagai halaman HTML yang diberikan normal untuk melihat pratinjau di browser, tanpa mengunduh?

355

Di http://github.com, pengembang menyimpan file HTML, CSS, JavaScript, dan gambar proyek. Bagaimana saya bisa melihat output HTML di browser?

Misalnya ini: https://github.com/necolas/css3-social-signin-buttons/blob/master/index.html

Ketika saya membuka ini tidak menunjukkan HTML yang diberikan dari kode penulis. Ini menunjukkan halaman sebagai kode sumber.

Apakah mungkin melihatnya secara langsung sebagai HTML? Kalau tidak, saya selalu perlu mengunduh seluruh ZIP hanya untuk melihat hasilnya.

Jitendra Vyas
sumber
1
pada Juni 2019, raw.githack.com tampaknya menjadi solusi paling nyaman (lihat jawaban atas pertanyaan yang terkait di atas )
leopold.talirz

Jawaban:

455

Cara paling nyaman untuk melihat pratinjau file HTML di GitHub adalah dengan membuka https://htmlpreview.github.io/ atau hanya menambahkannya ke URL asli, yaitu: https://htmlpreview.github.io/?https:// github.com/bartaz/impress.js/blob/master/index.html

niutech
sumber
@Denis: Browser mana dan URL mana yang Anda gunakan? Untuk saat ini, ia hanya mendukung browser Webkit dan Gecko.
niutech
32
Perhatikan bahwa ini hanya berfungsi untuk repo publik. Yang pribadi akan memberikan pesan kesalahanError: Cannot load file
Erik Trautman
37
htmlpreview.github.com sebagian gagal dalam rendering JavaScript dan CSS. Rawgit.com alternatif berfungsi lebih baik, menyajikan file dengan header Jenis Konten yang tepat.
Julien Carsique
1
Solusi hebat, terima kasih! Saya menambahkan tautan ke R Notebook saya dengan awalan ke file README.md dan membuat file nb.html saya dengan sangat baik. Berikut adalah halaman jika ada yang ingin melihat cara kerjanya: github.com/sargdavid/snippets.cvi dan htmlpreview.github.io/?https://github.com/sargdavid/…
Davit Sargsyan
1
Sepertinya solusi ini berhenti berfungsi pada hari-hari terakhir Desember 2018 hingga sekarang namun kami masih memiliki stackoverflow.com/a/8446391/860099
Kamil Kiełczewski
85

Jika Anda tidak ingin mengunduh arsip, Anda dapat menggunakan Halaman GitHub untuk merender ini.

  1. Fork repositori ke akun Anda.
  2. Kloning secara lokal di mesin Anda
  3. Buat gh-pagescabang (jika ada, hapus dan buat cabang baru master).
  4. Dorong kembali cabang ke GitHub.
  5. Lihat halaman di `http://username.github.io/repo

Dalam kode:

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
sumber
Saya telah bercabang sebuah proyek sekarang bagaimana saya dapat menyalinnya ke halaman github.
Jitendra Vyas
1
Memperbarui jawaban saya dengan sebuah proses.
Ross
3
Ini didokumentasikan dengan baik di sini help.github.com/articles/creating-project-pages-manually
Leif Gruenwoldt
2
Mengapa pertama-tama membuat master dan mengkloningnya ("mainkan dengan aman" dalam membuat-proyek-halaman-secara manual)? Bisakah seseorang tidak checkout --orphan gh-pages hanya , mendorong itu, tanpa mengacaukan master sama sekali?
denis
4
Halaman dipindahkan ke github.io, bukan github.com lagi.
Damjan Pavlica
64

Anda dapat menggunakan RawGit :
https://rawgit.com/necolas/css3-social-signin-buttons/master/index.html

Ini berfungsi lebih baik (pada saat penulisan ini) daripada http://htmlpreview.github.com/ , melayani file dengan header Tipe Konten yang tepat. Selain itu, ia juga menyediakan URL CDN untuk digunakan dalam produksi.

Julien Carsique
sumber
2
Saya mengonfirmasi bahwa itu berfungsi lebih baik daripada htmlpreview. Setidaknya, ini menunjukkan animasi WebGL saya.
Cyril Duchon-Doris
1
Ini sebenarnya bekerja lebih cepat, dan dengan Bokeh ( misalnya ), ini menunjukkan beberapa interaksi (misalnya tooltips) yang tidak bekerja dengan htmlpreview.
jadianes
Seperti htmlpreview, tidak bekerja dengan repositori pribadi. Git membuat URL untuk URL publik seperti ini dengan menambahkan? Token = <hash>, tetapi alat ini harus memahaminya dan meneruskannya ke GH bersama-sama dengan yang lain.
zakmck
2
Ini dari FAQ untuk rawgit: Dapatkah saya menggunakan URL pengembangan rawgit.com di situs web produksi atau dalam kode contoh publik? Tidak. Hanya gunakan URL rawgit.com untuk pengujian lalu lintas rendah atau untuk berbagi demo sementara dengan beberapa orang selama pengembangan. Silakan gunakan cdn.rawgit.com untuk apa pun yang dapat mengakibatkan lalu lintas padat atau orang-orang dapat menyalin dan menempelkan ke kode mereka sendiri. ... Ada penjelasan lebih lanjut yang tersedia
BarryPye
3
Dapat mengkonfirmasi: Rawgit akan ditutup pada Oktober 2019.
samcozmid
34

Ini sangat mudah dilakukan dengan halaman github , hanya sedikit aneh saat pertama kali Anda melakukannya. Agak seperti pertama kali Anda harus menyulap 3 anak kucing sambil belajar merajut. (OK, tidak terlalu buruk)

Anda membutuhkan cabang gh-halaman:

Pada dasarnya github.com mencari cabang gh-halaman dari repositori. Ini akan melayani semua halaman HTML yang ditemukan di sini sebagai HTML normal langsung ke browser.

Bagaimana cara mendapatkan cabang gh-halaman ini?

Mudah. Cukup buat cabang repo github Anda yang disebut gh-pages. Tentukan --orphanketika Anda membuat cabang ini, karena Anda sebenarnya tidak ingin menggabungkan cabang ini kembali ke cabang github Anda, Anda hanya ingin cabang yang berisi sumber daya HTML Anda.

$ git checkout --orphan gh-pages

Bagaimana dengan semua omong kosong lain di repo saya, bagaimana itu cocok untuk itu?

Nah, Anda bisa langsung saja menghapusnya. Dan aman untuk dilakukan sekarang, karena Anda telah memperhatikan dan membuat cabang yatim yang tidak dapat digabungkan kembali ke cabang utama Anda dan menghapus semua kode Anda.

Saya sudah membuat cabang, sekarang bagaimana?

Anda perlu mendorong cabang ini ke github.com, sehingga otomasi mereka dapat memulai dan mulai menghosting halaman ini untuk Anda.

git push -u origin gh-pages

Tapi .. HTML saya masih belum ditayangkan!

Butuh beberapa menit bagi github untuk mengindeks cabang-cabang ini dan menjalankan infrastruktur yang diperlukan untuk menyajikan konten. Hingga 10 menit menurut github.

Langkah-langkahnya ditata oleh github.com

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

hendrikswan
sumber
3
Bagus sekali. Sebagai git noob, saya lupa $ git commit -m 'init'di antara Anda.
systemaddict
1
Apa yang akan menjadi URL?
Koray Tugay
hmm ... tidak begitu yakin ini jauh lebih mudah daripada menyulap anak kucing ...
dreftymac
14

Saya membaca semua komentar dan berpikir bahwa GitHub mempersulit pengguna biasa untuk membuat halaman GitHub sampai saya mengunjungi Halaman tema GitHub di mana disebutkan dengan jelas bahwa ada bagian "Halaman GitHub" di bawah pengaturan Halaman dari repo yang bersangkutan di mana Anda dapat pilih opsi "gunakan cabang master untuk Halaman GitHub." dan voila !! ... checkout repo tertentu itu di https://username.github.io/reponame

tangkapan layar untuk mendukung jawaban saya

Mukesh
sumber
1

Juga, jika Anda menggunakan Tampermonkey, Anda dapat menambahkan skrip yang akan menambahkan preview with http://htmlpreview.github.com/tombol ke menu tindakan di samping tombol 'mentah', 'salahkan' dan 'riwayat'.

Script seperti ini: https://gist.github.com/vanyakosmos/83ba165b288af32cf85e2cac8f02ce6d

aiven
sumber
1

Anda dapat melihat pratinjau kode HTML dengan menggunakan ekstensi Chrome berikut - Run Selected HTML, cukup mudah digunakan.

Jika Anda ingin select all the codedalam mode baca GitHub, itu juga cukup sederhana, pertama-tama gerakkan kursor mouse ke braket awal <html>di bagian atas, kemudian tahan Shifttombol, dan kemudian gerakkan kursor braket akhir </html>di bagian bawah.

Jalankan HTML yang Dipilih - Toko Web Chrome

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

Langkah 1 : Dalam mode baca, pilih semua badan kode html.

Langkah 2 : Klik kanan mouse "Jalankan Seleted HTML", maka Anda dapat melihat hasil yang diberikan di tab baru.

Jalankan HTML yang Dipilih

Hasil yang berjalan: masukkan deskripsi gambar di sini

Bravo Yeung
sumber
1

Sekarang, ini adalah jawaban yang sudah kadaluwarsa (Karena ekstensi "Ubah Tipe-Jenis Konten" tidak berfungsi seperti yang diharapkan.).

Solusi ini hanya untuk browser chrome. Saya tidak yakin tentang browser lain.

  1. Tambahkan ekstensi "Ubah Opsi Jenis Konten" di browser chrome.
  2. Buka "chrome-extension: //jnfofbopfpaoeojgieggflbpcblhfhka/options.html" url di browser.
  3. Tambahkan aturan untuk url file mentah. Sebagai contoh:
    • Filter URL: https: ///raw/master//fileName.html
    • Jenis Asli: teks / polos
    • Jenis Pengganti: teks / html
  4. Buka browser file yang Anda tambahkan url dalam aturan (dalam langkah 3).
Vijay
sumber
Penanya mungkin ingin semua orang melihat halaman yang diberikan.
Ondra Žižka
@zakmck Browser mengirim tajuk "text / plain" tetapi Anda harus mengirim "text / html". Saya tidak bisa mengirim data saya ke pihak ketiga (" htmlpreview.github.com ") itu sebabnya saya menggunakan langkah-langkah di atas. Anda juga dapat menggunakan ekspresi reguler untuk url di langkah-langkah di atas.
Vijay
Saya mencari persis ini. Saya ingin melihat halaman, dan keduanya di git seperti pada bitbucket.
Eduardo Reis
Tidak bekerja untuk saya.
Eduardo Reis
@EduardoReis Hari ini, saya memeriksa mesin saya, tidak berfungsi sekarang. Mungkin, beberapa perubahan dalam ekstensi "Modifikasi Konten-Jenis Opsi". Jika saya menemukan ekstensi lain maka saya akan memposting di sini. Terima kasih.
Vijay
0

Ini bukan jawaban langsung, tetapi saya pikir ini adalah alternatif yang cukup manis.

http://www.s3auth.com/

Ini memungkinkan Anda untuk meng-host halaman Anda di belakang auth dasar. Bagus untuk hal-hal seperti api docs di repo github pribadi Anda. hanya iklan s3 dimasukkan sebagai bagian dari membangun api Anda.

rynop
sumber
Sepertinya layanan pihak ke-3 yang tidak memiliki kesamaan dengan git. Di mana instruksi cara menggunakannya dalam konteks pertanyaan ini?
Stalinko
-3

Anda bisa menyalakan Halaman Github. ^ _ ^

Klik pada "Pengaturan", daripada pergi ke "Halaman GitHub" dan klik pada dropdown di bawah "Sumber" dan pilih cabang yang ingin Anda publikasikan (di mana file html utama berada) aaaand vualaa. ^ _ ^

badut96
sumber