ไม่จำกัดขนาดและเว็บโฮสติ้งฟรีพร้อม GitHub Pages และ Cloudflare

เผยแพร่แล้ว: 2022-03-11

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

ความลับ: ฉันทำให้เว็บไซต์ของพวกเขาเป็นแบบคงที่ จากนั้น ฉันจัดเก็บและโฮสต์ด้วย GitHub และใช้ Cloudflare เพื่อให้บริการผ่าน HTTPS และทำให้รวดเร็ว ลูกค้าของฉันเคยชำระเงินสำหรับชื่อโดเมนเท่านั้น แต่พวกเขาก็ได้รับมากกว่าที่เคยเป็นมา

ทำไมต้องเป็นเนื้อหาคงที่?

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

สร้าง UI ที่ซับซ้อน?

ด้วยการถือกำเนิดของเฟรมเวิร์กส่วนหน้า เช่น React และเครือญาติ คุณสามารถสร้างประสบการณ์ที่น่าอัศจรรย์โดยไม่มีอะไรมากไปกว่า HTML/CSS และ JavaScript คุณจะต้องแยกตรรกะแบ็คเอนด์ออกจากส่วนหน้าของคุณ แต่ถึงแม้ Ruby on Rails จะมาพร้อมกับโหมด API ในตอนนี้

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

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

เว็บไซต์โบรชัวร์แวร์

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

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

โบนัส: ธุรกิจขนาดเล็กไม่ชอบจ่ายค่าธรรมเนียมโฮสติ้งรายเดือนแบบประจำ จริงอยู่ โฮสติ้งไม่ใช่ค่าใช้จ่ายสูง แต่ลูกค้าไม่ต้องจ่ายเงินอย่างอื่นนอกจากโดเมน ซึ่งถือว่าดีมาก

แอปพลิเคชั่นหน้าเดียว

คุณกำลังอวดแอพใหม่ที่ยอดเยี่ยมและยอดเยี่ยมที่ใช้เฟรมเวิร์กส่วนหน้าที่ทันสมัยหรือไม่?

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

ใบสมัครของคุณจะสามารถใช้ได้ตลอดเวลา

บล็อก

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

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

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

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

อันที่จริงฉันกำลังใช้ Stackedit เพื่อเขียนโพสต์นี้ในขณะนี้!

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

หน้านี้ที่คุณกำลังอ่านใช้ Disqus ด้วย

GitHub Pages

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

การปรับใช้กับ GitHub Pages

พูดมากแล้วมาดูการทำงานกัน!

ฉันได้ไปข้างหน้าและสร้างแอป React หน้าเดียวที่ดึงและแสดงอัตราแลกเปลี่ยนปัจจุบันสำหรับรูปีของปากีสถานจาก API สาธารณะ มาปรับใช้สิ่งนี้กับ GitHub Pages

ขั้นแรก มาสร้างที่เก็บ GitHub ใหม่กัน

ภาพหน้าจอของหน้าจอการสร้างที่เก็บใหม่ของ GitHub พร้อมช่อง "เจ้าของ" และ "ชื่อที่เก็บ" ด้านหลังมีชื่อ "price-check" กรอกไว้

หน้า GitHub ให้บริการจากสาขาที่เรียกว่า gh-pages ดังนั้นมาสร้างหน้าสำหรับโครงการของฉันกัน

 $ git checkout -b gh-pages Switched to a new branch 'gh-pages'

และมาดันไซต์กัน:

 $ git remote add origin [email protected]:amingilani/price-check.git $ git push -u origin gh-pages Counting objects: 27, done. Delta compression using up to 8 threads. Compressing objects: 100% (25/25), done. Writing objects: 100% (27/27), 28.67 KiB | 0 bytes/s, done. Total 27 (delta 3), reused 0 (delta 0) remote: Resolving deltas: 100% (3/3), done. To github.com:amingilani/price-check.git * [new branch] gh-pages -> gh-pages

และเสร็จแล้ว! ณ จุดนี้เว็บไซต์จะพร้อมใช้งานที่ https://amingilani.github.io/price-check พร้อม SSL ฟรี:

หน้า "ยินดีต้อนรับสู่การตรวจสอบราคา" ของไซต์ที่โฮสต์บนหน้า GitHub โดยมีป้ายกำกับที่ปลอดภัยถัดจากฟิลด์ URL ของเบราว์เซอร์

