triumphmayflowerclub.com

triumphmayflowerclub.com

เว็บไซต์ใหม่สำหรับ Triumph Mayflower Club เปิดตัวในเดือนมีนาคม 2561

ลิงค์•เวอร์ชัน•แผนงาน•คู่มือการพัฒนา•การปรับใช้•การติดต่อ•ลิขสิทธิ์

Triumph Mayflower Club เป็นองค์กรที่อุทิศตนเพื่อการอนุรักษ์รถยนต์คลาสสิกในปี 1950, The Mayflower โดยผู้ผลิตรถยนต์ของอังกฤษ สโมสรก่อตั้งขึ้นในปี 2517 และทำการโจมตีครั้งแรกในการโจมตีทางเว็บของเวิลด์ไวด์เมื่อปี 2548 จากนั้นฉัน (Andi, Project Riever) ได้รับหน้าที่ในปี 2560 เพื่อสร้างเว็บไซต์ใหม่ตั้งแต่เริ่มต้นเมื่อพ่อแม่ของฉันกลายเป็นสมาชิก คลิกที่นี่หากคุณสนใจที่จะอ่านเพิ่มเติมเกี่ยวกับรถและสโมสร

เว็บไซต์ใหม่นี้เขียนขึ้นในวานิลลา HTML5 สำหรับมาร์กอัปเอกสาร CSS3 สำหรับการจัดแต่งทรงผม JavaScript (ES6) จำนวนเล็กน้อยและถูกสร้างขึ้นโดยใช้ Jekyll เป็นเครื่องกำเนิดไซต์แบบคงที่เพื่อลดการทำซ้ำรหัส มันถูกออกแบบมาเพื่อทำงานในเบราว์เซอร์“ Evergreen” ที่สำคัญ (เช่น Microsoft Edge ที่ใช้โครเมียม, Google Chrome, Mozilla Firefox, Apple Safari หรือ Opera), เดสก์ท็อปหรือมือถือโดยไม่มีปัญหา

สถานการณ์โฮสติ้งในปัจจุบันสำหรับไซต์การผลิตนั้นเหมาะอย่างยิ่งสำหรับการโฮสต์ไซต์ HTML แบบคงที่ (ใช่ข้อ จำกัด ด้านงบประมาณของคลับเฉพาะ) ดังนั้นจึงไม่สามารถโฮสต์สิ่งอื่นใดนอกเหนือจากนั้นเช่นแอปพลิเคชั่นหลักของ ASP.NET เพื่อให้สามารถใช้โซลูชันเซิร์ฟเวอร์ไคลเอนต์ที่ซับซ้อนมากขึ้น

สารบัญ

• ลิงค์
• รุ่น
  • การกำหนดหมายเลข
  • การเปิดตัวครั้งใหญ่
• แผนงาน
  • เนื้อหา
  • คุณสมบัติ
  • เกี่ยวกับเทคนิค
• คู่มือการพัฒนา
  • ข้อกำหนดเบื้องต้น
    • Microsoft Windows
    • git สำหรับ windows
    • การตั้งค่า GitHub
    • ที่เก็บท้องถิ่น
      • โคลน
      • กำหนดค่า
    • Jekyll
  • ใช้งานเว็บไซต์ในพื้นที่
  • เครื่องมือที่แนะนำ
    • เบราว์เซอร์ที่ใช้โครเมียม
    • รหัสสตูดิโอภาพ
    • Microsoft Word
    • Adobe Photoshop
  • ผลงาน
• การปรับใช้
• ติดต่อ
• ลิขสิทธิ์

ลิงค์

เว็บไซต์เวอร์ชันโฮสต์ที่แตกต่างกันสามารถพบได้ในสถานที่ต่อไปนี้ซึ่งเซิร์ฟเวอร์ Canary เป็นเว็บไซต์ GitHub ที่สร้างขึ้นโดยอัตโนมัติซึ่งใช้ master ล่าสุดพื้นที่การแสดงละครเป็นโดเมนย่อยของเว็บไซต์สดที่เราปรับใช้ด้วยตนเองเมื่อเราต้องการทดสอบคุณสมบัติใหม่

• - Canary: https://stack-in-a-box.github.io/triumphmayflowerclub.com
• - Staging: https://beta.triumphmayflowerclub.com/
• การผลิต: https://www.triumphmayflowerclub.com/

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

• ☠ มรดก: https://legacy.triumphmayflowerclub.com/

รุ่น

ระบบ GitHub Reasees ใช้เพื่อเพิ่มรุ่นของ TAG และเผยแพร่เผยแพร่และเป็นแหล่งเดียวของความจริงสำหรับสิ่งที่เว็บไซต์ปัจจุบันคือ ไม่มีหมายเลขเวอร์ชันที่จัดขึ้นอย่างชัดเจนในไฟล์ของ repo

