tools tutorial - designer,front-end พัฒนาเว็บไม่ต้องพึ่ง xamp mamp รู้จักกับ Jekyll

|


สวัสดีครับ นานมากแล้วที่ไม่ได้เขียนอะไรเพิ่มเลย งานวุ่นงานยุ่งเช่นเคย แต่ว่าวันนี้ขี้เกียจทำงานมากกกกก เลยมาเขียน blog แทนดีกว่า 55 (ขี้เกียจน้อยกว่า) สำหรับบทความนี้เนี่ยเขียนขึ้นเพื่อไว้

แก้ปัญหาส่วนตัวคือแบบ

  1. มีเพื่อนร่วมงาน designer อยากรันเว็บหน้าแห้ง(ดูผลงานตัวเอง)
  2. ทำงาน front-end ตัดรูปจาก photoshop มาทำ html

หลักคือทั้งสอง อย่างที่ว่ามาเนี่ยแม๋งต้องลง XAMP หรือ MAMP หรือจะเครื่องมือใดๆก็ตามเพื่อให้หน้าเว็บออกมาสมบูรณ์แบบ มันก็หนักเครื่องอยู่นะแล้วไหนจะลงแล้วรกเครื่องอีกเกะกะ เปิดใช้ครั้งสองครั้ง (แต่เอาจริงๆใช้ jekyll เนี่ยแม๋งก็ต้องใช้ cli เป็น 5555 ) โอเคไม่เป็นไรเรามารู้จัก jekyll กันดีกว่า

 

คือจริงๆแค่เข้าเว็บไซต์หลักของ jekyll ก็รู้แล้วว่ามันทำอะไรได้บ้าง – ,- (ไม่ต้องเขียน blog มาอธิบายก็ได้) หลักเลยก็คือมันเอาไว้รันเว็บหน้าแห้ง (*Static HTML บ้านๆเลยไม่มีอะไร) แต่ความเจ๋งอย่างอื่นของมันเนี่ยก็คือ รองรับ markdown(.md) และรองรับ Html template อย่าง liquid ของ shopify ทีนี้พอมันทำได้สองอย่างนี้เนี่ยก็เลย เอามาทำเป็น blog แบบง่ายๆได้เลย

 

เรามาเริ่มติดตั้งกันก่อนเลยดีกว่า 

ก่อนอื่นเนี่ยจะติดตั้ง jekyll ต้องลง ruby ก่อนเพราะนะ เพราะใช้ gem install

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

Screen Shot 2558-06-07 at 1.23.18 PM

เพียงเท่านั้น jekyll จะรันเว็บไซต์เราอยู่ที่ port :4000 หรือก็คือเข้าที่ http://localhost:4000 การเราที่ -w หมายถึง watch ถ้าเรามีการแก้ไขไฟล์เว็บไซต์ก็จะเปลี่ยนไปตามที่เราแก้ (แต่จะหน่วงๆเวลาอยู่สองวิ) จบ……

เฮ้ยแต่เดียวก่อนยังไม่จบสำหรับที่ต้องการทำ blog แบบง่ายๆเนี่ย jekyll ก็จะมีคำสั่ง สร้าง project ให้โดย

my-blog ในที่นี้คือชื่อ project นะ jekyll ก็จะสร้างโปรเจคให้เราจะประกอบไปด้วยไฟล์ต่างๆ

Screen Shot 2558-06-07 at 1.32.26 PM

ตามภาพเลยหลักๆจะเห็นว่ามีโฟลเดอร์ _post ซึ่งข้อมูลบทความแต่ละบทความจะเก็บเป็น .markdown แล้วเดียวตอนเรารัน jekyll serve มันจะมาเก็บข้อมูลของเราที่โฟลเดอร์นี้แล้วนำไปแสดงผลให้ ส่วนของข้อมูลทั่วไปของ blog เราก็สามารถแก้ไขได้ที่ _config.yml

(ถ้าอยากรู้แต่ละไฟล์แต่ละโฟลเดอร์ทำอะไรได้ก็ลองเข้าไปอ่านได้ใน doc ของเค้านะครับจะละเอียดกว่า)

เวลาเรารันจะก็ได้ผลหน้าตาเป็นเว็บ blog ในภาพ

Screen Shot 2558-06-07 at 1.35.01 PM

 

Jekyll-Import

ทีนี้เนี่ย jekyll ไม่ได้ให้มาแค่นี้นะครับ – -, ยังใจดีแถม jekyll-import มาให้เพื่อให้เราแปลง บทความเก่าๆของเราจาก cms มาเป็น .markdown ให้เราเอาไปใช้ต่อได้อีกด้วย จุดวาป สามารถเข้าไปอ่านเพิ่มเติมและวิธีได้นะครับส่วนอันนี้คือรายชื่อที่ jekyll รองรับ

Screen Shot 2558-06-07 at 1.43.48 PM

 

แต่ละตัวก็จะมีวิธี set ไม่เหมือนกันนะครับต้องไล่อ่านนอกจากที่บอกมาทั้งหมดเนี่ย ยังจะมี plugin ของ jekyll เองอีกด้วยนะครับ (ลูกเล่นเค้าเยอะ ฮะๆ)

 

ก็ในส่วนของบทความนี้น่าจะจบแล้วแต่ยังสามารถอ่านต่อได้ที่ jekyll ที่อธิบายไปเนี่ยยังแค่ 30-40% ของที่เค้าทำได้เองนะ ไม่ได้โม้ ฮะๆยังไงก็หวังว่าจะมีประโยชน์นะครับสำหรับบทความนี้

Share Button

Comments

comments