Git สำหรับการพัฒนาเว็บ: ทำความรู้จักกับเวิร์กโฟลว์ทั่วไปของโครงการ

การพัฒนาเว็บเกี่ยวข้องกับการทำงานร่วมกันอย่างแท้จริง ส่วนใหญ่คุณจะทำงานร่วมกับนักพัฒนาคนอื่น ๆ และแม้ว่าคุณจะไม่ทำก็ตาม Git สามารถช่วยคุณได้หลายวิธี

Git คือซอฟต์แวร์ที่ควบคุมเวอร์ชันของแอปพลิเคชันที่เราทำ มันถูกใช้โดยนักพัฒนาเดี่ยว บริษัทใหญ่ และแม้แต่ Linux ซึ่งเป็นโครงการโอเพ่นซอร์สที่ใหญ่ที่สุดในโลก

ในฐานะนักพัฒนาเว็บ สิ่งสำคัญอย่างยิ่งคือต้องรู้วิธีใช้ Git เพื่อการพัฒนาเว็บอย่างถูกต้อง เราไม่เพียงแค่พูดถึง "git add", "git commit" และ "git push" คุณควรทราบขั้นตอนการทำงานทั้งหมดในการสร้างโครงการเว็บด้วย Git

ยังไม่มั่นใจ? เริ่มกันเลย!

ทำไมต้องใช้ Git?

นี่เป็นเพียงเหตุผลบางส่วนในการเริ่มใช้ Git:

• องค์กร: แทนที่จะจัดการโครงการของคุณในโฟลเดอร์เช่น v1, v2, v3 ฯลฯ คุณมีโครงการหนึ่งที่มีฐานข้อมูลพิเศษที่เก็บไฟล์เวอร์ชันทั้งหมด
• การทำงานร่วมกัน: Git ช่วยให้คุณและคนอื่นๆ ทำงานในโครงการเดียวกันได้ในเวลาเดียวกันโดยไม่ทำให้เกิดข้อขัดแย้ง
• โอเพ่นซอร์ส: Git เป็นโอเพ่นซอร์ส แต่ก็เป็นเครื่องมือที่เราใช้ในการทำงานร่วมกันและสร้างซอฟต์แวร์โอเพ่นซอร์สที่ยอดเยี่ยม ทุกคนสามารถขอดึงโครงการโอเพ่นซอร์สบนแพลตฟอร์มเช่น GitHub หรือ Bitbucket
• ความยืดหยุ่นของแพลตฟอร์ม: ทุกวันนี้ คุณมีบริการโฮสติ้ง Git ที่แตกต่างกันมากมายให้เลือก เช่น Gitlab, GitHub, Bitbucket และ SourceForge คุณยังสามารถใช้โซลูชันแบบโฮสต์เองสำหรับทุกโครงการของคุณ
• สำรองข้อมูลอย่างง่ายดาย: เลิกทำข้อผิดพลาดได้อย่างง่ายดาย และไม่สูญเสีย codebase ของโปรเจ็กต์ของคุณ

เราได้พูดถึงคำว่า GitHub ไปแล้ว 1-2 ครั้ง แล้ว Git กับ GitHub ต่างกันอย่างไร?

นี่อาจทำให้คุณสับสนหากคุณยังใหม่กับ Git โดยสิ้นเชิง พูดง่ายๆ ก็คือ Git และ GitHub เป็นเครื่องมือที่เกี่ยวข้องกันแต่ต่างกัน

Git คือระบบควบคุมเวอร์ชัน (VCS) ที่เราใช้เพื่อควบคุมการเปลี่ยนแปลงของไฟล์ ในขณะที่ GitHub เป็นบริการที่เราใช้เพื่อจัดเก็บไฟล์โครงการและประวัติ Git ทางออนไลน์ (อยู่ในโฟลเดอร์ .git/ ของโครงการของคุณ) .

Git ได้รับการติดตั้งในเครื่องของคุณ หากไม่มีบริการโฮสติ้งเช่น GitHub หรือ GitLab การทำงานร่วมกันกับนักพัฒนารายอื่นจะเป็นเรื่องยากมาก

GitHub เพิ่มพลังให้ Git ด้วยการเพิ่มคุณสมบัติอื่นๆ ที่ปรับปรุงการทำงานร่วมกัน เช่น การโคลน การฟอร์ก และการรวม เครื่องมือทั้งสองนี้รวมกันเพื่อให้คุณมีระบบนิเวศที่เป็นมิตรในการพัฒนา จัดการ และแสดงโครงการของคุณต่อผู้อื่น