เนื่องจาก codebase นี้เป็นเว็บไซต์จึงไม่จำเป็นต้องรักษาสาขาการเปิดตัวใด ๆ เพื่อแก้ไข backport เนื่องจากจะมีเพียงหนึ่งเว็บไซต์สดซึ่งจะมีการเปลี่ยนแปลงล่าสุดอยู่เสมอ

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

การกำหนดหมายเลข

Semver ถูกนำมาใช้แม้ว่าจะเป็นรูปแบบการกำหนดหมายเลขเวอร์ชันสำหรับเว็บไซต์อย่างหลวม ๆ ชิ้นส่วน ที่สำคัญ ผู้เยาว์ และ แพทช์ ถูกกระแทกเพื่อการเปิดตัวตามประเภทของการเปลี่ยนแปลงต่อไปนี้เป็น codebase:

• Major: การเขียนใหม่ที่สมบูรณ์หรือมีนัยสำคัญของเว็บไซต์ที่เทคโนโลยีพื้นฐานที่ใช้มีการเปลี่ยนแปลงเช่นการย้ายจากเว็บไซต์คงที่ที่ใช้ Jekyll ไปยังแอปพลิเคชันเว็บ react.js ที่ประกาศหรือแม้แต่ย้ายไปยังสถาปัตยกรรมลูกค้าเซิร์ฟเวอร์โดยแนะนำแอปพลิเคชันเซิร์ฟเวอร์หลัก ASP.NET การรีเฟรชการออกแบบที่สำคัญของภาพของเว็บไซต์ก็จะตกอยู่ในหมวดหมู่นี้
• ผู้เยาว์: สำหรับการอัปเดตฟีเจอร์ที่สำคัญ (เช่นใหม่) ฉันมักจะทำงานกับคุณสมบัติใหม่ที่สำคัญสองสามอย่าง (ทั้งในแง่ของการทำงานหรือส่วนใหม่ของเว็บไซต์) ระหว่างสโมสร AGM ดังนั้นความถี่ของการอัปเดตเหล่านี้มักจะเป็นประจำปี
• Patch: สำหรับทุกสิ่งทุกอย่างรวมถึง แต่ไม่จำเป็นต้อง จำกัด เฉพาะ: การเผยแพร่บทความข่าวเนื้อหาใหม่การแก้ไขการพิมพ์ผิดการแก้ไขข้อบกพร่องและลิงก์ที่เสียการแก้ไขข้อมูลที่ไม่ถูกต้องและคุณสมบัติใหม่เล็กน้อย

การเปิดตัวครั้งใหญ่

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

• v1.0 - เปิดตัวเว็บไซต์ใหม่:
  • เว็บไซต์ใหม่ที่ทันสมัยที่ใช้ Jekyll ใหม่สำหรับเบราว์เซอร์เดสก์ท็อปที่เขียวชอุ่มตลอดปี
  • สร้างขึ้นจากพื้นดินเพื่อแทนที่มรดกอายุทั้งหมด
  • การออกแบบภาพตามภาษา skeuomorphic ที่เล่นโวหารเลียนแบบโต๊ะทำงาน
  • ส่วนต่าง ๆ รวมถึงประวัติข่าวเหตุการณ์ภาพถ่ายเอกสารร้านค้าผู้ติดต่อและลิงค์
  • การสร้างขั้นตอนเดียวโดยใช้ Jekyll ที่บรรทัดคำสั่ง
• v1.1 - คลังข่าวและภาพที่เสร็จแล้ว:
  • ระบบสไตล์เก็บถาวรสำหรับการจัดระเบียบรายการข่าวที่เติบโตขึ้นเรื่อย ๆ ของเรา
  • เสร็จสิ้นและรวมสินทรัพย์กราฟิกที่ไม่สมบูรณ์โดยการเปิดตัวของ v1.0
  • เพิ่มเนื้อหาที่เหลือลงในส่วนท้ายซึ่งมีไว้สำหรับ v1.0
  • หน้า Facebook ใหม่ที่สร้างโดย Andi และ Mark Smith (เจ้าหน้าที่ประชาสัมพันธ์)
  • บทความข่าวเทมเพลตคำศัพท์เพื่อช่วยเหลือผู้มีส่วนร่วมในการส่งเนื้อหาข่าว
  • แบบฟอร์มการเป็นสมาชิกที่สามารถแก้ไขได้เป็น PDFs ก้าวสู่การลงทะเบียนออนไลน์อย่างสมบูรณ์
  • การปฏิบัติตาม GDPR เต็มรูปแบบและบทความข่าวสนับสนุน
  • 2019 รายงานการประชุมสามัญประจำปีที่เผยแพร่
