อัพเกรด Blog เป็น Middleman v4

อัพเกรด Blog เป็น Middleman v4 Cover Image

เนื่องจากว่าเมื่อสองวันก่อนได้มีโอกาสอัพเดทบล็อค ซึ่งตัวบล็อคแห่งนี้เขียนด้วย Middleman จากเวอร์ชันก่อน 3.4.0 เป็นเวอร์ชั่น 4.0.0 ซึ่งเวอร์ชันนี้มีการเปลี่ยนแปลง Feature ค่อนข้างมาก และได้เจอปัญหาต่างๆหลายๆอย่าง ก็เลยทำเป็นบล็อคจดบันทึกเอาไว้ซะเลย

วิธีการอัพเกรดเป็น Middleman v4 มีเขียนใน Docs ของ Middleman ที่ Upgrading to v4

Features ที่เปลี่ยนไป

  • เพิ่ม middleman-cli
  • วิธีการรัน command เปลี่ยนไปเช่น middleman server ใช้ bundle exec middleman server
  • css_compressor ถูกลบไป ใช้ activate :minify_css, :compressor => แทน
  • js_compressor ถูกลบไป ใช้ activate :minify_javascript, :compressor => แทน
  • instance variable ที่ประกาศใน config.rb ไม่สามารถใช้ใน templates ได้แล้ว :(
  • sprokets ถูกลบไปแล้ว ให้เพิ่ม gem 'middleman-sprockets", "~> 4.0.0.rc ใน Gemfile แทน
  • สามารถแยก environment ในการ develop ได้ โดยการใช้ configure

เริ่มอัพเกรด

เริ่มแรก ทำการอัพเกรด gem middleman เลยโดยการแก้ไขไฟล์ Gemfile

จาก ruby gem "middleman", "~>3.4.0" gem "middleman-blog", "~> 3.5.3" gem "middleman-deploy"

เป็น

gem "middleman", "4.0.0"
gem "middleman-blog"
gem "middleman-deploy", "2.0.0.pre.alpha"
gem 'middleman-sprockets', '~> 4.0.0.rc'

จากนั้น

bundle install

จากนั้นทดสอบรัน Middleman บนเครื่อง ปรากฎว่ารันไม่ได้ ต้องเปลี่ยนจาก

middleman server

เป็น

bundle exec middleman server

สุดท้ายมีปัญหาเกี่ยวกับ Directory Indexes ซึ่งไม่แน่ใจว่าแก้ไขอย่างไร ก็เลยใช้วิธีแก้ไขแบบมั่วๆด้วยตัวเอง จากที่บทความที่เขียน ปกติจะเขียนอยู่ในรูปแบบ

year-month-day-title.md

แต่เนื่องจากพออัพเกรดเป็น v4 กลับมองไฟล์พวกนี้เป็น text/plain ทำให้ render html ไม่ได้ ก็เลยแก้ไขบทความทั้งหมดที่เซฟจาก

year-month-day-title.md

เป็น

year-month-day-title.html.md

โดยการเพิ่ม file extensions html ต่อจากชื่อบทความแล้วถึงใช้ md สุดท้าย

เปลี่ยนไฟล์ด้วย Command Line

เนื่องจากบทความก็มีเป็น 100 posts จะแก้ไขชื่อไฟล์ที่ละไฟล์ก็ยุ่งยากมาก เลยใช้วิธี command line ซะเลย ซึ่งที่พอจะนึกออกก็มี คำสั่ง rename บน Linux คล้ายๆกับ Find and Replace ด้วย syntax นี้ (วันนี้นอกจากจะได้อัพเกรด Middleman ก็ได้เรียนรู้คำสั่ง Linux เพิ่มเติมด้วย)

rename 's/find/replace/' files

Script ก็จะเป็น

rename -v 's/\.md/\.html\.md/' *md

หรือบน Mac ผมใช้ตัวนี้

brew install ren
ren '*.md' '#1.html.md'

หรือจะอีกวิธีก็

for oldname in *.md; do mv "$oldname" "${oldname/.md/.html.md}"; done

เรียบร้อย :)

Chai Chai Phonbopit : Web Developer @Nimbl3 • ผู้ชายธรรมดาๆ ที่ชื่นชอบ Node.js, JavaScript และ Open Source มีงานอดิเรกเป็น Acoustic Guitar และ Football

บทความล่าสุด