สิ่งสำคัญที่ควรทราบ:

  • หน้า GitHub ให้บริการไฟล์ index.html ในสาขา gh-pages ของโปรเจ็กต์
  • เว็บไซต์ให้บริการที่ USERNAME.github.io/REPOSITORY-NAME

การปรับแต่งชื่อโดเมน

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

ขั้นแรก ให้สร้างไฟล์ CNAME พิเศษและวางชื่อโดเมนของเราไว้ที่นั่น ซึ่งจะทำให้ GitHub ทราบชื่อโดเมนที่จะกำหนดเส้นทางไปยังที่เก็บ

 $ echo 'pricecheck.gilani.me' > CNAME $ git add . $ git commit -m 'Add a custom domain' ... $ git push ...

ประการที่สอง ให้ชี้ CNAME สำหรับ โดเมนย่อย ของเราไปที่ DNS ของ GitHub ที่ USERNAME.github.io :

ภาพหน้าจอที่แสดงดรอปดาวน์โดยเลือก CNAME ชื่อ "pricecheck" พิมพ์ในช่องตรงกลาง และโดเมน "amingilani.github.io" พิมพ์ในช่องด้านขวามือ

ข้อควรระวัง: อย่า ใช้สิ่งนี้สำหรับโดเมนเอเพ็กซ์! การเพิ่ม CNAME ในรูทโดเมนจะเป็นการปิดใช้ระเบียน MX และ TXT ใช้สิ่งนี้สำหรับโดเมนย่อยของคุณเท่านั้น โดเมนเอเพ็กซ์จะกล่าวถึงในภายหลัง

ณ จุดนี้ เว็บไซต์ของเราควรทำงานบนโดเมนที่กำหนดเองของเราบน HTTP:

หน้าตรวจสอบราคาเดียวกันในเบราว์เซอร์ แต่ตอนนี้เข้าถึงได้ผ่าน pricecheck.gilani.me คราวนี้ไม่มีป้ายกำกับ Secure

สิ่งสำคัญที่ควรทราบ:

  • โดเมนเริ่มต้น *.github.io ให้บริการผ่าน HTTPS
  • ชื่อโดเมนที่กำหนดเองของเราให้บริการผ่าน HTTP ที่ไม่ปลอดภัย
  • อย่า ใช้ CNAME บนโดเมนเอเพ็กซ์ของคุณ เว้นแต่คุณต้องการฆ่าอีเมลของคุณ

ข้อจำกัดของหน้า GitHub:

  • Repos ต้องมีขนาดไฟล์น้อยกว่า 1 GB
  • เว็บไซต์ต้องมีขนาดไฟล์น้อยกว่า 1 GB
  • ขีด จำกัด แบนด์วิดท์รายเดือนคือ 100 GB เราจะข้ามสิ่งนี้ในภายหลัง

การใช้โดเมนเอเพ็กซ์เป็นโดเมนที่คุณกำหนดเอง

วิธีที่ง่ายที่สุดในการหลีกเลี่ยงข้อจำกัดนี้คือการใช้ www เป็นโดเมนย่อยของคุณ และเปลี่ยนเส้นทางการรับส่งข้อมูล HTTP ทั้งหมดจากปลายสุดไปที่ www ในตัวอย่างของฉัน ฉันจะเปลี่ยนเส้นทาง gilani.me ไปที่ www.gilani.me ซึ่งชี้ไปที่ไซต์สแตติกของฉัน แต่ฉันไม่ชอบทำสิ่งต่างๆ ด้วยวิธีง่ายๆ

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

ไม่มี ANAME ? ตัวเลือกสุดท้ายคือเปลี่ยนเป็นผู้ให้บริการ DNS ที่รองรับสิ่งนี้: ป้อน Cloudflare Cloudflare จัดเตรียม CNAME ให้แบนบนโดเมนเอเพ็กซ์ ซึ่งเทียบเท่ากับระเบียน ANAME ทางที่ดีควรเปลี่ยนตอนนี้เนื่องจากเราจะพูดถึง Cloudflare ในส่วนถัดไป