• VNEXT- พื้นที่สมาชิกเท่านั้น (WIP):
  • -

แผนงาน

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

เนื้อหา

• การเก็บถาวรที่สมบูรณ์ของนิตยสารทุกฉบับของสโมสร
• คอลเลกชันที่ครอบคลุมของเอกสารทางเทคนิคและคำแนะนำ
• มีรายงานการประชุมการประชุมสามัญประจำปีที่มีอยู่
• ห้องสมุดภาพถ่ายประวัติศาสตร์คุณภาพสูง
• รูปภาพของสมาชิกจำนวนมากที่จะเพิ่ม

คุณสมบัติ

• การค้นหาที่ใช้พลังงานจากไคลเอนต์ง่าย
• พื้นที่สมาชิกเท่านั้น
• ระบบฟอรัม
• ไดเรกทอรีสมาชิก
• เค้าโครงมือถือที่เหมาะสม
• เครื่องมือการเขียนสไตล์ CMS ตามความต้องการ
• การบูรณาการอีคอมเมิร์ซ (การเป็นสมาชิกอะไหล่ ฯลฯ )
• OCR ที่สร้างไว้ล่วงหน้าของ PDFs และรูปภาพ
• เครื่องมือค้นหาฝั่งเซิร์ฟเวอร์ที่ทรงพลัง
• พุชการแจ้งเตือนสำหรับการอัปเดตเนื้อหาใหม่
• การลงทะเบียนรายชื่อผู้รับจดหมายและระบบการจัดส่ง
• การรวมกราฟเปิดสำหรับการแบ่งปันไปยังโซเชียลมีเดีย
• จุดยึดส่วนหัวอัตโนมัติ (ปรากฏบนโฮเวอร์)
• คุณสมบัติเล็กน้อย:
  • ป้ายหมายเลขสมาชิก
  • คลิกเพื่อซูมบนรูปภาพ
  • วิดเจ็ตฟีดโซเชียลมีเดีย
  • แชร์ลิงก์

เกี่ยวกับเทคนิค

• ไฟล์ Markdown แทน HTML สำหรับบทความข่าวใหม่
• การพัฒนาสคริปต์การปรับใช้อัตโนมัติ
• การจัดส่งอย่างต่อเนื่อง (CD) โดยใช้การกระทำของ GitHub
• ระบบรับรองความถูกต้องของผู้ใช้ฝั่งไคลเอ็นต์ใหม่
• ภาษาที่ได้รับการปรับปรุงเช่นเขี้ยวพิมพ์, typeScript, c♯
• การโยกย้ายจากการสร้างไซต์คงที่ไปยังแอพ React.js
• การโยกย้ายไปยังสถาปัตยกรรมเซิร์ฟเวอร์ลูกค้า
• สอดคล้องกับมาตรฐานการเข้าถึง
• การเพิ่มประสิทธิภาพสินทรัพย์และการจัดส่ง
• บังคับพฤติกรรมการแคชเบราว์เซอร์ที่สอดคล้องกัน (ถ้าเป็นไปได้)
• ลดการทำซ้ำรหัสโดยการปรับโครงสร้างใหม่โดยใช้ Jekyll “ รวม” และ “ เลย์เอาต์” มากขึ้น
• ทำให้ repo นี้เป็นสถานที่ที่ยอดเยี่ยมสำหรับนักพัฒนาเว็บที่มีประสบการณ์เพื่อตัดฟัน
• มีส่วนร่วมในโอเพนซอร์สโดยการหมุนเทคโนโลยีที่พัฒนาขึ้นใหม่ในโครงการสแตนด์อโลน
• ส่งผ่าน HTTPS แทน HTTP (ไม่สำคัญในขณะที่เพียงแค่ไซต์คงที่)

คู่มือการพัฒนา

ฉันพยายามเขียน readme นี้ในลักษณะที่ผู้ที่ไม่คุ้นเคยกับการเข้ารหัสมีโอกาสต่อสู้ที่จะมีส่วนร่วมในการพัฒนาของเว็บไซต์หากพวกเขามีความโน้มเอียง เช่นสมาชิกสโมสร เช่นนี้หากคุณเป็นนักพัฒนาอยู่แล้วคำแนะนำเหล่านี้บางอย่างอาจดูมากเกินไปเล็กน้อยดังนั้นคุณอาจข้ามองค์ประกอบบางอย่างได้ ในทางกลับกันหากคุณไม่ได้มีความเชี่ยวชาญด้านเทคโนโลยีมากเกินไปฉันขอแนะนำให้อ่านทุกอย่างหากคุณต้องการช่วยเราออกจากไซต์-บังเอิญคุณยินดีอย่างยิ่งที่นี่อย่างแน่นอนไม่ว่าจะเป็นประสบการณ์ระดับใดก็ตาม (ถ้ามี) ดังนั้นทำไมฉันจึงพยายามที่จะชัดเจนที่สุด ส่งอีเมลถึงฉันหากคุณต้องการมีส่วนร่วม แต่สามารถเริ่มต้นใช้งานได้และฉันยินดีที่จะให้คุณไป

