สัปดาห์ที่แล้ว Šime Vidas บ่นบน Twitter ว่ายากที่จะวางบล็อกข้อความ บนอุปกรณ์มือถือ ฉันเสนอให้ใช้ pastebin.com แต่ต้องมีการแตะหลายครั้งก่อนที่คุณจะวาง จากนั้น Šime ก็พูดติดตลกว่าเราควรสร้าง pastebinzero.com และทั้งหมดที่ต้องการก็คือแบบเต็มหน้าจอ
ดังนั้นฉันจึงใช้เวลาหนึ่งนาทีเพื่อสร้างสิ่งนี้ ในเบราว์เซอร์ของฉัน ไม่มีอะไรเลยนอกจากการเข้าสู่ระบบ GitHub ตั้งแต่การตั้งค่าไปจนถึงการเข้ารหัสด้วยการสนับสนุนการเติมข้อความอัตโนมัติไปจนถึงการโฮสต์ คุณสามารถเห็นมันในทุกสิริที่ https://codepo8.github.io/pastebinzero และดูรหัสที่ https://github.com/codepo8/pastebinzero
และคุณก็สามารถทำได้เช่นกัน นี่คือวิธีการ
หากคุณรู้สึกว่าต้องการเห็นสิ่งนี้เป็นวิดีโอ ให้ลองดูคำแนะนำสั้นๆ ต่อไปนี้ประมาณ 2 นาที
มิฉะนั้น ต่อไปนี้คือขั้นตอนในการเริ่มต้น สร้าง และโฮสต์โปรเจ็กต์ที่ ใช้ HTML /CSS/JavaScript บน GitHub
- ไปที่โปรไฟล์ GitHub ของคุณ คลิกที่ “ที่เก็บ” และกดปุ่ม “ใหม่”
- คุณต้องตั้งชื่อที่เก็บ เนื่องจากจะเป็นส่วนหนึ่งของ URL ในภายหลัง GitHub จะบอกคุณโดยอัตโนมัติว่าชื่อ repo นั้นยังมีอยู่หรือไม่ ตรวจสอบให้แน่ใจว่า repo ของคุณเป็นแบบสาธารณะและกด “สร้างที่เก็บ” หากคุณไม่ต้องการแสดงซอร์สโค้ดแต่ให้คนอื่นเห็นผลลัพธ์ คุณยังสามารถเก็บไว้เป็นส่วนตัวได้ หน้า GitHub ที่สร้างขึ้นจะเป็นแบบสาธารณะเสมอ
- สิ่งนี้สร้างที่เก็บและคุณได้รับข้อมูลทั้งหมดว่าต้องทำอะไรต่อไป สำหรับตอนนี้ คลิกลิงก์ `สร้างไฟล์ใหม่’
- ตั้งชื่อไฟล์ `index.html` และป้อนอะไรก็ได้ที่เป็นเนื้อหา สิ่งนี้ไม่สำคัญในตอนนี้ เนื่องจากตัวแก้ไขนี้สามารถแก้ไขได้อย่างรวดเร็ว แต่ไม่ได้ตัดมัสตาร์ด กดปุ่ม ‘ยืนยันไฟล์ใหม่’ และคุณจะได้รับไฟล์ใหม่
- ไปที่แท็บ “การตั้งค่า” และเลือกรายการเมนู “หน้า” ตรวจสอบให้แน่ใจว่าได้เลือกสาขา “หลัก” จากเมนูแบบเลื่อนลงและกด “บันทึก” ทำให้สิ่งที่คุณกำลังทำงานอยู่สามารถใช้ได้เป็น URL บนเว็บ
- กลับไปที่ส่วน ‘รหัส’ ของที่เก็บแล้วกดปุ่ม `.` สิ่งนี้จะโหลด Visual Studio Code ในเบราว์เซอร์โดยเปิดโปรเจ็กต์นี้ ตอนนี้คุณสามารถเขียนโครงการของคุณโดยใช้พลังเต็มรูปแบบของ VS Code รวมถึงการเติมข้อความอัตโนมัติและ IntelliSense
- เมื่อเสร็จแล้ว ไปที่ตัวเลือก “การควบคุมแหล่งที่มา” ในโค้ด VS ป้อนข้อความยืนยันแล้วคลิกเครื่องหมายถูก สิ่งนี้ยืนยันการเปลี่ยนแปลงที่เก็บ
- คุณสามารถดูว่าผลิตภัณฑ์ของคุณพร้อมจำหน่ายทางออนไลน์เมื่อใดบนแท็บ “การดำเนินการ” ของที่เก็บของคุณ ตรวจสอบเวิร์กโฟลว์ “การสร้างและการปรับใช้หน้า” มันแสดงสปินเนอร์สีเหลืองจนกว่าหน้าจะพร้อม เมื่อเปลี่ยนเป็นเครื่องหมายถูกสีเขียว หน้าของคุณก็พร้อม
สำหรับการสาธิตวิดีโอ รหัสมีอยู่ที่ https://github.com/codepo8/greencircle และสามารถดูเวอร์ชันในเบราว์เซอร์ได้ที่ https://codepo8.github.io/greencircle โดยที่ `codepo8′ คือผู้ใช้ GitHub ของฉัน ชื่อและ `greencircle’ ชื่อของที่เก็บ
ทำไมไม่ codepen, jsbin, codesandbox, jsfiddle… ?
มีหลายสิบแห่งที่คุณสามารถโฮสต์และแก้ไขโครงการออนไลน์ได้ และทุกแห่งก็มีข้อดีและปัญหาอยู่ในนั้น ฉันสนุกกับวิธีนี้จริงๆ เพราะมันให้ฟังก์ชันการทำงานเต็มรูปแบบของ Visual Studio Code และโปรเจ็กต์ของฉันอยู่ในการควบคุมเวอร์ชัน ฉันเป็นเจ้าของรหัสทั้งหมดและสามารถดาวน์โหลดได้ทุกเมื่อที่ต้องการ ฉันยังสามารถให้คนอื่นแยกและเปลี่ยนมันได้
คุณสมบัติเหล่านี้จำนวนมากยังมีอยู่ในแพลตฟอร์มอื่น ๆ และฉันชอบที่คุณสามารถดูผลลัพธ์ของโครงการของคุณได้ทันทีเมื่อคุณเขียนโค้ด แต่สิ่งนี้ให้ความรู้สึกเหมือนเป็นโซลูชันแบบ end-to-end ที่ยอดเยี่ยมซึ่งต้องการการเข้าสู่ระบบเพียงครั้งเดียวที่ฉันต้องการสำหรับงานส่วนใหญ่ อนึ่ง หากคุณต้องการให้แสดงโปรเจ็กต์ของคุณใน VS Code ในเบราว์เซอร์ทันที คุณยังสามารถติดตั้งส่วนขยาย “Codeswing” :https://ift.tt/TRh5XqO
