web.dev

web.dev [เก็บถาวร]

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

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

---

[เก็บถาวร readme]

สร้างเว็บไซต์?

คุณจะต้องใช้โหนดเวอร์ชันล่าสุด: V14 (LTS) หรือสูงกว่า เพื่อตรวจสอบเวอร์ชันโหนดของคุณเรียกใช้ node -v ในเทอร์มินัลของคุณ

หากคุณไม่มีโหนดหรือหากคุณต้องการอัพเกรดเราขอแนะนำให้ใช้ Node Version Manager (NVM)

โคลน repo

git clone https://github.com/GoogleChrome/web.dev.git

เปลี่ยนไดเรกทอรีเป็นโฟลเดอร์ที่สร้างขึ้น

 cd web.dev

ติดตั้งการพึ่งพา

npm ci

เริ่มต้นเซิร์ฟเวอร์ท้องถิ่นเพื่อดูตัวอย่างไซต์

npm run dev

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

ตั้งค่าการสร้างธง

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

• สร้างไฟล์ .env ที่รูทของโครงการของคุณ
• เพิ่มสิ่งต่อไปนี้:

 # Ignore ALL site content
ELEVENTY_IGNORE=true

# Only build the directories you're working on.
# Note, this is a JSON string so you must use double quotes.
ELEVENTY_INCLUDE=["blog", "vitals"]

สภาพแวดล้อม?

ตั้งค่า ELEVENTY_ENV=prod เพื่อบังคับให้สร้างการผลิต นี่เป็นค่าเริ่มต้นเมื่อเรียกใช้ "สเตจ" หรือ "ปรับใช้" ไม่รองรับตัวเลือกอื่น ๆ สำหรับ ELEVENTY_ENV แม้ว่าการกำหนดค่าไซต์ที่สูงขึ้นของเราจะเริ่มต้นเป็น 'dev' หากไม่ได้ระบุ

การสร้างการผลิตในปัจจุบันต้องใช้หน่วยความจำ จำนวนมาก จนถึงจุดที่ node อาจออกไปพร้อมกับข้อผิดพลาดตามสายของ

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate * , char const * , bool) [node]

จำนวนที่แน่นอนของพื้นที่ฮีปที่ต้องการแตกต่างกันไปจากคอมพิวเตอร์ไปยังคอมพิวเตอร์และเวอร์ชันของ node หากคุณต้องการการผลิตในท้องถิ่น แต่ไม่มีหน่วยความจำคุณสามารถเพิ่มขนาดฮีปได้โดยการเพิ่ม --node-options '--max_old_space_size=8192' (เพื่อกำหนดพื้นที่ HEAP 8GB) ให้กับคำสั่ง npm ก่อนที่จะ run ตัวอย่างเช่น:

ELEVENTY_ENV=prod npm --node-options ' --max_old_space_size=8192 ' run build

การแสดง?

เมื่อคุณส่งคำขอดึงมันจะถูกจัดฉากให้คุณโดยอัตโนมัติ จับตาดูบอท Netlify เพื่อแสดงความคิดเห็นเกี่ยวกับคำขอดึงด้วย URL ที่ไม่ซ้ำกันของคุณ

การปรับใช้เว็บไซต์

ปรับใช้อัตโนมัติ

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

ใช้งานด้วยตนเอง

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

• web.dev-eng
• web.dev-owners

1. นำทางไปยังหน้าทริกเกอร์สร้างคลาวด์
2. คลิกปุ่ม เรียกใช้ สำหรับทริกเกอร์ที่ชื่อว่า การปรับใช้
3. ในลิ้นชักด้านข้างที่เปิดขึ้นให้คลิกปุ่ม เรียกใช้ทริกเกอร์ สำหรับทริกเกอร์สำหรับสาขา หลัก

หมายเหตุ: Web.dev Auto ปรับใช้ทุกชั่วโมงหากมีการกระทำใหม่ในสาขา main การปรับใช้ด้วยตนเองควรเกิดขึ้นเมื่อการสร้างล้มเหลวหรือหากการปรับใช้อัตโนมัติถูกปิดใช้งาน

การดีบัก?

หากคุณต้องการดีบักกระบวนการสร้างของเว็บไซต์:

1. เพิ่มคำสั่ง debugger ไปที่ .eleventy.js
2. npm run debug:eleventy
3. ไปที่ about://inspect เพื่อแนบกับกระบวนการทำงาน