วิธีดูหน้า HTML บน Github เป็นหน้า HTML ที่แสดงผลปกติเพื่อดูตัวอย่างในเบราว์เซอร์โดยไม่ต้องดาวน์โหลด

355

ในhttp://github.comนักพัฒนาให้เก็บไฟล์ HTML, CSS, JavaScript และรูปภาพของโครงการ ฉันจะดูผลลัพธ์ HTML ในเบราว์เซอร์ได้อย่างไร

ตัวอย่างเช่นนี้: https://github.com/necolas/css3-social-signin-buttons/blob/master/index.html

เมื่อฉันเปิดสิ่งนี้จะไม่แสดง HTML ที่แสดงผลของรหัสของผู้เขียน มันแสดงให้เห็นว่าหน้าเป็นรหัสที่มา

เป็นไปได้ไหมที่จะเห็นว่าเป็น HTML ที่แสดงผลโดยตรง ไม่เช่นนั้นฉันจะต้องดาวน์โหลดทั้ง ZIP เพื่อดูผลลัพธ์

— Jitendra Vyas
แหล่งที่มา

4

คำถามที่คล้ายกัน: ฉันสามารถเรียกใช้ไฟล์ HTML โดยตรงจาก GitHub แทนที่จะดูเฉพาะที่มาของไฟล์ได้หรือไม่

— Amro

1

ณ เดือนมิถุนายน 2562 ดูเหมือนว่าraw.githack.comจะเป็นทางออกที่สะดวกที่สุด (ดูคำตอบของคำถามที่เชื่อมโยงข้างต้น )

— leopold.talirz

455

วิธีที่สะดวกสบายที่สุดในการดูตัวอย่างไฟล์ HTML ใน GitHub คือไปที่https://htmlpreview.github.io/หรือเพียงแค่เติมลงใน URL ดั้งเดิมเช่น: https://htmlpreview.github.io/?https:// github.com/bartaz/impress.js/blob/master/index.html

— niutech
แหล่งที่มา

@Denis: คุณใช้เบราว์เซอร์ใดและ URL ใดอยู่ ในตอนนี้รองรับเฉพาะเบราว์เซอร์ Webkit และ Gecko

— niutech

32

โปรดทราบว่าสิ่งนี้ใช้ได้กับ repos สาธารณะเท่านั้น ภาคเอกชนจะให้ข้อความแสดงข้อผิดพลาดError: Cannot load file

— Erik Trautman

37

htmlpreview.github.comล้มเหลวบางส่วนเมื่อแสดง JavaScript และ CSS rawgit.comทางเลือกทำงานได้ดีขึ้นให้บริการไฟล์ที่มีส่วนหัวประเภทเนื้อหาที่เหมาะสม

— Julien Carsique

1

ทางออกที่ดีขอบคุณ! ฉันเพิ่มลิงก์ไปยัง R Notebooks ของฉันด้วยคำนำหน้าไปยังไฟล์ README.md และทำให้ไฟล์ nb.html ของฉันแสดงผลได้ดีมาก นี่คือหน้าในกรณีที่ใครต้องการดูว่ามันทำงานอย่างไร: github.com/sargdavid/snippets.cviและhtmlpreview.github.io/?https://github.com/sargdavid/ …

— Davit Sargsyan

1

ดูเหมือนว่าโซลูชันนี้จะหยุดทำงานในวันสุดท้ายของเดือนธันวาคม 2018 จนถึงขณะนี้อย่างไรก็ตามเรายังมีstackoverflow.com/a/8446391/860099

— Kamil Kiełczewski

85

หากคุณไม่ต้องการดาวน์โหลดไฟล์เก็บถาวรคุณสามารถใช้GitHub Pagesเพื่อแสดงผลได้