TLDR : เปลี่ยนไปใช้ DNS ฟรีของ Cloudflare และตั้งค่า CNAME บนโดเมนเอเพ็กซ์ของคุณ พวกเขาทำสิ่งที่พิเศษด้วย CNAME ที่ทำให้มันใช้งานได้

SSL และ Cloudflare

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

ในฐานะผู้ดูแลเว็บยุคใหม่ คุณต้องให้บริการ SSL บนเว็บไซต์เป็นอย่างน้อย โดย ไม่มีเนื้อหาผสม

ถึงจุดที่ Google Chrome ทำเครื่องหมายเว็บไซต์ HTTPS ธรรมดาว่าไม่ปลอดภัย และ Google Search เริ่มให้ความสำคัญกับเว็บไซต์ HTTPS ในอันดับที่ดีขึ้น เราจะหารือเกี่ยวกับกลยุทธ์เพิ่มเติมในการทำให้ส่วนหน้าของคุณปลอดภัยในภายหลัง แต่สำหรับตอนนี้ เราจะครอบคลุมเฉพาะ SSL เท่านั้น

โชคดีที่ตอนนี้เรามี Let's Encrypt แล้ว

เป็นองค์กรที่ไม่แสวงหากำไรและเป็นผู้ออกใบรับรองอัตโนมัติ (CA) ที่ให้คุณออกใบรับรอง SSL ระยะสั้น 90 วันโดยทางโปรแกรมสำหรับโดเมนใดๆ ที่คุณควบคุม ใช้งานง่าย มันเป็นโอเพ่นซอร์ส และโครงการนี้ได้รับการสนับสนุนจากบริษัทมากมาย ซึ่งรวมถึง Mozilla และมูลนิธิ Electronic Frontier

การนำ Cloudflare ไปใช้ให้เกิดประโยชน์

Cloudflare เป็นบริการป้องกัน DNS, CDN และ DDoS

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

นอกจากนี้ Cloudflare ยังเสนอบริการที่เรียกว่า Universal SSL ซึ่งพวกเขาจะออกใบรับรอง SSL ฟรีจากพันธมิตร CA ของพวกเขา ดังนั้นคุณจะได้รับ HTTPS ฟรี... ตลอดไป

ทำไมต้อง Cloudflare?

ฉันรู้ว่าคุณคิดอย่างไร: Gilani คุณเพิ่งบอกฉันว่า Let's Encrypt ยอดเยี่ยมแค่ไหน ทำไมคุณถึงพูดถึง Cloudflare? มันทั้งหมดลงมาเพื่อความเรียบง่าย

ให้จินตนาการถึงการตั้งค่าแคช Nginx หลายตัวและพร็อกซีย้อนกลับทั่วโลก มอบใบรับรอง SSL ที่ถูกต้องและให้บริการหน้าเว็บของผู้ใช้จากตำแหน่งที่ใกล้ที่สุด

ส่งผลให้เว็บไซต์ของคุณได้รับบริการผ่าน SSL แม้ว่าเซิร์ฟเวอร์ต้นทางจะไม่มีใบรับรอง SSL แม้ว่า Cloudflare จะให้ใบรับรองพิเศษที่ลงนามด้วยตนเองซึ่งคุณสามารถวางไว้บนเซิร์ฟเวอร์ต้นทางเพื่อรักษาความปลอดภัยของการเชื่อมต่อไปยังเซิร์ฟเวอร์ของ Cloudflare นี่คือสิ่งที่ Cloudflare ให้แผนฟรีแก่คุณ และคุณไม่จำเป็นต้องต่ออายุใบรับรองทุก 90 วันด้วยซ้ำ

ในฐานะนักแปลอิสระ ฉันได้รับลูกค้าที่ต้องการสร้างไซต์และดำเนินธุรกิจให้เร็วที่สุด พวกเขาไม่เข้าใจหรือสนใจเกี่ยวกับปัญหาด้านความปลอดภัย ก่อให้เกิดปัญหากับเว็บสมัยใหม่ หรือการเข้ารหัสระหว่างการขนส่ง ลูกค้าบางรายมีปัญหาในการทำความเข้าใจแนวคิดของชื่อโดเมน และพบว่ามันน่ารำคาญเมื่อพวกเขาต้องจ่ายค่าธรรมเนียมรายปี 15 ดอลลาร์ “เพียงเพื่อให้เว็บไซต์ของฉันทำงานต่อไป” ลองอธิบายให้พวกเขาฟังว่าทำไมพวกเขาถึงต้องจ่ายเงินสำหรับกลุ่ม reverse proxy ที่ปกป้องเว็บไซต์ของตนที่ทำงานบนโฮสต์ฟรี

