11ty

หลังจากหยุดเขียน blog มานาน เนื่องด้วยพยายามย้ายออกจาก medium แล้วยังหาตัวเลือกอื่นที่ถูกใจไม่ได้และยุ่ง เลยทิ้ง blog ล้างมาตลอด ทั้งๆ ที่มีเรื่องอยากเขียนบ่นเยอะมาก จนวันนี้หยุดยาว + รู้สึกมีพลังงานเหลือนิดหน่อย เลยมาขุดหาว่าเอา blog ที่เขียนดองไว้ขึ้นไว้ที่ไหน จนมาเจอ Eleventy

จริงๆ ถ้าอยากได้ blog ขึ้นเร็วๆ ก็มีทางเลือกนอกจาก Medium ให้เลือกเยอะ ทั้งฟรีและไม่ฟรี ที่ไปสำรวจมาก็มี Wordpress.com ,Blogger.com ,Tumblr.com, Ghost.org และอื่นๆ อีกเยอะ (ลองมาหมดแล้วด้วย) แต่ตัวเองเรื่องมากเองสุดท้ายก็มาลงที่ จะหา static site generator มาทำ ซึ่งก็มี check list ในหัวอีกว่าที่อยากได้มี

• ตัว static generator สามารถเข้าไปแกะ code อ่านเล่นได้
• เร็ว, ตัวเว็บคงเร็วไม่ต่างกันอยู่แล้วเพราะเป็น static site แต่เร็วอันนี้คือขอให้ generate ได้เร็วด้วย ไม่มี bundler มากินพลังเครื่อง (ทำเว็บด้วย webpack แล้วรู้สึกทรมานกับพวกนี้มาก)
• template ไม่ยุ่งยากมาก คือให้ทำ react เพื่อ generate website ก็รู้สึกเยอะไป
• ใช้ markdown ได้ เพราะ flow ตอนนี้คือเขียนใส่ Notion ไว้ก่อนแล้ว export ออกมาเป็น Markdown + images folder เอา
• code generate ออกมาให้มนุษย์อ่านได้ (เรื่องมากสุดๆ)

ที่มองๆ ก็มี next.js, Gatsby (เพราะที่ทำงานใช้อยู่ แต่ก็ไม่ชอบเท่าไหร่), Hugo แต่ก็ยังไม่ชอบเท่าไหร่จนมาเจอ Eleventy

Quick start #

สิ่งที่ชอบสุดใน 11ty คือ Quick start เพราะ quick จริงๆ สามารถ generate เว็บด้วยไฟล์เดียวได้เลย

npm install -g @11ty/eleventy
echo '# Page header' > README.md
eleventy

Instruction ตัวอย่างจาก 11ty.io

ถ้าอยากได้อะไรเพิ่มสามารถเพิ่มที่หัวไฟล์ได้เช่น อยากได้ layout อะไรจากไฟล์ไหน หรืออยากทำท่า advance ด้วยการใช้ template file อื่นก็ได้

Blog #

พอชอบจากตัวอย่าง quick start แล้วก็เลยหาดูว่าจะทำ blog ได้ยังไงบ้าง ใน GitHub ก็มีตัวอย่าง code เตรียมไว้ให้แล้ว clone มาแก้ต่อได้เลย วันนี้ทั้งวันก็เลยเล่น 11ty จนได้ออกมาสองเว็บที่ดองไว้มานาน www.llun.bike กับ www.llun.dev (llun.me เดี๊ยวไว้ทำต่อทีหลัง)

หลักๆ ที blog ต่างจาก quick start คือมีส่วน code ที่เก็บโครงสร้างไฟล์ทั้งหมดไว้ให้ แล้ว สามารถเรียกใช้ได้ตามภาษา script ต่างๆ อย่างในตัวอย่างก็เป็น nunjucks

set postslist = collections.posts | head(-3)

Code จากไฟล์ https://github.com/11ty/eleventy-base-blog/blob/master/index.njk#L10