แยกที่เก็บไปยังบัญชีของคุณ
ลอกแบบมันไว้ในเครื่องของคุณ
สร้างgh-pagesสาขา (หากมีอยู่แล้วให้ลบออกและสร้างสาขาใหม่ที่อิงmaster)
ดันกิ่งก้านกลับไปที่ GitHub
ดูหน้าเว็บที่`http://username.github.io/repo

ในรหัส:

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

— รอสส์
แหล่งที่มา

ฉันแยกโครงการตอนนี้ฉันจะคัดลอกไปยังหน้า github ได้อย่างไร

— Jitendra Vyas

1

อัปเดตคำตอบของฉันด้วยกระบวนการ

— Ross

3

เอกสารนี้มีไว้อย่างดีhelp.github.com/articles/creating-project-pages-manually

— Leif Gruenwoldt

2

ทำไมต้องสร้างต้นแบบและโคลนก่อน ("เล่นอย่างปลอดภัย" ในการสร้างโครงการหน้าด้วยตนเอง) ไม่checkout --orphan gh-pages เพียง แต่จะผลักดันสิ่งนั้นโดยไม่ยุ่งกับอาจารย์เลย?

— เดนิส

4

ย้ายหน้าไปที่ github.io ไม่ใช่ github.com อีกต่อไป

— Damjan Pavlica

64

คุณสามารถใช้RawGit :
https://rawgit.com/necolas/css3-social-signin-buttons/master/index.html

ใช้งานได้ดีกว่า (ในขณะที่เขียนนี้) กว่าhttp://htmlpreview.github.com/ซึ่งให้บริการไฟล์ที่มีส่วนหัวประเภทเนื้อหาที่เหมาะสม นอกจากนี้ยังให้ CDN URL สำหรับใช้ในการผลิต

— Julien Carsique
แหล่งที่มา

2

ฉันยืนยันว่าใช้งานได้ดีกว่า htmlpreview อย่างน้อยมันก็แสดงภาพเคลื่อนไหว WebGL ของฉัน

— Cyril Duchon-Doris

1

มันทำงานได้เร็วขึ้นจริงและด้วย Bokeh ( เช่น ) จะแสดงการโต้ตอบบางอย่าง (เช่นคำแนะนำเครื่องมือ) ที่ไม่ทำงานกับ htmlpreview

— jadianes

เช่นเดียวกับ htmlpreview ไม่ทำงานกับที่เก็บส่วนตัว Git สร้าง URL สำหรับ URL สาธารณะเหล่านี้ด้วยการเพิ่ม? token = <hash> แต่เครื่องมือเหล่านี้ควรเข้าใจและส่งต่อไปยัง GH พร้อมกับส่วนที่เหลือ

— zakmck

2

นี่คือจากคำถามที่พบบ่อยสำหรับ rawgit: ฉันสามารถใช้ URL การพัฒนา rawgit.com บนเว็บไซต์การผลิตหรือในรหัสตัวอย่างสาธารณะได้หรือไม่ ไม่ใช้ URL rawgit.com เท่านั้นสำหรับการทดสอบที่มีปริมาณน้อยหรือสำหรับการแบ่งปันการสาธิตชั่วคราวกับบางคนระหว่างการพัฒนา โปรดใช้ cdn.rawgit.com สำหรับทุกสิ่งที่อาจส่งผลให้เกิดการรับส่งข้อมูลมากหรือผู้คนอาจคัดลอกและวางลงในรหัสของตนเอง ... มีคำอธิบายเพิ่มเติม

— BarryPye

3

สามารถยืนยันได้: Rawgit จะปิดตัวลงในเดือนตุลาคม 2019

— samcozmid

34

มันง่ายมากที่จะทำกับหน้า GitHubมันแปลก ๆ ในครั้งแรกที่คุณทำ Sorta เหมือนครั้งแรกที่คุณต้องโยนลูกแมว 3 ตัวขณะเรียนรู้ที่จะถัก (ตกลงมันไม่ได้แย่ขนาดนั้นทั้งหมด)

คุณต้องการสาขา gh-pages:

โดยทั่วไป github.com จะค้นหาสาขา gh-pages ของที่เก็บ มันจะให้บริการหน้า HTML ทั้งหมดที่พบในที่นี่เป็น HTML ปกติโดยตรงไปยังเบราว์เซอร์

ฉันจะรับสาขา gh-page นี้ได้อย่างไร

ง่าย. เพียงแค่สร้างสาขาของ repo GitHub gh-pagesของคุณเรียกว่า ระบุ--orphanเมื่อคุณสร้างสาขานี้เนื่องจากคุณไม่ต้องการผสานสาขานี้กลับเข้าไปในสาขา GitHub ของคุณคุณเพียงต้องการสาขาที่มีทรัพยากร HTML ของคุณ

$ git checkout --orphan gh-pages

แล้ว gunk อื่น ๆ ทั้งหมดใน repo ของฉันมันเข้ากับมันได้ยังไง?

ไม่ได้คุณสามารถไปข้างหน้าและลบมันได้ และปลอดภัยที่จะทำตอนนี้เพราะคุณให้ความสนใจและสร้างสาขาเด็กกำพร้าซึ่งไม่สามารถรวมกลับเข้าไปในสาขาหลักของคุณและลบรหัสทั้งหมดของคุณ

ฉันสร้างสาขาแล้วตอนนี้อะไร

คุณต้องผลักดันสาขานี้ไปที่ github.com เพื่อให้ระบบอัตโนมัติของพวกเขาสามารถเข้ามาและเริ่มโฮสต์หน้าเหล่านี้ให้คุณ

git push -u origin gh-pages

แต่ .. HTML ของฉันยังคงไม่แสดงผล!

ใช้เวลาไม่กี่นาทีสำหรับ GitHub ในการจัดทำดัชนีสาขาเหล่านี้และเพิ่มโครงสร้างพื้นฐานที่จำเป็นเพื่อแสดงเนื้อหา มากถึง 10 นาทีตาม GitHub

ขั้นตอนการจัดวางโดย github.com

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

— hendrikswan
แหล่งที่มา

3

ใช้งานได้ดี ในฐานะที่เป็น noob คอมไพล์ฉันลืม$ git commit -m 'init'ระหว่างบรรทัดของคุณ

— systemaddict

1

URL จะเป็นอย่างไร

— Koray Tugay

อืม ... ไม่แน่ใจว่ามันง่ายกว่าลูกแมวเล่นกล ...

— dreftymac

14

ฉันอ่านความคิดเห็นทั้งหมดและคิดว่า GitHub ทำให้มันยากเกินไปสำหรับผู้ใช้ทั่วไปในการสร้างหน้า GitHub จนกว่าฉันจะไปที่หน้าธีมของ GitHubที่กล่าวถึงอย่างชัดเจนว่ามีส่วนของ "หน้า GitHub" ภายใต้การตั้งค่าหน้าของ repo ที่เกี่ยวข้อง เลือกตัวเลือก "ใช้สาขาหลักสำหรับ GitHub Pages" และvoilà !! ... เช็คเอาต์ repo นั้นบนhttps://username.github.io/reponame

สกรีนช็อตเพื่อสนับสนุนคำตอบของฉัน

— Mukesh
แหล่งที่มา

1

นอกจากนี้หากคุณใช้ Tampermonkey คุณสามารถเพิ่มสคริปต์ที่จะเพิ่มpreview with http://htmlpreview.github.com/ปุ่มลงในเมนูการกระทำข้างปุ่ม 'ดิบ', 'โทษ' และ 'ประวัติ'

สคริปต์เช่นนี้: https://gist.github.com/vanyakosmos/83ba165b288af32cf85e2cac8f02ce6d

— aiven
แหล่งที่มา

1

คุณสามารถดูตัวอย่างโค้ด 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 : คลิกเมาส์ขวา "เรียกใช้ HTML ที่ถูกเรียกใช้" จากนั้นคุณจะเห็นผลลัพธ์ที่แสดงในแท็บใหม่

ผลการทำงาน:

— ไชโยเหยิง
แหล่งที่มา

1

ขณะนี้นี่เป็นคำตอบที่ล้าสมัย (เนื่องจากส่วนขยาย "แก้ไขตัวเลือกประเภทเนื้อหา" ไม่ทำงานตามที่คาดไว้)

โซลูชันนี้สำหรับเบราว์เซอร์ chrome เท่านั้น ฉันไม่แน่ใจเกี่ยวกับเบราว์เซอร์อื่น

เพิ่มส่วนขยาย "แก้ไขตัวเลือกประเภทเนื้อหา" ในเบราว์เซอร์ chrome
เปิด "chrome-extension: //jnfofbopfpaoeojgieggflbpcblhfhka/options.html" url ในเบราว์เซอร์
เพิ่มกฎสำหรับ URL ไฟล์ดิบ ตัวอย่างเช่น:
- ตัวกรอง URL: https: ///raw/master//fileName.html
- ประเภทเดิม: ข้อความ / ธรรมดา
- ประเภทการแทนที่: text / html
เปิดเบราว์เซอร์ไฟล์ที่คุณเพิ่ม URL ไว้ในกฎ (ในขั้นตอนที่ 3)

— วีเจย์
แหล่งที่มา

ผู้ถามอาจต้องการให้ทุกคนเห็นหน้าเว็บที่แสดงผล

— Ondra Žižka

@zakmck เบราว์เซอร์ส่งส่วนหัว "text / plain" แต่คุณต้องส่ง "text / html" ฉันไม่สามารถส่งข้อมูลของฉันไปยังบุคคลที่สาม (" htmlpreview.github.com ") ได้ว่าเหตุใดฉันจึงใช้ขั้นตอนข้างต้น นอกจากนี้คุณยังสามารถใช้นิพจน์ปกติสำหรับ url ในขั้นตอนข้างต้น

— วีเจย์

ฉันกำลังมองหาสิ่งนี้ ฉันต้องการที่จะเห็นหน้าและทั้งสองในคอมไพล์เช่นเดียวกับบิต

— Eduardo Reis

ไม่ได้ผลสำหรับฉัน

— Eduardo Reis

@EduardoReis วันนี้ฉันตรวจสอบกับเครื่องแล้วไม่ทำงาน อาจเป็นการเปลี่ยนแปลงบางอย่างในส่วนขยาย "แก้ไขตัวเลือกประเภทเนื้อหา" หากฉันพบส่วนขยายอื่น ๆ ฉันจะโพสต์ที่นี่ ขอบคุณ.

— วีเจย์

0

นี่ไม่ใช่คำตอบโดยตรง แต่ฉันคิดว่ามันเป็นทางเลือกที่น่ารัก

http://www.s3auth.com/

ช่วยให้คุณสามารถโฮสต์หน้าของคุณหลังรับรองความถูกต้องขั้นพื้นฐาน ยอดเยี่ยมสำหรับสิ่งต่าง ๆ เช่น api docs ใน repit GitHub ส่วนตัวของคุณ เพียงแค่โฆษณา S3 ใส่เป็นส่วนหนึ่งของการสร้าง API ของคุณ

— rynop
แหล่งที่มา

ดูเหมือนบริการของบุคคลที่สามซึ่งไม่มีอะไรเหมือนกันกับ git คำแนะนำวิธีการใช้ในบริบทของคำถามนี้อยู่ที่ไหน

— Stalinko

-3

คุณสามารถเปิดหน้า Github ได้ ^ _ ^

คลิกที่ "การตั้งค่า" กว่าไปที่ "หน้า GitHub" และคลิกที่เลื่อนลงใต้ "ที่มา" และเลือกสาขาที่คุณต้องการที่จะสาธารณะ (ที่ไฟล์ html หลักตั้งอยู่) aaaand vualaa ^ _ ^

— jester96
แหล่งที่มา