Git พื้นฐานสำหรับเวิร์กโฟลว์การพัฒนาเว็บ

ในส่วนถัดไป คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับเวิร์กโฟลว์ Git สำหรับการพัฒนาเว็บผ่านการปฏิบัติจริง

ข้อกำหนดในการติดตั้ง

หากคุณยังไม่ได้ติดตั้ง Git นี่เป็นเวลาที่เหมาะสมที่สุด ติดตั้งง่ายและพร้อมใช้งานในระบบปฏิบัติการส่วนใหญ่

ดาวน์โหลดจากหน้าดาวน์โหลดอย่างเป็นทางการ หรือติดตั้งด้วยตัวจัดการแพ็คเกจหากคุณใช้ Linux หรือ macOS:

ในการทดสอบว่าทุกอย่างเรียบร้อยดีกับการติดตั้ง ให้เปิดเทอร์มินัลบน Linux หรือ macOS โดยค้นหา “Terminal” ในเมนูแอปพลิเคชันของคุณ หรือเปิด Git bash บน Windows (ซึ่งติดตั้งมาพร้อมกับ Git เป็นค่าเริ่มต้น)

จากนั้นพิมพ์:

 git --version

หากคุณได้รับเวอร์ชัน Git เป็นการตอบกลับ คุณก็พร้อมแล้ว

เราจำเป็นต้องมีบัญชี GitHub ด้วย ดังนั้นอย่าลืมลงทะเบียนหรือเข้าสู่ระบบ GitHub:

เมื่อคุณติดตั้ง Git และลงชื่อเข้าใช้บัญชี GitHub แล้ว คุณสามารถไปยังส่วนถัดไปได้

เวิร์กโฟลว์ Git พื้นฐานสำหรับโครงการความร่วมมือ

ดังที่ได้กล่าวไว้ก่อนหน้านี้ ส่วนใหญ่คุณจะไม่พัฒนาโครงการเดี่ยว การทำงานร่วมกันเป็นทักษะสำคัญ และ Git และ GitHub ช่วยให้เราสร้างกระบวนการที่เรียบง่ายแต่มีประสิทธิภาพ

เวิร์กโฟลว์ทั่วไปของโปรเจ็กต์ Git มีลักษณะดังนี้:

1. รับสำเนาของโปรเจ็กต์ในเครื่องโดยการโคลนที่เก็บหรือ repo หากคุณกำลังทำงานร่วมกัน คุณควรแยก repo ก่อน
2. สร้างสาขาด้วยชื่อตัวแทนของฟีเจอร์ที่คุณจะใช้งาน
3. แก้ไขโครงการ
4. ยอมรับการเปลี่ยนแปลงในเครื่องของคุณ
5. ผลักดันการเปลี่ยนแปลงไปยัง repo ระยะไกล
6. สร้างคำขอดึงไปยัง repo เดิม
7. รวมและแก้ไขข้อขัดแย้งในสาขาหลักของ repo เดิม

กวดวิชา

ตอนนี้ได้เวลาทำให้มือของเราสกปรกแล้ว!

ในคู่มือนี้ คุณจะต้องสร้างเว็บไซต์ HTML อย่างง่าย เพื่อวัตถุประสงค์ในทางปฏิบัติ คุณจะต้องแยกโปรเจ็กต์ฐานจากที่เก็บไซต์ HTML ไปยังบัญชี GitHub ของคุณ ซึ่งสามารถทำได้สำหรับที่เก็บสาธารณะที่มีอยู่ทั้งหมด

ในการแยกไซต์ HTML ไปที่ที่เก็บ GitHub นี้แล้วคลิกที่ปุ่ม Fork ที่ด้านบนขวาของหน้า:

ตอนนี้คุณมีทางแยกของ repo ดั้งเดิมที่มีให้ในบัญชี GitHub ของคุณเท่านั้น เป็น repo เดียวกัน - จนกว่าคุณจะเริ่มกระทำการเปลี่ยนแปลง

อย่างที่คุณเห็น การ Fork repo สาธารณะใช้เวลาเพียงไม่กี่วินาที วิธีนี้เหมาะสำหรับโครงการโอเพนซอร์ซ แต่อย่าลืมว่าหากองค์กรของคุณมี repo ส่วนตัว คุณจะต้องรวมเป็นผู้ร่วมให้ข้อมูลก่อนที่จะพยายามแยกออก

