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

Table of Contents

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

หลักจากจบ 3 Parts ตอนนี้ตัวบล็อกของเรา ก็เกือบจะเสร็จสมบูรณ์แล้ว (ในส่วน features หลักๆ) ที่เหลือก็อยู่ที่แต่ละคนจะไปปรับแต่ง เพิ่มเติมกันเอาเอง จึงขอข้ามไปขั้นตอน เมื่อสร้างบล็อกด้วย Middleman เสร็จแล้ว ส่วนสุดท้ายก็คือการ Deployment หรือก็คืออัพโหลดไฟล์ไปไว้ที่โฮสติ้งจริงๆ

Generate build folder

ใน Middleman จะมี feature สำหรับสร้างไฟล์เพื่อ deploy โดยเราจะใช้คำสั่ง

1
middleman build
2

3
create  build/stylesheets/clean-blog.css
4
     create  build/stylesheets/bootstrap.min.css
5
     create  build/stylesheets/bootstrap.css
6
     create  build/stylesheets/clean-blog.min.css
7
     ..
8
     create  build/2012/01/01/index.html

ตัว Middleman จะทำการ generate ไฟล์ต่างๆ ไว้ที๋โฟลเดอร์ build ในโปรเจ็คของเรา หากลองดูภายในโฟลเดอร์นี้ จะเห็นไฟล์ต่างๆประมาณนี้

├── 2012
│   ├── 01
│   │   ├── 01
│   │   │   ├── example-article.html
│   │   │   │   └── index.html
│   │   │   └── index.html
│   │   └── index.html
│   └── index.html
├── 2012-01-01-example-article
│   └── index.html
├── 2015
│   ├── 06
│   │   ├── 16
│   │   │   ├── index.html
│   │   │   └── my-new-article.html
│   │   │       └── index.html
│   │   └── index.html
│   └── index.html
├── feed.xml
├── images
│   ├── about-bg.jpg
│   ├── contact-bg.jpg
│   ├── home-bg.jpg
│   ├── post-bg.jpg
│   └── post-sample-image.jpg
├── index.html
├── index.html.erb.tmp
├── javascripts
│   ├── bootstrap.js
│   ├── bootstrap.min.js
│   ├── clean-blog.js
│   ├── clean-blog.min.js
│   ├── jquery.js
│   └── jquery.min.js
├── partials
├── stylesheets
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── clean-blog.css
│   └── clean-blog.min.css
└── tags
    └── example
        └── index.html

15 directories, 28 files

ใช้ middleman build --verbose เพื่อ output message กรณีมี errors

ทดสอบเข้าโฟลเดอร์ build แล้วลองเปิดไฟล์ index.html หรือจะจำลองด้วย Web Server อื่นๆ เช่น

1
python3 -m http.server PORT_NUMBER

สังเกตเห็นว่า ตอนนี้บล็อกของเรา สามารถที่จะรันบนเว็บเซิฟเวอร์ได้แล้ว แน่นอน มันเป็นแค่ Static จะก็อปปี้ไปวางไว้ที่ไหนก็ได้ Hosting น่าจะรองรับแทบละ 100%

Deployment

หลังจากที่เราได้โฟลเดอร์ build มาแล้ว การจะก็อปไปวางบน Hosting ด้วย FTP หรืออะไรก็แล้วแต่ ทุกๆครั้ง มันก็ค่อนข้างจะยุ่งยากซักหน่อย เราจะหลีกเลี่ยงการทำอะไรซ้ำๆ ซึ่งไม่เกิดประโยชน์อะไรเลย โชคดีที่ Middleman มี gem ที่ชื่อว่า middleman-deploy มาให้ แค่ตั้งค่าไม่เยอะมาก ทุกๆครั้งที่เราทำการ build หรือ สั่ง deploy มันก็จะทำการ deploy ไปที่ server ให้เราเอง ประหยัดเวลาได้เยอะเลย

• middleman deploy

ทำการเพิ่ม Gem Middleman ที่ไฟล์ Gemfile

1
gem 'middleman-deploy', '~> 1.0'

จากนั้นสั่ง

1
bundle install

ต่อมาเปิดไฟล์ config.rb ขึ้นมา แล้วเพิ่มส่วนนี้ลงไป

1
activate :deploy do |deploy|
2
  deploy.build_before = true
3
  deploy.method   = :ftp
4
  deploy.host     = 'ftp.yoursite.com'
5
  deploy.path     = '/var/www/yoursite'
6
  deploy.user     = 'youruser'
7
  deploy.password = 'yourpassword'
8
end

ที่นี้เวลาเราจะ Deploy ขึ้น Hosting จริงๆ ก็แค่พิมพ์

1
middleman deploy

Middleman ก็จะทำการ generate โฟลเดอร์ build จากนั้นก็จะทำการ ก็อปโฟลเดอร์ build ขึ้น ftp ตามที่เราได้ config ค่าไว้ด้านบน นั่นเอง

หรือหากใครใช้ Github Pages เป็น Hosting ก็แค่เพิ่มส่วนนี้ลงไปแทน FTP

1
activate :deploy do |deploy|
2
  deploy.method   = :git
3
  deploy.build_before = true
4
  deploy.branch   = 'master'
5
end

Note: deploy.branch ถ้าเป็น Github Pages แบบ User/Organization ตัว branch จะเป็น master หากเป็น Projects ตัว branch จะเป็น gh-pages ศึกษาเพิ่มเติมได้ที่ Github Pages

ซึ่งตอนนี้เราก็ Deployment แบบ Auto ด้วย Command Line กันไปแล้ว แต่เดี๋ยวก่อน!!

มันยังมีง่ายกว่านั้นอีก คือ Continuous Deployment คืออะไร? ลองไปศึกษาเพิ่มเติมกันดูครับ หลักๆก็คือ มันช่วยรันเทส deployment อัตโนมัติให้เราได้ อย่างที่ DevAhoy ใช้คือ Codeship.io ซึ่งมันช่วยให้เราสามารถที่จะเขียน script สั่งทำอะไรก็ได้ ทุกๆครั้งที่เราทำการ commit push ไป อย่างเช่นบล็อกนี้ ผมจะตั้งไว้ ให้ทุกๆครั้งที่ผมใช้ git push จะให้มันทำการรันสคริป ของการ deployment เบื้องต้นประมาณนี้

rm -rf build
git remote set-branches --add origin gh-pages
git fetch
middleman deploy

แค่นี้ทุกๆครั้งที่ git push ก็ไม่ต้องทำอะไรเพิ่มเลย ตัว Codeship ก็จะทำงานต่อจากนี้ให้เราเองทั้งหมด ง่ายมั้ย? หากอย่างรู้อะไรเพิ่มเติมลองเข้าไปเล่น Codeship กันดูนะครับ

Note: เผื่อบางคนใช้ Codeship หาก git push ไหนที่เราไม่ต้องการให้มันรัน ก็สามารถใช้ commit message : --skip-ci หรือ [skip-ci] ได้ครับ

สรุป

หลังจากที่ผ่านมา 4 Parts อาจจะไม่ละเอียดเท่าไหร่ แต่คิดว่าอย่างน้อยก็เป็นบทความที่ให้ผู้ที่เข้ามาอ่าน ได้ลองนำไปใช้งานและไปต่อยอดเขียนบล็อกเป็นของตัวเองนะครับ สุดท้าย Source Code ทั้งหมดอยู่บน Github ครับ