มาหัดเขียนบล็อกด้วย Middleman ตอนที่ 1 (Overview)

Table of Contents

• มาหัดเขียนบล็อกด้วย Middleman ตอนที่ 1 : Overview
• มาหัดเขียนบล็อกด้วย Middleman ตอนที่ 2 : Custom Layout
• มาหัดเขียนบล็อกด้วย Middleman ตอนที่ 3 : Partials Template
• มาหัดเขียนบล็อกด้วย Middleman ตอนที่ 4 (จบ) : Deployment

สำหรับบทความนี้จะเป็นการแนะนำการเขียนบล็อกด้วย Middleman ซึ่งผมใช้เขียนที่บล็อกแห่งนี้อยู่นั่นเอง เผื่อจะมีใครสนใจ อยากลองเขียนดูบ้าง เนื้อหาของบทความผมจะแบ่งออกเป็นหลายๆตอนเท่าที่พอจะนึกออกนะครับ โดยรวมๆ ก็จะมีประมาณ

• รู้จักกับ Middleman คืออะไร
• ใช้ Middleman ในการเขียนบล็อก ด้วย Markdown
• Middleman เป็น Static Site Generator
• ใช้ Github Page เป็น Web Hosting
• Automatic Deploy ทุกครั้งที่ทำการ git push

Middleman คืออะไร ?

ง่ายๆเลย Middleman เป็น Static Site Generator ที่เขียนด้วยภาษา Ruby หรือจะพูดง่ายๆ ก็คือการเขียนเว็บธรรมดา แล้ว Middleman ก็จะทำการ Generate ไฟล์ต่างๆของเราให้เป็น Static Website (HTML/CSS/JS) ธรรมดา ซึ่งจุดเด่นของ Static Website คือ มันสามารถที่จะเอาไปรันบน Hosting ต่างๆได้ทุก Hosting บนโลก

เหตุผลที่ผมเลือก Middleman

ต้องย้อนกลับไปสมัยที่ DevAhoy เขียนแรกๆ เมื่อต้นปีที่แล้ว ผมใช้ Wordpress ในการเขียนบล็อก แต่สิ่งที่ผมไม่ชอบก็คือ หน้า Editor ของ Wordpress ใส่ตัวหนา ตัวเอียง h1, h2 หรือแทรกรูปลำบาก เนื่องจากผมชอบ Markdown มากกว่า ทำให้ต้องหันไปพึ่ง plugin สุดท้าย ก็พอถูๆไถๆ ไปได้ จนตอนหลังรู้สึกว่าเว็บเรา เริ่มช้า แล้วก็เวลา Backup ทีค่อนข้างลำบาก ไหนจะรูปภาพ ไหนจะฐานข้อมูล

เมื่อมานั่งคิด เราเป็นแค่ Blog ธรรมดา ฐานข้อมูลไม่ต้องมีก็ได้ ก็เลยตัดสินใจหา Static Website Generator ดู แล้วก็ได้พบ Jekyll กับ Middleman แต่เนื่องจากว่า Jekyll เคยใช้แล้ว เลยลองหัดใช้ Middleman ดู แล้วก็รู้สึกชอบมันมาก เหตุผมหลักๆเลยก็คือ

• เขียนด้วย Ruby
• รองรับการเขียนด้วย Markdown
• รองรับ Partials Template
• รองรับ SASS
• เร็วมาก เมื่อเทียบกับ Wordpress เนื่องจากมันเป็น Static Website

เริ่มต้น Middleman

ทำการติดตั้ง Middleman ด้วย

gem install middleman
gem install middleman-blog

โดยต้องทำการติดตั้ง Ruby มาก่อนแล้ว วิธีการติดตั้ง Ruby อ่านเพิ่มเติมได้ที่ Setup Ruby & Rails

เมื่อติดตั้ง middleman gem เรียบร้อยแล้ว ต่อมาก็ทำการสร้างโปรเจ็คด้วย Middleman ด้วยคำสั่ง

1
middleman init my_blog --template=blog

• middleman init : คือคำสั่งในการสร้างโปรเจ็คใหม่
• my_blog : คือชื่อโปรเจ็ค หรือโฟลเดอร์
• --template=blog : ออปชั่นที่บอกว่าเลือกใช้ template เป็น blog

หลังจากนั้นระบบจะทำการเซ็ทอัพโปรเจ็คขึ้นมา ประมาณนี้

reate  my_blog/Gemfile
         run  bundle install from "."
Fetching gem metadata from http://rubygems.org/.............
...
...
create  my_blog/.gitignore
create  my_blog/config.rb
create  my_blog/source
create  my_blog/source/2012-01-01-example-article.html.markdown
create  my_blog/source/calendar.html.erb
create  my_blog/source/feed.xml.builder
create  my_blog/source/index.html.erb
create  my_blog/source/layout.erb
create  my_blog/source/tag.html.erb
create  my_blog/source/stylesheets
create  my_blog/source/javascripts
create  my_blog/source/images