ได้เวลานำส้อมของคุณไปยังเครื่องในพื้นที่ของคุณ ในการดำเนินการนี้ คุณต้องโคลนด้วยคำสั่ง git clone ซึ่งดึงข้อมูลที่เก็บ Git จากเซิร์ฟเวอร์ระยะไกล:

 git clone remote_url

คุณต้องแทนที่ remote_url ด้วย URL ของส้อมของคุณ ในการรับ URL ที่แน่นอนของ GitHub repo ให้ไปที่หน้าและคลิกที่ Code จากนั้นเลือก SSH และคัดลอกลิงก์ที่ให้:

คำสั่งที่คุณจะเรียกใช้เพื่อโคลน repo ที่แยกจากกันคือ:

 git clone [email protected]:yourusername/HTML-site.git

เมื่อคุณโคลน repo คุณจะได้โฟลเดอร์ที่มีชื่อ ภายในโฟลเดอร์นั้นคือซอร์สโค้ดของโปรเจ็กต์ (ในกรณีนี้คือไซต์ HTML) และ Git repo ซึ่งอยู่ภายในโฟลเดอร์ชื่อ .git

คุณสามารถดูรายการไฟล์ภายในไดเร็กทอรีใหม่ได้โดยการเปิดโฟลเดอร์ใหม่ในตัวจัดการไฟล์แบบกราฟิก หรือโดยการแสดงรายการโดยตรงจากเทอร์มินัลด้วย ls หรือ dir :

 # Linux/macOS ls HTML-site/ # Windows dir HTML-site\ .git images .gitignore index.html LICENSE README.md styles.css

ไซต์ HTML นี้ง่ายมาก ใช้ Bootstrap เพื่อวัตถุประสงค์ในทางปฏิบัติและรูปภาพบางส่วนจาก Unsplash ซึ่งคุณสามารถดาวน์โหลดภาพฟรีสำหรับไซต์ของคุณได้

หากคุณเปิดไฟล์ index.html ในเบราว์เซอร์ คุณจะเห็นหน้าธรรมดาที่มีรูปภาพสองสามภาพ:

ถึงเวลาที่จะเล่นกับโครงการนี้ รู้สึกว่างเปล่ามากและบางทีส่วนหัวที่มีชื่อของไซต์อาจช่วยปรับปรุงประสบการณ์ของผู้ใช้ได้

ในการทำเช่นนั้น ให้ป้อนไดเร็กทอรี ไซต์ HTML และสร้างสาขาที่ชื่อ header ในสาขาใหม่นี้ เราสามารถแก้ไขไฟล์ทั้งหมดและใช้โค้ดได้มากเท่าที่เราต้องการ เพราะจะไม่ส่งผลต่อสาขาหลัก (ดั้งเดิม)

รันคำสั่งต่อไปนี้:

ลงทะเบียนเพื่อรับจดหมายข่าว

ต้องการทราบว่าเราเพิ่มการเข้าชมของเรามากกว่า 1,000% ได้อย่างไร

เข้าร่วมกับคนอื่นๆ อีกกว่า 20,000 คนที่ได้รับจดหมายข่าวรายสัปดาห์พร้อมเคล็ดลับ WordPress จากวงใน!

สมัครสมาชิกตอนนี้

 git checkout -b header

การดำเนินการนี้จะสร้างสาขาชื่อ "ส่วนหัว" และเปลี่ยนให้คุณเป็นสาขาหลังจากนี้ เทียบเท่ากับ:

 git branch header git checkout header

เพื่อยืนยันทุกอย่างเป็นไปด้วยดี ให้เรียกใช้:

 git status # On branch header # nothing to commit, working tree clean

คุณจะเห็นว่าคุณถูกย้ายจากสาขา "หลัก" เป็นสาขา "ส่วนหัว" แต่แผนผังการทำงานยังคงสะอาดอยู่ เนื่องจากเรายังไม่ได้แก้ไขไฟล์ใดๆ

ในโปรแกรมแก้ไขโค้ดที่คุณชื่นชอบ ให้เปิดไฟล์ index.html ในโครงการที่มีสาขาของคุณ ไฟล์นี้มีลิงก์ไปยัง Bootstrap 5 เพื่อให้เราสามารถใช้ประโยชน์จากส่วนประกอบที่พร้อมใช้งานของเฟรมเวิร์กได้