ข้อกำหนดเบื้องต้น

ส่วนใหญ่สิ่งเหล่านี้เป็นข้อกำหนดขั้นต่ำในขั้นต่ำสำหรับการเริ่มต้นขึ้นและวิ่ง

Microsoft Windows

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

• รับ Windows 10 ที่นี่: https://www.microsoft.com/windows/get-windows-10
• อัพเกรดคำถามที่พบบ่อย: https://support.microsoft.com/help/12435/windows-10-umgrade-faq

ฉันไม่มีปัญหากับผู้มีส่วนร่วมในการพัฒนาโดยใช้ MacOS หรือ Linux โดยสมมติว่าคุณรู้ว่าคุณกำลังทำอะไรและยึดติดกับจุดสิ้นสุดของเส้นสไตล์ Windows ( CR+LF ) ฉันอาจขยายคำแนะนำเหล่านี้ในอนาคตหากมีความต้องการเพียงพอสำหรับผู้ที่ต้องการพัฒนาบนแพลตฟอร์มอื่น ๆ - อย่าลังเลที่จะส่งคำขอดึงตัวเองเพื่ออัปเดต readme ด้วยคำแนะนำดังกล่าวหากคุณเป็นนักพัฒนาดังกล่าว!

git สำหรับ windows

Git เป็นสิ่งที่เรียกว่าระบบควบคุมเวอร์ชัน (VCS) และเป็นสิ่งที่นักพัฒนาหลายล้านคนทั่วโลกใช้ทุกวันเพื่อจัดการรหัสฐานของพวกเขา มันมีประวัติที่ครอบคลุมของการเปลี่ยนแปลงที่เกิดขึ้นกับที่เก็บซอร์สโค้ดรวมถึงเครื่องมือที่จะช่วยให้นักพัฒนาหลายคนทำงานร่วมกันใน codebase เดียวกันจากระยะไกลจากที่อาจเกิดขึ้นทุกที่บนโลก เว็บไซต์ Triumph Mayflower ใหม่กำลังได้รับการพัฒนาโดยใช้ Git เป็น VCs เพื่อให้เป็นกระดูกสันหลังที่แข็งแกร่งสำหรับกระบวนการพัฒนาของเรา ทำตามขั้นตอนเหล่านี้เพื่อติดตั้ง Git สำหรับ Windows:

1. ดาวน์โหลดและเรียกใช้ Git for Windows Installer จากเว็บไซต์ของพวกเขา:
   • https://www.gitforwindows.org/
2. ในหน้า “ การปรับสภาพแวดล้อมเส้นทางของคุณ” ให้เลือก “ Git จากบรรทัดคำสั่งและจากซอฟต์แวร์บุคคลที่ 3”
3. ในหน้า “ การเลือกหน้า HTTPS Transport Backend” ให้เลือก “ ใช้ไลบรารี OpenSSL”
4. ในหน้า “ การกำหนดค่าการแปลงบรรทัดสิ้นสุด” ให้เลือก “ เช็คเอาต์ตามที่เป็นอยู่
5. ทำส่วนที่เหลือของตัวช่วยสร้างการตั้งค่า

การตั้งค่า GitHub

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

1. ไปที่ https://www.github.com/
2. ในหน้าแรกของ GitHub ให้เลือกชื่อผู้ใช้และป้อนที่อยู่อีเมลและรหัสผ่านจากนั้นคลิก “ ลงทะเบียนสำหรับ GitHub”
3. ทำตามคำแนะนำในหน้าถัดไปเพื่อยืนยันบัญชีของคุณจากนั้นคลิก “ เข้าร่วมแผนฟรี”
4. ป้อนตัวเลือกที่เหมาะสมที่สุดสำหรับคุณในหน้า “ ยินดีต้อนรับสู่ GitHub”
5. ตรวจสอบอีเมลของคุณสำหรับอีเมลยืนยัน (ตรวจสอบให้แน่ใจว่าไม่ได้อยู่ในโฟลเดอร์“ ขยะ”/“ สแปม” ของคุณ) และคลิกลิงก์ “ ยืนยันที่อยู่อีเมล”
6. โหลด Git Bash และเรียกใช้คำสั่งต่อไปนี้ - การป้อนข้อความรหัสผ่านที่ว่างเปล่านั้นใช้ได้
   • ssh-keygen