ตัวที่เป็น magic คือ collections ที่ 11ty scan ไฟล์ต่างๆ แล้ว parse เก็บเข้าตัวแปรให้ จากด้านบน posts คือรายชื่อไฟล์ที่ 11ty เจอ (markdown, txt, etc) ไม่สนใจว่าไฟล์จะเก็บอยู่ใน directory ยังไง | head(-3) คือเอามา 3 อันหลังสุด เก็บเข้าตัวแปร postslist จากนั้น template ด้านล่างก็เอาไป render ต่อได้

สิ่งที่ชอบเพราะรู้สึกว่ามันสั้นและง่ายกว่า static generator อื่นที่เป็น React และใช้ HTML Template ตรงๆ ได้ ไม่ต้องเขียน javascript ครอบ (เบื่อ React แล้วนั่นเอง) ให้ความรู้สึกย้อนยุคเหมือนกับไปเขียน PHP ดี

Blog content ทั้งหลายสามารถใช้ได้หลายแบบ จะเป็น txt หรือ markdown ก็ได้ สามารถไปตั้งเพิ่มได้ใน .eleventy.js ตามตัวอย่างก็ใช้ markdown format แบบแต่งเพิ่มเช่น parse link ให้อัตโนมัติ (markdown ปกติไม่ทำให้)​ ก็เท่ดี ที่ใส่เพิ่มเองไปก็มี image alt ที่แทนที่จะใส่ไว้ใน tag ให้แสดงข้อความใต้ภาพแทน และถ้าอย่างใส่ tag กับ content ก็ใส่ไว้ที่หัวได้ แล้วตัวอย่าง code จะรวม tag มาสร้างเป็นอีกหน้าให้

Layout #

Layout ใน 11ty ตามตัวอย่างเป็น nunjuck ส่วนตัวก็ไม่ค่อยมีปัญหาอะไรมาก แต่ debug ลำบากไปหน่อย คือถ้าเป็น React หรือ Javascript ก็สามารถ console.log สำรวจตัวแปรเอาได้เลย พอเป็น nunjuck มันไม่มีอะไรให้ดูตรงๆ อย่างนั้นก็ต้องลองมั่วเอา (Retro เหมือนภาษา template เก่าๆ มาก อย่าง ejs) แต่พอชินแล้วก็ไม่รู้สึกลำบากอะไร

ตอนนี้ใช้สร้าง static blog เล็กๆ มี layout ไม่เยอะก็คิดว่าไม่น่าจะมีปัญหาอะไร แต่ก็คิดว่าถ้าเป็น project ใหญ่ขึ้น ระหว่าง React กับ old template style แบบนี้อะไรดีกว่ากันก็ยังตัดสินใจไม่ถูก

อื่นๆ #

Post นี้ก็เป็น post ที่สอง ยังไม่รู้สึกลำบากอะไรกับ 11ty ยังคิดว่าตัวเองชอบ อยู่ สิ่งที่รู้สึกขาดหายไปจาก Medium ก็คงเป็น stats ต่างๆ ที่ medium คอยส่งมาให้ดูว่า post นี้คนมาอ่านเท่านั้น เท่านี้ให้ภูมิใจเล็กน้อย แต่ถ้าไม่มีก็ไม่รู้สึกขาดอะไร หลักๆ ตอนนี้อยากได้ที่ที่เขียนอะไรยาวๆ ทิ้งไว้ได้มากกว่า แบบไม่ต้องมี popup อะไรให้น่ารำคาญ รวมถึงไม่มี tracking code ด้วยเรียกว่า ย้อนกลับหลังไปสุดๆ เหมือนเว็บยุคแรกๆ เลย

อย่างเดียวที่มีเก็บข้อมูลตอนนี้ก็คงเป็น Access log ที่ ตั้ง cloudfront ไว้ว่าเก็บไว้ให้หน่อย อยากรู้ว่าคนเข้ามาดูเท่าไหร่ จากที่ไหนบ้าง ก็รู้สึกว่าพอแล้ว ไว้เขียนบ่อยแล้วอยากหาเงินเพิ่มจาก blog ไว้ค่อยคิดอีกทีว่าจะทำอะไรเพิ่มดี