เพิ่มโค้ดต่อไปนี้ในไฟล์ index.html ภายในแท็ก <body> และเหนือคอนเทนเนอร์รูปภาพ:

 <header> <nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <span class="navbar-brand mb-0 h1">HTML site</span> </div> </nav> </header>

หล่อขึ้นเยอะ! อย่าลังเลที่จะทำสาขาอื่น ๆ และการเปลี่ยนแปลงที่คุณต้องการ

เมื่อคุณแก้ไขโปรเจ็กต์เสร็จแล้ว ก็ถึงเวลายืนยันการเปลี่ยนแปลงทั้งหมดกับ repo ในเครื่องของคุณ ภายในไดเร็กทอรีโครงการ ให้พิมพ์สิ่งต่อไปนี้ลงในเทอร์มินัลของคุณ:

 git add --all git commit -m "Added simple header in index.html file"

เมื่อคุณเริ่มโครงการครั้งแรก เป็นเรื่องปกติที่จะมีข้อความยืนยัน แต่เมื่อเวลาผ่านไปและโฟกัสที่เปลี่ยนไป คุณภาพของข้อความมักจะลดลง ตรวจสอบให้แน่ใจว่าได้ปฏิบัติตามแนวทางการตั้งชื่อที่ดี

ตอนนี้คุณได้ตกลงกับ repo ในเครื่องของคุณแล้ว (ซึ่งยังคงมีอยู่ในคอมพิวเตอร์ของคุณเท่านั้น) ก็ถึงเวลาที่จะส่งไปยังที่เก็บระยะไกล

หากคุณพยายามส่งคอมมิตตามปกติ มันจะไม่ทำงานเพราะคุณกำลังทำงานบนสาขา header คุณต้องตั้งค่าสาขาต้นน้ำสำหรับ header :

 git push --set-upstream origin header

ตั้งแต่วันที่ 13 สิงหาคม 2021 เป็นต้นไป GitHub กำหนดให้ใช้การตรวจสอบสิทธิ์ SSH ดังนั้นตรวจสอบให้แน่ใจว่าคุณได้ตั้งค่าคีย์อย่างถูกต้อง