7. คัดลอกเนื้อหาของไฟล์คีย์ SSH สาธารณะที่สร้างขึ้นไปยังคลิปบอร์ดโดยเรียกใช้:
   • cat ~/.ssh/id_rsa.pub > /dev/clipboard
8. ย้อนกลับไปที่เว็บไซต์ GitHub คลิกที่ไอคอนผู้ใช้ที่มุมบนขวาตามด้วย "การตั้งค่า"
9. บนเมนูซ้ายมือคลิก “ ปุ่ม SSH และ GPG” ตามด้วย “ คีย์ SSH ใหม่”
10. วางเนื้อหาของคลิปบอร์ดลงในฟิลด์ "คีย์" แล้วคลิก "เพิ่มคีย์ SSH"
11. ไคลเอนต์ Git Bash ของคุณจะตรวจสอบคุณโดยอัตโนมัติเมื่อคุณสื่อสารกับ GitHub ผ่านไคลเอนต์ดังกล่าว - กล่าวอีกนัยหนึ่งคุณไม่จำเป็นต้องป้อนชื่อผู้ใช้และรหัสผ่านทุกครั้งที่คุณพยายามโต้ตอบกับมัน!

ที่เก็บท้องถิ่น

สำหรับผู้ที่ไม่คุ้นเคย "พื้นที่เก็บข้อมูล" หรือ "repo" สำหรับระยะ สั้น เป็นชุดของไฟล์ซอร์สโค้ด (โดยปกติจะเก็บไว้ในเซิร์ฟเวอร์ "ระยะไกล" ส่วนกลางอยู่ที่ไหนสักแห่ง) พร้อมกับไฟล์เมตาดาต้าที่มีการจัดการ GIT ที่เฉพาะ เจาะจง ถูกสร้างขึ้นมาซึ่งทำให้พวกเขาและวิธีการรวมกลับเข้าสู่การไหลหลักของรหัสจาก "สาขา" ชั่วคราวที่นักพัฒนาสามารถทำงานในสำเนาที่แยกได้ของรหัสโดยไม่รบกวนกับ devs อื่น ๆ ที่ทำงานบน codebase เดียวกัน

โคลน

เพื่อที่จะทำการเปลี่ยนแปลงเว็บไซต์และดูผลการเปลี่ยนแปลงเหล่านั้นคุณจะต้องดาวน์โหลดซอร์สโค้ดไปยังเครื่องในเครื่องของคุณในสิ่งที่เรียกว่าการดำเนินการ "โคลน" สิ่งนี้จะดาวน์โหลดสำเนาของที่เก็บซอร์สโค้ดไปยังระบบไฟล์ของคุณและอนุญาตให้จัดการโดย GIT:

1. สร้างไดเรกทอรี (โฟลเดอร์) ที่ไหนสักแห่งในระบบไฟล์ของคุณโดยไม่มีอักขระพื้นที่ใด ๆ ในเส้นทาง (การประชุมทั่วไปในหมู่นักพัฒนาคือ C:dev ; ฉันเก็บ repos ของฉันไว้ใน C:DevelopmentRepositories )
2. โหลด Git Bash และป้อนคำสั่งต่อไปนี้เพื่อเปลี่ยนไดเรกทอรีการทำงานเป็นโฟลเดอร์ที่สร้างขึ้นใหม่ (สมมติว่าคุณเลือก C:dev ):
   • cd /c/dev
3. โคลนพื้นที่เก็บข้อมูลของเว็บไซต์โดยป้อนคำสั่งต่อไปนี้:
   • git clone [email protected]:Stack-in-a-box/triumphmayflowerclub.com.git
4. เมื่อถูกถามว่าคุณต้องการเชื่อมต่อกับ GitHub ต่อไปให้พิมพ์ yes แล้วกด [ENTER]
5. เมื่อการดำเนินการโคลนเสร็จสิ้นให้ป้อนคำสั่งต่อไปนี้เพื่อเปลี่ยนไดเรกทอรีการทำงานเป็นไดเรกทอรีรากของที่เก็บท้องถิ่น:
   • cd triumphmayflowerclub.com

กำหนดค่า

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

1. ตั้งชื่อของคุณโดยเรียกใช้คำสั่งต่อไปนี้และแทนที่ <name> ด้วยชื่อและนามสกุลของคุณ:
   • git config --local user.name "<name>"
2. ตั้งค่าที่อยู่อีเมลของคุณโดยเรียกใช้คำสั่งต่อไปนี้และแทนที่ <email> ด้วยที่อยู่อีเมลที่คุณใช้ในการลงทะเบียนบัญชี GitHub ของคุณด้วย (คุณไม่จำเป็นต้องมีใบเสนอราคาทั้งสองด้านของที่อยู่อีเมลเช่นเดียวกับการตั้งชื่อในขั้นตอนก่อนหน้าเนื่องจากไม่มีช่องว่างใด ๆ ):
   • git config --local user.email <email>