เมื่อเราเปิดโปรเจ็ค my_blog ดูจะเห็นไฟล์และโฟลเดอร์ต่างๆ ที่ middleman สร้างให้ ประมาณนี้

tree my_blog

├── Gemfile
├── Gemfile.lock
├── config.rb
└── source
    ├── 2012-01-01-example-article.html.markdown
    ├── calendar.html.erb
    ├── feed.xml.builder
    ├── images
    ├── index.html.erb
    ├── javascripts
    ├── layout.erb
    ├── stylesheets
    └── tag.html.erb

โดยมีไฟล์ config.rb ซึ่งจะเป็นไฟล์ config ต่างๆของ middleman ไม่รอช้า ลองทดสอบรันเบื้องต้นก่อนเลย ว่าเป็นยังไง สั่ง start server ด้วยคำสั่ง middleman server หรือ middleman ก็ได้

cd my_blog
middleman server

โดยเซิฟเวอร์จะรันอยู่ที่ localhost:4567 จะเห็นว่ามีแค่บทความเดียว คือ Example Article

Update : หากว่าเป็น Middleman v4 คำสั่งที่ใช้จะเป็น bundle exec middleman server

ทดสอบเขียนบทความเพิ่ม

ต่อมาทำการทดสอบเขียนบทความเพิ่มเติม ด้วยคำสั่ง

1
middleman article "My new Article"

จะเห็นไฟล์ประมาณนี้

1
---
2
title: My new Article
3
date: 2015-06-16 16:23 UTC
4
tags:
5
---

ซึ่งส่วน --- จะถูกเรียกว่า frontmatter โดยใช้ syntax แบบ yaml เป็นตัวกำหนด เช่น title จะเป็นอะไร, date เป็นอะไร เป็นต้น

สามารถศึกษา yaml เพิ่มเติมได้ที่ yaml.org

ส่วนหลัง --- ก็จะเป็น markdown ปกติ เช่น

1
# header1
2
## header2
3

4
This is paragraph
5

6
[Go to home](/)

Middleman จะทำการ generate ไฟล์ชื่อว่า 2015-06-16-my-new-article.html.markdown ไว้ในโฟลเดอร์ source โดยมีฟอร์แมตคือ yyyy-mm-dd-title.html.markdown ซึ่งตรงส่วนนี้สามารถปรับแต่งได้ด้วยไฟล์ config.rb

หรือเราสามารถสร้างไฟล์บทความได้เอง โดยจะมีฟอร์แมตพื้นฐานเลยก็คือ yyyy-mm-dd-title.html.markdown

ลองทำการแก้ไขข้อความในไฟล์ใหม่ จากนั้นรันเซิฟเวอร์ดูใหม่อีกครั้ง ก็จะเห็นบทความใหม่ ปรากฎที่หน้าแรกของเว็บ เรียบร้อย

ไฟล์ config.rb มีอะไรบ้าง ?

เรามาดูไฟล์ config.rb กันดีกว่า ว่ามีอะไรบ้าง เช่น

• blog.permalink : เราสามารถตั้งรูปแบบ url ของบทความได้
• blog.sources : เอาไว้ระบุที่อยู่ของไฟล์บทความของเรา สามารถตั้งเป็นโฟลเดอร์ก็ได้ เช่น posts เมื่อสร้างไฟล์ไว้ในนี้ ทุกไฟล์ ก็จะถูก generate เป็นบทความ
• blog.default_extension : สามารถเปลี่ยน extension ไฟล์ ก็ได้ เช่น .md

หรือแม้แต่จะใส่ global variable ลงไปก็ได้ เช่น

1
set :blog_url, 'https://devahoy.com'

สุดท้าย เราจะทำการ generate ไฟล์ไปเป็น static site ด้วยคำสั่ง

1
middleman Build

ไฟล์ทั้งหมดจะถูก generate ไว้ที่โฟลเดอร์ build เป็นอันเรียบร้อย

สำหรับรายละเอียดเพิ่มเติม สามารถอ่านเพิ่มได้จาก Document ของ Middleman เลย

ส่วนบทความหน้า จะนำเอา Clean Blog Template มาปรับใช้กับ Blog ด้วย Middleman นะครับ หลังจากเคยเอามาใช้กับการทำ Ghost Theme Development มาแล้ว :)

Additional Resources

บทความอื่นๆที่น่าสนใจเกี่ยวกับ Middleman ที่ผมไว้อ่านตอนฝึกเขียนใหม่ๆ นอกจาก Documents ก็จะมี

• Building static websites with Middleman
• Understanding Middleman – the static site generator for faster prototyping
• Site Redesign Using Middleman