การตั้งค่า Cloudflare SSL

ให้มือเราสกปรกอีกครั้ง สิ่งแรกที่ต้องทำ ให้เปลี่ยนไปใช้การกำหนดเส้นทางการรับส่งข้อมูลทั้งหมดของคุณผ่าน Cloudflare:

สกรีนช็อตของการกำหนดค่า Cloudflare แสดงสำเนาสี่ชุดของแถว CNAME เพื่อให้เห็นคำแนะนำเครื่องมือเหนือไอคอนการกำหนดค่าของแต่ละแถว พร้อมด้วยการกำหนดค่าที่ต้องการในขั้นสุดท้าย ทั้งคู่มี "อามิน" เหนือ "เช็คราคา" และทั้งสองแถวระบุว่า "เป็นนามแฝงของอามิงกิลัน..." และ "อัตโนมัติ" อยู่ตรงกลาง ในตอนแรก แถวบนสุดมีไอคอน "DNS และ HTTP proxy" แสดงอยู่ แต่แถวล่างสุดมีไอคอน "DNS เท่านั้น" เมื่อคลิกที่ไอคอน แถวล่างจะถูกสลับให้เหมือนกับแถวบนสุด ทำให้แถวล่างสุดกลายเป็นสีเขียว และไอคอน "i" เล็กๆ ข้าง "CNAME" หายไป

ถัดไป ภายใต้ Crypto ให้ตั้งค่าระดับ SSL เป็น "เต็ม"

สกรีนช็อตของส่วน SSL โดยตั้งค่าดรอปดาวน์เป็น ปิด ตัวเลือกอื่นๆ ได้แก่ ยืดหยุ่น เต็ม และ "เต็ม (เข้มงวด)" เมื่อเลือกเต็มแล้ว ป้าย "ACTIVE CERTIFICATE" สีเขียวจะปรากฏขึ้นด้านล่างเมนูแบบเลื่อนลง

บังคับ "เขียน HTTPS อัตโนมัติ" เพื่อกำจัดคำเตือนเนื้อหาแบบผสม

สกรีนช็อตของส่วนการเขียน HTTPS อัตโนมัติ ซึ่งแสดงการสลับจากปิดเป็นเปิด

ณ จุดนี้ เว็บไซต์ของเราจะทำงานผ่านทั้ง HTTP และ HTTPS บังคับให้ใช้ HTTPS กับทุกสิ่งในโดเมนของเรา

สกรีนช็อตของกล่องโต้ตอบ "สร้างกฎของหน้าสำหรับ gilani.me" ฟิลด์ "หาก URL ตรงกัน" ได้เติม "http://*gilani.me/*" ไว้ ส่วน "จากนั้นการตั้งค่าจะเป็น" มีช่องแบบเลื่อนลงที่ตั้งค่าเป็น "ใช้ HTTPS เสมอ"

ทุกอย่างเสร็จเรียบร้อย. เว็บไซต์ของเราควรโหลดผ่าน HTTPS ด้วยคะแนน "ปลอดภัย" สีเขียวใน Chrome เสมอ

หน้าตรวจสอบราคาเดียวกันในเบราว์เซอร์เหมือนก่อนหน้านี้ มีการเข้าถึงอีกครั้งผ่าน pricecheck.gilani.me แต่คราวนี้ป้ายความปลอดภัยปรากฏขึ้นอีกครั้ง

คำพูดสุดท้ายและข้อควรพิจารณาด้านความปลอดภัย

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

ความเฉลียวฉลาดในหมู่พวกคุณจะชี้ให้เห็นว่ามีปัญหาด้านความปลอดภัยที่เห็นได้ชัดบางประการในการตั้งค่านี้ กล่าวคือไม่มีส่วนหัว HTTP ที่ปลอดภัย เช่น:

  • Content-Security-Policy : โหลดสคริปต์และเนื้อหาจากรายการที่อนุญาตพิเศษของโฮสต์ และไม่อนุญาต inline js
  • X-Frame-Options : ปิดการใช้งานเว็บไซต์ของคุณไม่ให้โหลดใน iframe

