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

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

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

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

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

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

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

1. แยกที่เก็บไปยังบัญชีของคุณ
2. ลอกแบบมันไว้ในเครื่องของคุณ
3. สร้างgh-pagesสาขา (หากมีอยู่แล้วให้ลบออกและสร้างสาขาใหม่ที่อิงmaster)
4. ดันกิ่งก้านกลับไปที่ GitHub
5. ดูหน้าเว็บที่`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

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

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

มันง่ายมากที่จะทำกับหน้า 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

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

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

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

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

ผลการทำงาน:

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

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

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

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

http://www.s3auth.com/

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

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

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