มาทำ hello world ใน Eleventy (11ty) กันครับ

มาทำ hello world ใน Eleventy (11ty) กันครับ

เรามาลอง hello world ใน Eleventy (11ty) กันครับ เราไปเริ่มจากสร้าง project กันก่อน ตามโค้ด

mkdir doesystem-test-11ty
cd doesystem-test-11ty

จากนั้นก็ไป initial node กันครับ

npm init -y
npm pkg set type="module"

ต่อไปเราก็ไปติดตั้ง eleventy กันครับ

npm install @11ty/eleventy

ลองไปรัน กันดูก่อนคับ

npx @11ty/eleventy

ตอนแรกเรายังไม่มี file อะไร เราก็จะได้ประมาณนี้

[11ty] Wrote 0 files in 0.03 seconds (v3.0.0)

ต่อไปลองไปสร้าง index.html ดูคับ จากนั้นรันคำสั่ง npx @11ty/eleventy อีกรอบก็จะได้ประมาณนี้

[11ty] Writing _site/index.html from ./index.html (liquid)
[11ty] Wrote 1 files in 0.04 seconds (v3.0.0)

ลองไปดูในโปรเจ็ค จะมีไฟล์ที่ที่ build ปรากฎขึ้นมาคือไฟล์ _site/index.html

ต่อไปเราไปลองรันแบบ serve กันดูครับ โดยใช้คำสั่ง

npx @11ty/eleventy --serve

จะได้ประมาณนี้

[11ty] Writing _site/index.html from ./index.html (liquid)
[11ty] Wrote 1 files in 0.04 seconds (v3.0.0)
[11ty] Watching…
[11ty] Server at http://localhost:8080/

จาก log จะมีการ write file _site/index.html จาก ./index.html ที่เราสร้างขึ้น จากนั้น จะรัน server อยู่ที่ http://localhost:8080/ เราสามารถเข้าไปดูตาม localhost port 8080 ได้ครับ

--serve เวลาเราแก้ไขไฟล์ จะ reload ให้อัตโนมัติ เราสามารถแก้ไขไฟล์เสร็จแล้วไปดูผลลัพธ์ได้เลย คับ