Jekyll

Jekyll เป็นสิ่งที่เรียกว่า "ผู้สร้างไซต์คงที่" มันช่วยให้เราสามารถลดปริมาณของรหัสซ้ำตลอดทั้ง codebase โดย “ แฟคตอริ่ง” ส่วนที่ใช้กันทั่วไปของหน้า (เช่นภาพชื่อ, แถบนำทาง, ส่วนท้ายของหน้า, รูปแบบหลัก ฯลฯ ) เป็นไฟล์เดียวที่อ้างอิงในหน้าเฉพาะ จากนั้นเมื่อ Jekyll เรียกใช้เป็น “ สร้าง” เว็บไซต์มันจะใส่รหัสแบบแยกส่วนออกไปในไฟล์ต้นฉบับแต่ละไฟล์ที่อ้างอิงโดยสร้างชุดไฟล์ที่สร้างขึ้นใหม่ซึ่งสามารถปรับใช้กับเซิร์ฟเวอร์สดและเปิดในเว็บเบราว์เซอร์

( หมายเหตุ: ในช่วงเวลาของการเขียนซึ่งก็คือเดือนกรกฎาคม 2563 Jekyll ไม่รองรับ WSL 2 อย่างเต็มที่เนื่องจากไม่ได้รับกิจกรรมการอัปเดตระบบทั้งหมดซึ่งจำเป็นสำหรับคุณสมบัติ jekyll serve ที่อนุญาตให้มีการสร้างใหม่โดยอัตโนมัติเมื่อใดก็ตามที่เปลี่ยนไฟล์ต้นฉบับ

1. เปิดอินสแตนซ์ PowerShell ที่ยกระดับโดยค้นหา “ PowerShell” ในช่องค้นหาบนแถบงาน (สมมติว่า Windows 10) จากนั้นกด [Shift + Enter] เพื่อเรียกใช้เป็นผู้ดูแลระบบ
2. เปิดใช้งานคุณลักษณะ Subsystem Windows สำหรับ Linux (WSL) โดยเรียกใช้คำสั่งต่อไปนี้ใน PowerShell Profting และรีบูตเมื่อได้รับแจ้งให้ทำเช่นนั้น:
   • Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux
3. เปิด Microsoft Store ค้นหาแอพ Ubuntu ติดตั้งแล้วคลิก “ เปิดใช้งาน” เมื่อติดตั้งแล้ว
4. แอพเมื่อเปิดจะใช้เวลาสองสามนาทีในการตั้งค่าเริ่มต้นภายใต้ฮูด ...
5. เมื่อได้รับแจ้งให้ป้อนชื่อผู้ใช้และรหัสผ่านที่จะใช้เมื่อจัดการกับ WSL (ไม่จำเป็นต้องเหมือนกับข้อมูลรับรองการเข้าสู่ระบบ Windows ของคุณ)
6. ที่พรอมต์ bash ซึ่งควรมีลักษณะเช่น <username>@<machine>:~$ , เรียกใช้คำสั่งต่อไปนี้เพื่ออัปเดตรายการแพ็คเกจที่สามารถติดตั้งและที่เก็บเพื่อติดตั้งได้จาก (ป้อนรหัสผ่าน UNIX ของคุณเมื่อได้รับแจ้ง) การทำเช่นนี้จะใช้เวลาสักครู่เพื่อให้เสร็จ:
   • sudo apt-get update -y && sudo apt-get upgrade -y
7. ติดตั้งทับทิมโดยเรียกใช้คำสั่ง 4 คำต่อไปนี้หลังจากอื่น ๆ :
   • sudo apt-add-repository ppa:brightbox/ruby-ng (กด [ENTER] เพื่อยืนยัน)
   • sudo apt-get update
   • sudo apt-get install ruby2.7 ruby2.7-dev build-essential (ป้อน “ y” เมื่อถูกถาม)
   • sudo gem update
8. ในที่สุดติดตั้ง Jekyll โดยเรียกใช้สิ่งต่อไปนี้:
   • sudo gem install jekyll

ใช้งานเว็บไซต์ในพื้นที่

เมื่อ Jekyll ติดตั้งเสร็จแล้วในเซสชัน Ubuntu Terminal และสมมติว่าคุณเลือก C:dev เป็นตำแหน่งของคุณสำหรับการจัดเก็บที่เก็บของคุณทำตามขั้นตอนต่อไปนี้เพื่อหมุนอินสแตนซ์ของเซิร์ฟเวอร์การพัฒนาท้องถิ่น:

1. เปลี่ยนไดเรกทอรีการทำงานเป็นไดเรกทอรีรากของที่เก็บท้องถิ่นโดยป้อนคำสั่งต่อไปนี้:
   • cd /mnt/c/dev/triumphmayflowerclub.com
2. เรียกใช้ jekyll ในโหมด “ ดู” เพื่อที่จะสร้างไซต์ขึ้นใหม่เมื่อใดก็ตามที่ไฟล์ต้นฉบับเปลี่ยนไปโดยการออกคำสั่งต่อไปนี้:
   • jekyll serve
3. รอสักครู่เพื่อให้การสร้างเริ่มต้นเกิดขึ้นจากนั้น Server running... press ctrl-c to stop. จะปรากฏขึ้น ณ จุดนี้ให้เปิดเว็บเบราว์เซอร์และนำทางไปที่ http: // localhost: 4000/เพื่อดูเว็บไซต์ที่ทำงานในพื้นที่จากสำเนาของซอร์สโค้ดในพื้นที่ของคุณ
4. เมื่อใดก็ตามที่คุณทำการเปลี่ยนแปลงไฟล์และบันทึก Jekyll จะรับสิ่งนี้และทริกเกอร์บิลด์ใหม่โดยอัตโนมัติ หากต้องการดูการเปลี่ยนแปลงของคุณในไซต์ที่โฮสต์ในพื้นที่ของคุณให้ดูในเทอร์มินัลและรอการสร้างใหม่ให้เสร็จสมบูรณ์ ( ...done in x seconds. จะปรากฏขึ้นโดยที่ x คือจำนวนวินาทีที่ใช้ในการสร้างการเปลี่ยนแปลงใหม่) ณ จุดนี้คุณสามารถรีเฟรชหน้าเว็บที่โหลดในเบราว์เซอร์ของคุณและการเปลี่ยนแปลงจะปรากฏบนเว็บไซต์

( หมายเหตุ: Jekyll ไม่ได้สังเกตเสมอเมื่อสร้างไฟล์ใหม่เอี่ยมดังนั้นหากคุณรีเฟรชเบราว์เซอร์ของคุณและหน้าไม่สามารถเข้าถึงได้ลองปิด Jekyll และเรียกใช้อีกครั้งและควรรวมหน้าใหม่ไว้ในการสร้าง)

เครื่องมือที่แนะนำ

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

เบราว์เซอร์ที่ใช้โครเมียม

คุณจะต้องใช้เว็บเบราว์เซอร์โดยเฉพาะอย่างยิ่งที่ใช้โครเมียมเช่น Microsoft Edge (รวมอยู่ใน Windows 10) หรือ Google Chrome เพื่อทดสอบการเปลี่ยนแปลงใด ๆ ที่คุณทำกับเว็บไซต์ก่อนที่จะส่งพวกเขาไปยัง Codebase

รหัสสตูดิโอภาพ

หากคุณกำลังจะแก้ไขซอร์สโค้ดของเว็บไซต์คุณจะต้องมีตัวแก้ไขข้อความที่ดี ฉันขอแนะนำให้ใช้ Visual Studio Code เนื่องจากมันทันสมัยน้ำหนักเบาข้ามแพลตฟอร์มและมีคุณสมบัติมากมายที่คุณมักจะพบใน IDE ที่เต็มเปี่ยมเช่นการเน้นทางไวยากรณ์การสมบูรณ์ของรหัส IntelliSense และระบบนิเวศขนาดใหญ่ของปลั๊กอิน สำหรับการพัฒนาเว็บไซต์อย่างง่ายโดยใช้วานิลลา HTML, CSS และจาวาสคริปต์เป็นครั้งคราวควรทำงานได้ดีมากนอกกรอบโดยไม่มีการเปลี่ยนแปลงการกำหนดค่าหรือปลั๊กอินเพิ่มเติม:

1. ดาวน์โหลดและเรียกใช้ตัวติดตั้ง Visual Studio Code จากเว็บไซต์ของพวกเขา:
   • https://code.visualstudio.com/
2. ดำเนินการต่อผ่านตัวช่วยสร้างการติดตั้งจนกว่าจะสิ้นสุด ตัวเลือกเริ่มต้นใช้ได้

Microsoft Word

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

Adobe Photoshop

Photoshop เป็นสิ่งที่ฉันใช้สำหรับการแก้ไขภาพถ่าย แต่บรรณาธิการส่วนใหญ่ควรทำงานได้ดีในการแก้ไขงานง่าย ๆ

ผลงาน

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

ในที่สุดมันก็จะดีถ้าฉันมีเวลาในการพัฒนาชุดเครื่องมือการเขียนสไตล์ CMS ที่เรียบง่ายและตามความต้องการที่จะให้สมาชิกสโมสรที่ไม่ใช่ด้านเทคนิคและส่งบทความข่าวและเนื้อหาอื่น ๆ เพื่อรวมไว้ในเว็บไซต์ที่มีการแทรกแซงทางเทคนิคน้อยที่สุดหรือเป็นศูนย์ เว็บไซต์จะต้องอัปเดตด้วยตนเองโดยชาวบ้านที่มีความคิดทางเทคนิคด้วยตนเองสำหรับอนาคตอันใกล้ แต่หวังว่าเราจะมาถึงขั้นตอนนี้สักวัน

การปรับใช้

หากต้องการปรับใช้การจัดเตรียมหรือเว็บไซต์สดให้ดำเนินการดังต่อไปนี้:

1. ตรวจสอบให้แน่ใจว่าพื้นที่เก็บข้อมูลในพื้นที่ของคุณอยู่ในสถานะที่สะอาดและการเปลี่ยนแปลงที่จะนำไปใช้จะถูกตรวจสอบ
2. ออกคำสั่งต่อไปนี้ใน Ubuntu เพื่อสร้างซอร์สโค้ด:
   • jekyll build
3. ดาวน์โหลดและติดตั้ง WinSCP จาก Microsoft Store
4. เมื่อได้รับแจ้งให้ป้อนรายละเอียดต่อไปนี้ลงในบานหน้าต่าง “ เซสชัน” :
   • โปรโตคอลไฟล์ - SFTP
   • ชื่อโฮสต์ - triumphmayflowerclub.com
   • หมายเลขพอร์ต - 22
   • ชื่อผู้ใช้ - (รับจากผู้ดูแลเว็บไซต์)
   • รหัสผ่าน - (รับจากผู้ดูแลเว็บไซต์)
5. พูดว่า “ ใช่” เมื่อ WinSCP ถามว่าคุณโอเคเชื่อมต่อกับเซิร์ฟเวอร์ที่ไม่รู้จักและเพิ่มคีย์โฮสต์ลงในแคช
6. ในแผงด้านซ้ายนำทางไปยังไดเรกทอรี _site ในรูทของ repo ของคุณเนื่องจากนี่คือที่ Jekyll วางเอาต์พุตจากกระบวนการสร้างไซต์
7. ในแผงด้านขวานำทางไปยัง beta.triumphmayflowerclub.com หรือ public_html ไดเรกทอรีย่อยขึ้นอยู่กับว่าคุณกำลังปรับใช้กับการแสดงละครหรือไซต์สดตามลำดับ
8. ในแผงด้านขวาให้ลบ index.html และเปลี่ยนชื่อ updating.html เป็น index.html เป็นการดีที่นี่จะเป็นการดำเนินการอะตอมเพื่อลดความเสี่ยงของคนที่ไม่สามารถโหลดหน้าแรกได้ แต่กรอบเวลาที่เกิดขึ้นและคนไม่กี่คนที่เข้าถึงเว็บไซต์ของเราหมายความว่านี่ไม่ใช่ปัญหาในทางปฏิบัติ สิ่งนี้จะได้รับการแก้ไขอย่างถูกต้องเมื่อเราเริ่มใช้การกระทำของ GitHub สำหรับการปรับใช้อย่างต่อเนื่อง
9. เลือกไฟล์ทั้งหมดในแผงต้นทางซ้ายมือยกเว้น index.html และลากไปยังแผงปลายทางด้านขวา
10. คลิก “ ใช่” เมื่อได้รับแจ้งให้เริ่มการถ่ายโอนไฟล์
11. เมื่อถูกขอให้ยืนยันว่าการเขียนทับนั้นโอเคให้คลิกลูกศรลงด้านล่างขนาดเล็กทางด้านขวามือของปุ่ม “ ใช่” และคลิก “ ใหม่กว่าเท่านั้น” สิ่งนี้จะเริ่มการถ่ายโอน
12. เมื่อการถ่ายโอนนี้เสร็จสิ้นให้คัดลอก index.html จากแผงต้นทางไปยังปลายทางหนึ่งเพื่อเขียนทับ การปรับใช้เสร็จสมบูรณ์แล้ว

ติดต่อ

หากคุณต้องการเข้าร่วมกับฉัน (Andi Emma Davies-Wilcox-นักพัฒนานำ) โปรดทำตามที่อยู่อีเมลต่อไปนี้: [email protected]

ลิขสิทธิ์

ลิขสิทธิ์©ซอฟต์แวร์ Stack-in-A-Box 2017–2021

ลิขสิทธิ์© Triumph Mayflower Club 2005-2021