หลังจากนี้ คุณควรจะเห็นสาขาใหม่ที่ชื่อ header ในที่เก็บ forked ของคุณ (เช่น https://github.com/yourusername/HTML-site/branches ):

ในการสร้างคำขอดึงไปยัง repo ดั้งเดิม ให้คลิกที่ Compare ลงในส่วน Active Branch

สิ่งนี้จะนำทางคุณไปสู่คำขอดึง ซึ่งคุณจะต้องเลือกสาขา (ต้นทางหรือทางแยกของคุณ) ที่คุณต้องการรวมเข้าด้วยกัน โดยค่าเริ่มต้น จะแสดงตัวเลือกในการผสานกับที่เก็บฐาน:

เมื่อคุณคลิกตัวเลือกคำขอดึง คุณจะต้องเขียนคำอธิบายสั้นๆ เกี่ยวกับการเปลี่ยนแปลงที่ทำขึ้น เช่นเดียวกับการกระทำก่อนหน้าของคุณ อีกครั้งหนึ่ง พยายามกระชับและสื่อความหมาย:

คลิกที่ปุ่ม สร้างคำขอดึง และรอให้เจ้าของที่เก็บฐานยอมรับหรือให้ข้อเสนอแนะเกี่ยวกับการเปลี่ยนแปลงของคุณ

ขอแสดงความยินดี คุณเพิ่งเสร็จสิ้นขั้นตอนทั้งหมดของเวิร์กโฟลว์ Git ทั่วไปสำหรับการพัฒนาเว็บ!

นี่เป็นตัวอย่างพื้นฐานจริงๆ แต่ตรรกะยังครอบคลุมโครงการทุกขนาด ตรวจสอบให้แน่ใจว่าคุณใช้เวิร์กโฟลว์นี้อย่างใกล้ชิดในโครงการความร่วมมือที่ใหญ่กว่าด้วย

วิธีใช้ Git ที่ Kinsta

หากคุณเป็นผู้ใช้ Kinsta คุณมีสองวิธีในการใช้ Git และ GitHub จากภายในพอร์ทัล MyKinsta ของคุณ

เริ่มจากตัวเลือกแรกกันก่อน คุณสามารถ SSH เข้าและดึง repo จากบริการโฮสติ้ง Git เช่น GitHub, Gitlab หรือ Bitbucket ได้อย่างง่ายดาย

ในการดำเนินการนี้ ไปที่แท็บ ไซต์ ของคุณ เลือกไซต์ และไปที่ส่วนรายละเอียด SSH ของคุณ แล้วคัดลอกคำสั่งเทอร์มินัล SSH

เข้าสู่ระบบผ่าน SSH ไปยังไซต์ของคุณโดยวางคำสั่งด้านบนในเทอร์มินัลของคุณ และเข้าสู่โฟลเดอร์สาธารณะของไซต์ของคุณ (อยู่ใต้ /www/yoursitename/ ) นี่คือตำแหน่งของไฟล์ WordPress ทั้งหมดของคุณ ดังนั้นคุณจึงสามารถดึง Git repo ที่มีธีมหรือปลั๊กอินแบบกำหนดเองที่คุณกำลังทำงานอยู่ได้

นี่คือวิธีที่คุณจะดึง Git repo ในคำสั่งง่ายๆ:

 ssh [email protected] -p PORT "cd /www/my_site/public && git pull https://github.com/user/repo.git"

ตอนนี้ การแนะนำคุณลักษณะการปรับใช้ GitHub ใหม่ที่ Kinsta คุณสามารถปรับใช้ไซต์ WordPress แบบเต็มได้จากที่เก็บ GitHub

GitHub repo ของคุณควรมีสำเนาของไฟล์หลักของ WordPress และแน่นอน เนื้อหาของไซต์ของคุณอยู่ในโฟลเดอร์ wp-content

ลองดูตัวเลือกนี้อย่างรวดเร็ว

ไปที่ไซต์ของบริษัทคุณและสร้างสภาพแวดล้อมการจัดเตรียม จะใช้เวลาไม่เกินสองสามนาที

เมื่อคุณอยู่ในไซต์การแสดงละคร ให้ไปที่แท็บการทำให้ ใช้ งานได้แล้วคลิกปุ่ม เริ่มการตั้งค่า คุณจะเห็นโมดอล GitHub ที่จะให้ Kinsta เชื่อมต่อกับบัญชี GitHub ของคุณ

ตอนนี้ เลือก repo ที่คุณจะดึงไซต์ของคุณออกมา

สุดท้าย ปรับใช้ไซต์ของคุณและเยี่ยมชมผ่าน URL ไซต์การแสดงละครของคุณ

คุณลักษณะนี้ยังอยู่ในช่วง เบต้า แต่ในไม่ช้าผู้ใช้ Kinsta ทุกคนจะสามารถเข้าถึงได้

การใช้ Git และ Kinsta อาจเป็นการผสมผสานที่ทรงพลังหากคุณรู้จักใช้ได้ดี แม้ว่าบทช่วยสอนของเราจะแสดงเพียงตัวอย่างง่ายๆ แต่คุณสามารถเรียนรู้เพิ่มเติมได้จากบทความฐานความรู้ Git ของเรา

สรุป

ทุกวันนี้ Git เป็นเครื่องมือที่ต้องเรียนรู้สำหรับการพัฒนาเว็บ เนื่องจากส่วนใหญ่คุณจะร่วมมือกับผู้อื่นเพื่อสร้างโครงการที่ดีที่สุดเท่าที่คุณจะทำได้

ในบทความนี้ เราได้พูดถึงเหตุผลสำคัญบางประการในการใช้ Git ในโครงการของคุณ และเราได้แสดงให้คุณเห็นถึงขั้นตอนการทำงานพื้นฐานของการทำงานร่วมกันในที่เก็บ Git

Git เป็นเครื่องมือที่ทรงพลังมากที่คุณสามารถขยายการใช้งานได้แม้กระทั่งกับโฮสติ้ง WordPress ดังนั้นจึงเป็นประโยชน์ต่อคุณในการเรียนรู้และใช้งานมันเป็นส่วนหนึ่งของคลังแสงทักษะการพัฒนาเว็บของคุณ

คุณมีข้อเสนอแนะอื่นๆ ในการปรับปรุงเวิร์กโฟลว์ Git พื้นฐานสำหรับการพัฒนาเว็บหรือไม่ แจ้งให้เราทราบในส่วนความคิดเห็น!