และคุณพูดถูก หน้า GitHub และแม้แต่ Cloudflare ไม่อนุญาตให้คุณปรับแต่งส่วนหัว HTTP ของคุณ อย่างไรก็ตาม คุณสามารถตั้งค่า CSP โดยใช้ meta แท็ก HTML

เพียงแทรกสิ่งนี้ลงในหน้าเว็บของคุณ:

 <meta http-equiv="Content-Security-Policy" content="default-src https:">

อย่างไรก็ตาม ในขณะนี้ ไม่มีวิธีปฏิบัติในการตั้งค่าส่วนหัว X-Frame-Options บนหน้า GitHub ซึ่งหมายความว่าผู้โจมตีสามารถโหลดหน้าเว็บของคุณลงใน iframe ที่ออกแบบมาเป็นพิเศษและดึงการโจมตี XSS ออก อย่างไรก็ตาม หากคุณทุ่มเท คุณสามารถแก้ไขปัญหานี้ได้โดยขอให้ผู้ใช้ยืนยันรหัสผ่านหรือโทเค็น 2FA ของตนในทุกการกระทำที่ละเอียดอ่อน หรือโดยผ่านโทเค็น CSRF ทุกครั้งที่มีคำขอตรวจสอบสิทธิ์

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

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

ปรับขนาด, ปรับขนาดไม่ จำกัด

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

คุณสามารถสร้าง front-end layer ตามเฟรมเวิร์ก JavaScript ที่ทันสมัย ​​เชื่อมต่อกับ Backend-as-a-Service (BaaS) บนคลาวด์ขนาดใหญ่ เช่น Firebase และสร้างแอปพลิเคชันที่ซับซ้อนโดยไม่ต้องกังวลเกี่ยวกับเซิร์ฟเวอร์ เวลาทำงาน หรือประเด็นอื่นๆ ที่เกี่ยวข้องกับโครงสร้างพื้นฐาน

สร้างเกมบนเว็บที่น่าตื่นเต้นใหม่! ลองดู GameSparks แล้วคุณจะพร้อม

การใช้ Github Pages เป็นบริการโฮสติ้ง "มาตรฐาน" ที่คาดว่าจะรองรับเว็บไซต์ที่มีแบนด์วิดท์สูง เป็นสิ่งที่กีดกันและไม่ควรทำ การเพิ่ม Cloudflare CDN ที่ด้านบนของ GitHub Pages ทำให้โซลูชันนี้ใช้งานได้ Cloudflare เป็นมากกว่าบริการ SSL ฟรี เป็นบริษัทที่มี CDN ทั่วโลกที่ปกป้องเว็บไซต์ของคุณจากการเพิ่มขึ้นอย่างรวดเร็วและลดการโหลดในหน้า GitHub ให้น้อยที่สุด

สรุป คำสารภาพ และลิงค์

ในบทความนี้ ฉันทำให้มันดูเหมือนว่าฉันเผยแพร่แอป React ของฉันไปที่ gh-pages ด้วยตนเอง ฉันไม่ได้ทำสิ่งนั้น ฉันทำงานกับ master และเมื่อถึงเวลาปรับใช้ ฉันรัน npm run deploy ซึ่งเริ่มต้นสคริปต์บิลด์และผลักบิลด์ไปที่ gh-pages โปรดดูสาขา master ของที่เก็บของฉันเพื่อดูว่ามันทำงานอย่างไร

ซื้อกลับบ้าน

ข้อดี:

  • การปรับใช้ทันที
  • ทำงานร่วมกันได้ง่าย
  • สภาพแวดล้อมการโฮสต์ที่ปลอดภัย

คำเตือน:

  • ไม่มีการเข้าถึงส่วนหัว HTTP
  • ง่ายต่อการดาวน์โหลดสำเนาของเว็บไซต์
  • จำเป็นต้องมีความรู้ GitHub
  • ขึ้นอยู่กับผู้จำหน่ายเทคโนโลยี

ลิงค์:

  • คุณจะพบซอร์สโค้ดสำหรับแอปของฉันที่ amingilani/price-check
  • แอพนี้ใช้งานได้จริงที่ pricecheck.gilani.me และควรใช้งานได้อย่างไม่มีกำหนด