จับคุณผีมาช่วยในการทำเว็บบล็อกกันเถอะ กับ Ghost CMS

programming Mar 07, 2020

เรื่องราวการดุ๊ปบล็อกมาที่ใหม่ ซึ่งเรื่องนี้มันยาว เรียกย้ายก็ไม่ได้ ตอนนี้ยังดุ๊ป แค่ content ใหม่ๆจะมีที่นี่กับ blacklens pub และอื่นๆใน medium

เดิมทีมีทั้ง blogspot และ medium แล้วยังมีเว็บพอร์ตแยกใน Firebase Hosting อีก

แล้วบอกก่อนเลยว่า การมีหลายๆที่ มันก็ดูจะยุ่งยากไปด้วยนะ

จริงๆตอนแรกว่าจะย้าย แต่ทำเองอ่ะนาน เลยแค่ duplicate data มาก่อนแล้วค่อยปรับแก้กันไป

ทางเรามีแพลนจะย้ายบล็อกมาแต่ปีที่แล้ว (ปี 2019 แต่คิดไว้ตั้งแต่ปี 2018) แต่ด้วยความไม่ถนัดสายเว็บ เลยไม่ค่อยได้ทำ ปีนี้เลยเริ่มวางแผนทำจริงจัง โดยการแสดงบล็อกทั้งหมดในนั้นและอ่านได้ก่อน ทั้งในเว็บและในแอพแอนดรอยด์ แล้วค่อยขยับมาทำเว็บ CMS จัดการหลังบ้าน

อันนี้เราจะเล่าคร่าวๆในรายการ CodeClub จ้า

ฝั่ง Design

เปลี่ยน logo และทำ Color Index ใหม่

เริ่มแรก เราเปลี่ยน logo ใหม่ทุกตัว โดยทำ color index ขึ้นมา โดยใช้ลองเปลี่ยนใน Material Design Color Tool ได้แบบนี้


เราเองก็ลองหาสีที่เป็น MikkiPastel จริงๆ พบว่าสีเดิมที่เคยใช้ในแอปนั้น เป็นสีแดงที่ไปหยิบมาจาก Android อีกที และสีนํ้าตาลจากพื้นหลัง Avatar ของเพจนั่นเอง


เราเลยลองทำ Cover ของทุกอย่างที่เป็น MikkiPastel ทั้งหมดเป็นรูป Cover ใหม่ที่มีสีสันมากขึ้น โดยนำรูปโคมที่ถ่ายผ่านแอป Huji ที่ Emporium มาใส่หน้า Sample ของ Material Design และน้อง Android ที่โบกธง Kotlin จากเดิมที่หยิบยืมเว็บรูปฟรีมาใช้ แต่อาจจะมีเปลี่ยนได้อีกในอนาคต


และกำหนดสี CI ใหม่ให้สอดคล้องกันด้วยหล่ะซึ่งนอกจากจะสอดคล้องกับ cover นี้แล้ว ยังสอดคล้องกับ Lifestyle การกิน

สีแดงเดิมทีเป็นสีแดงของ Android นำมาปรับเป็นสีที่เรียกว่า Maguro Red (#B71D25) นั่นเองงงและสีรองลงมาสืบเนื่องจากสีพื้นหลังเดิมของบล็อกนี้เป็นสีคล้ายๆแซลม่อนสุก จึงนำมาเปลี่ยนเป็น Light Pink Salmon (#FF9999) แทน

ตัวโลโก้ก็เปลี่ยนให้สอดคล้องกันด้วยนะ โดยมีคอนเซปเป็น 8-bits โดยไม่ต้องวาดและถ่ายรูปใหม่ ทำด้วยเว็บ https://make8bitart.com/ จ้า

ฝั่งแอพ

ปรับโปรเจกในแอพใหม่

ตัวแอพบล็อกเดิมนั้นใช้ blogspot API เขียนด้วยภาษา Java ดังนั้นเราจะเปลี่ยนมาเป็น API ที่เราเขียนเองโดยข้อมูลทั้งหมดจะเก็บไว้ใน Cloud Firestore และเขียนด้วยภาษา Kotlin ซึ่งพยายามปรับไปเรื่อยๆ โดยจะทำความเข้าใจและเริ่มใช้ MVVM แทนของเดิมที่เป็น MVP เพื่อให้สามารถเล่นอะไรใหม่ๆได้ >> ยังไม่เสร็จจ้า เดี๋ยวเล่าแยกถ้าเสร็จแล้ว

เพิ่มลูกเล่นด้วย Lottie

แน่นอนว่าเราเองขี้เกียจทำ view แบบไม่ค่อยสวย เลยไปหา Lottie ต่างๆที่เป็น open source จาก https://lottiefiles.com/ เพื่อเอาไปใช้ในหน้าต่างๆ โดยเริ่มจากในแอพก่อน และตามด้วยในเว็บ

ตอน loading ใช้เจ้าไดโนเสาร์ตัวนี้ซึ่งค่อนข้าง made sense ดี

Dino Loading on Lottiefiles. Free Lottie Animation
LottieFiles is a collection of animations designed for Lottie and Bodymovin - gone are the days of bugging your developer

ตอน error ใช้ตัวนี้ แต่เขียน text กำกับไว้ด้านล่าง พร้อมปุ่ม re-loading

Loading Error on Lottiefiles. Free Lottie Animation
In a rare event that our backend has issues sending data to users when taking our mobile questionnaire.. Use on your web, react, flutter, xamarin iOS and Android projects and apps

ตอนโหลดก็คิดว่าอันนี้ไว้ด้านบนก็ไม่เลวนะ

Progress Bar on Lottiefiles. Free Lottie Animation
LottieFiles is a collection of animations designed for Lottie and Bodymovin - gone are the days of bugging your developer

แถมในเว็บนี้เราสามารถปรับสีหรืออะไรบางอย่างได้ด้วยนิดหน่อยนะ

ฝั่งหน้าเว็บ

ลอง Duplicate Data มาสิ

ตามบล็อกที่เคยเขียนไปเลยแล้วกัน

ทำ API กับ Cloud Firestore ด้วย Cloud Functions for Firebase
ด้วยความที่เราอยากย้ายบล็อกใหม่ๆมาลง Firebase Hosting ของเรา เลยเอา data จาก blogspot มาลง Cloud Firestore แล้วก็ต้องสร้าง API…

ตอนแรกก็รู้สึก เอ้ออออ ข้อมูลหลังบ้านมาแล้ว น่าจะทำหน้าบ้านได้ไม่ยาก จริงหรอ?

ดูสิ่งที่เรา planing กันดีกว่า

โอ้โหววว หน้าบ้าน เราเองทำแบบนั้นไม่ค่อยเป็นด้วยสิ นี่ลองเอาโปรเจก Vue.js ที่ไป workshop มา modified นะเนี่ยยยย ฮืออออออ

หลังบ้าน เอ๊ะถ้าเราจะเขียนบล็อกใหม่ทำไงหล่ะ ระบบ CMS นะเว้ยยยยย ทำเองไหวหรอ แล้วเอาเวลาที่ไหนไปทำอย่างอื่นอ่ะเนี่ย


หา CMS ช่วยเราดีกว่า

เนื่องจากเราอยากย้ายบล็อกกับ portfolio มาไว้ที่เดียวตามหลัก inbound marketing เพราะปกติเขียนบล็อกที่ blogspot แล้วก็ใน medium ซึ่งมันก็หลายที่ ไหนจะ web portfolio ใน Firebase Hosting อีก พอเรามาเขียนบล็อก coding ใน blogspot เหมือนตัว editor มันไม่ support การเขียนตัวอย่างโค้ดแบบสั้นๆเท่าไหร่ เพราะแบบยาวๆเราจะใช้ gist อยู่แล้วเนอะ และก็เรื่องขนาดรูป ตัว HTML ที่ทำให้ตัวหนังสือจะแปลกๆหน่อยตอนเขียนเสร็จ ก็เลยลองไปสำรวจที่เว็บนี้ก่อน

headlessCMS
headlessCMS is a leaderboard of the top Content Management Systems for JAMstack sites. Promoting a static approach to building websites.

จริงๆก่อนหน้านี้แพลนว่าจะใช้ Wordpress นะ เลยลองเล่น wordpress.com ก่อน ดูๆไปแล้ว ได้ยินว่ามันมีช่องโหว่เยอะ และธีมไม่ถูกใจเราด้วย แล้วได้ยินชื่อๆนึง ที่พี่ๆ bigbears.io ใช้กัน นั่นคือ ghost.org นั่นเองง ตอนนั้น wording ว่า "เอา podcast ลง ghost" นี่แหละ podcast ที่ว่าก็รายการ CodeClub PodCast นั่นแหละ และ Google หาอ่านเขาว่าต้องทำอะไรกันบ้างนะ

CodeClub :: PodCast
เรื่องอัพเดทเล่าสู่กันฟังของชาวเดฟ

ลอง search Google แล้วก็เจอบล็อกต่างๆที่ป้ายยาไว้

Ghost: The #1 open source headless Node.js CMS
The world’s most popular modern open source publishing platform. A headless Node.js CMS used by Apple, Sky News, Tinder and thousands more. MIT licensed, with 30k+ stars on Github.

พบว่า มันมีธีมฟรีที่สวยสำหรับเรา ตรงตามที่เราอยากได้เลย แล้วตัว editor มีความคล้าย medium ด้วยนะ

แล้ว Ghost CMS คืออะไรอ่ะ?

ghost คือ CMS ตัวหนึ่ง ที่สามารถจัดการเว็บบล็อกเราได้ โดยที่เรามีหน้าที่แค่ทำ content และ custom ต่างๆให้สวยงาม ไม่ต้องไปยุ่งยากกับการทำระบบขึ้นมาเองทั้งหลังบ้านแล้วหน้าบ้าน ที่เราเคยเห็นๆมา CMS ก็จะมี WordPress Blogger หรือเจ้า Medium ก็ด้วยนะ ถึงมันจะออกโทนโซเชี่ยวก็ตาม

CMS ย่อมาจาก Content Management System คือ ระบบการจัดการเนื้อหาของเว็บไซต์

ในเว็บของ ghost.org เขาบอกว่า fast open simple secure เป็น platform ที่เหมาะกับทั้ง publisher entrepreneurs และ developer

สิ่งที่เขาโม้ไว้สำหรับคนทั้ง 3 กลุ่ม คือ

  • สำหรับ publisher ก็คือ editor ใช้ง่าย และจัดการ content ต่างๆได้ง่าย, มีเรื่อง SEO, รองรับทั้งหน้าจอ desktop และ mobile ก็คือเป็น responsive เนอะ
  • สำหรับ entrepreneurs คือ สามารถทำระบบสมาชิกหรือทำ subscription ต่างๆได้ (ซึ่งอันนี้ยังไม่ได้ลอง)
  • และสำหรับ developer คือ เป็น headless CMS ที่เป็น Node.js, เร็วกว่า WordPress 19 เท่า, มีเรื่อง security, custom theme หรืออะไรต่างๆได้ และยัง integrate กับตัวอื่นๆได้อีก เช่น สามารถติด Analytics หรือ tool อื่นๆของฝั่ง Google ได้ แล้วก็ embeded content ต่างๆจากใน Facebook, Twitter, Spotity, YouTube หรือใส่รูปสวยๆจาก Unsplash ได้

ลองใช้งานเจ้าผีดู

การทดลองเล่น คือไป fork ออกมาก่อน ซึ่งต้อง clone สองตัว คือ ghost-core และ ghost-admin แล้วทำตามในนี้นั่นแหละ

Install from Source
This guide is for installing a local development copy of Ghost from source, primarily for the purpose of modifying Ghost core Prerequisites…

หรือจะลองอ่านตามนี้ดู

How to install and try Ghost Blog in your own computer
Choosing a suitable blogging platform can be daunting… How do we know if Ghost is a suitable blogging platform for us? The best way perhaps is to install Ghost Blog locally and try it out.

ธีมที่เราใช้อยู่นี้ ชื่อว่า liebling ซึ่งมี dark mode ด้วย ข้อเสียก็คือ สีใน dark mode บางสีอ่านยากจังเลย

eddiesigner/liebling
Beautiful and clean Ghost theme that is easy and comfortable to use. To get the latest version please head over the releases page 👉🏼 - eddiesigner/liebling

การใช้งานระบบ admin นั้นง่ายมากๆ เท่าที่ใช้ดูพบว่า เรื่องใส่ tag อาจจะต้องกดมาใส่เองทีละอันอ่ะ มันติ๊กแล้วใส่หลายๆบล็อกไม่ได้อ่ะ

การ Migrate Data เข้ามาใน Ghost

งานยากจริงน่าจะตรงนี้แหละ ตรงนี้เลย ติดมาเป็นเดือนๆ เพิ่งแก้ได้ช่วงหลังวาเลนไทน์จ้าาา

จริงๆใน document อ่ะ มี tool ที่เป็น Official ตัวเดียวเองที่ใช้ใน workpress

How to Migrate to Ghost from other platforms - Docs
A detailed guide for migrating to the Ghost publishing platform from WordPress, Tumblr, Medium, Blogger, and other CMS tools.
Ghost

ซึ่งฝั่ง blogger นั้น ใช้ tool อื่นๆได้ยากมาก แล้ว blogger2ghost มันหายไปแล้วด้วย ก็เลยใช้วิธี migrate blogger เข้า wordpress.com ก่อน แล้ว export ออกมาเป็น wordpress.org แล้วใช้ tool export มาที่ ghost ใน localhost อีกรอบนึง อื้มมมมมม

ลืมเล่า ทำไมถึงต้อง export ghost ที่ wordpress.org หล่ะ เพราะว่า พวก plug-in ต่างๆนั้น ไม่สามารถใช้ใน wordpress.com หล่ะสิ เลยต้องสร้าง droplet wordpress.org เพื่อมา migrate นี่แหละ

ส่วนฝั่ง medium มี tool ที่ใช้ไม่ยาก เป็น python3 ตามบล็อกนี้จ้า

From Medium to Ghost 2.0
Ghost has advanced so much this year. At this point, I highly recommend it to everybody writing a technical blog. It is time to stop fiddling with Medium and jump over.

แรกๆเราจะติดที่ว่าดันไม่ได้ json output ออกมานั่นแหละ ตอนหลังระหว่างบิ้วแอพเอ้อออลองดู พบว่าบางบล็อกที่มีปัญหาแบบตัว tool มันติด error ก็พยายามไปส่องดูว่าน่าจะเกิดจากอะไร เช่น giphy น้องเฌอปรางหายไป แล้วมันไม่สามารถเอาออกมาได้ ก็แก้แล้ว export medium ใหม่ ไปเรื่อยๆจนครบ ผลลัพธ์ก็คือจะได้ไฟล์ zip ที่มี json กับรูปทั้งหมด

ชอบมาพังตรงนี้ตลอด พอไปดูงงๆว่าทำไมพังหว่า สุดท้ายลบ draft นี้ใน medium ทิ้งเลย แล้ว export จาก medium ใหม่เลย จริงๆอันนี้ คือหัวข้อตอนแรกที่ส่ง ในหัวข้อการพูด งาน Android Bangkok Conference 2019

ซึ่งลอง ghost บน localhost ก็โอเคดีนะ แต่พอลง production จริงดัน import zip ไม่ได้ เลยทำได้แค่ import json ผลที่ได้คือ รูปไม่มาด้วยจ้า แก้มือเลยจ้า ทั้ง cover แล้วก็ slug ซึ่งเราสังเกตุอีกว่า อ่อออ มาจากชื่อบล็อกไง slug generate มาจากชื่อบล็อก เลยตามแก้อีกจ้า

จริงๆหลักๆจะติดเรื่องของ slug ของบล็อก ที่ต้องแก้มือทีละอัน ไหนจะรูปหายใน cloud จริง ไหนจะลิ้งที่ต้องลบแล้วแสดงใหม่ เอ้าา gist ช้านไม่รองรับหรอ ทำไมตอนแสดง view ของ url รูปหายไป video YouTube หาย ฮืออออ แก้ไปสิ ประมาณ 270 บล็อกเองเนอะ ;_____; ทุกช่องทางที่ migrate มา

การติดตั้ง Ghost

การลง ghost บน DigitalOcean ก็ไม่ยากเย็น

Ghost Hosting | DigitalOcean Marketplace 1-Click App
Ghost is a fully open source, adaptable platform for building and running a modern online publication. It powers blogs, magazines and journalists from Zappos to Sky News.
ติดตั้ง Ghost+ssl บน Digital ocean โครตง่าย!!!
Ghost คือ blogging platform ที่ไว้สำหรับคนที่ต้องการมีเว็บบล็อกเป็นคนตัวเอง ก่อนหน้านี้ snappytux.com สร้างมาจาก drupal โดยใช้มาตั้งแต่ drupal 6 มาจน drupal 8 แล้วดันเกิดปัญหาระหว่างขั้นตอนอัพเดทเวอร์ชั่น ทำให้ผมต้องเสียเนื้อหาทั้งหมดที่เคยเขียนมาไปกับ drupal T.T และผมพลาดที่ไม่ได้สำรองข้อมูลไว้ก่อ…

เปิดมาเจอหน้าตาแบบนี้คือถูกต้อง

เราซื้อโดเนมที่ z.com ดังนั้นไป config แบบนี้ก่อนที่จะลง ghost ใน droplet จริง

วิธีใส่ค่า DNS Record และ ลบ DNS Record

การ set domain เพิ่ม เนื่องจากว่า ตอนแรกดันใส่ mikkipastel.com แล้วพอเข้า www.mikkipastel.com แล้วมันไม่ได้นี่แหละ เลยต้องเพิ่ม

How do I change my configured site URL?
If you’re running into issues with a misconfigured protocol or domain, you can update it easily with the ghost config command. Find out how.

แล้วก็อย่าลืมใส่ SSL ให้ตัว url ของบล็อกเรานั้น เป็น https นะ ทำตามนี้เลย

Redirecting a Ghost blog domain with Let’sEncrypt SSL
Running your own Ghost blog is generally a pretty frictionless experience. I love how easy it is to get set up and how little effort is required from there on in. The Ghost CLI tool has you covered for quick config changes, updates and the like - but it starts to fall short when you want to make m…

สรุปแบบจริงๆจังๆหน่อย ว่าต้องทำอะไรบ้าง

  • มี account DigitalOcean
  • มี domain ในที่นี้เพิ่งจดกับ z.com มา ซึ่งอันนี้ก็ตามแต่ละเจ้ากันไป
  • เพิ่ม droplet ใน DigitalOcean เลือก ghost
  • จากนั้น create new record type A เป็น domain.com และ www.domain.com พร้อมใส่ IP Address ที่ได้จากการสร้าง droplet ลงไป
  • กลับไปที่ z.com ไปเพิ่ม DNS Record เป็น type A เช่นกัน ให้ตรงกับ DigitalOcean
  • กลับไปที่ DigitalOcean ไปที่ droplet ของเรา กดปุ่ม more เลือก access console แล้วติดตั้งให้เรียบร้อย
  • ถ้าเข้าหน้า Admin ของ Ghost ไปก็ถือว่าถูกต้อง

สุดท้ายบน production เรามานั่งตาแตกแก้ slug ใส่ cover แล้วอันที่ migrate จาก blogger -> wordpress.com -> wordpress.org พบว่า ตัว content เป็น HTML ก้อนๆไปเลยจ้า ถ้ารูป original ใน blogger หายก็ ลาก่อยยยย แก้มือกันไปฮะ

มาใส่อื่นๆกันเถอะ

ติด Google Analytics พบว่าใส่ง่ายอยู่นะ ใส่ที่ header และพอลองเปิดหน้าเว็บของเราดูนั้น มันก็เข้ามาจริงๆด้วย เย้ๆ

Official Ghost + Google Analytics Integration
Integrate your Ghost publication directly with Google Analytics using sensible code injection for in-depth site metrics in realtime 👉📈

อื่นๆที่เอ้อออ แปะโป้งไว้ก่อนนน

  • portfolio ดูสิว่าจะเหมือน wordpress ไหมนะ
How to create a portfolio in ghost - Joan Mira
Personal website of Joan Mira. A Front-end Engineer / Interactive Developer / Creative Technologist / UX Designer
  • ติดตั้ง Adsense พบว่า ต้องไปใส่ที่ธีมจ้าาาาา เดี๋ยวเราจะลองแงะธีมพร้อมด้วยแก้สี dark mode ขัดจายยยย มองไม่เห็นเลย
Official Ghost + Google AdSense Integration
Integrate your Ghost site with Google AdSense to introduce relevant ads to your audience and generate revenue while you focus on your content! ✍️💰
  • ติด Google Search Control
Official Ghost + Search Console Integration
Keep on top of your site’s SEO performance by integrating Ghost with Google Search Console to monitor indexed pages, search impressions, clicks and more!
  • ดูเรื่อง SEO เพิ่ม มันต้อง optimize เพิ่มยังไงกันนะ ทำไมเว็บชั้นยังไม่ติดหน้า search Google ฟ่ะ
  • API เอาไปใช้ต่อในแอพได้ หรือทำหน้าบ้านใหม่ก็ยังได้
Ghost Content API Documentation
Ghost’s RESTful Content API delivers published content to the world and can be accessed by any client to render a website. Read more on Ghost Docs.
  • SSL หน้าเนื้อหาบล็อกยังไม่มี ซึ่งอันนี้ยังงงๆที่หน้าแรกมี แต่หน้า content ไม่มี เอองง

สุดท้ายมาเตือนกันก่อนนิดนุง

  • การทดลองเล่นคร่าวๆ เราลอง clone จาก github ซึ่งต้อง clone สองตัว คือ ghost-core และ ghost-admin แล้วมาลองเล่นระบบมันดูก่อน แล้วค่อยเสียเงินจริง เช่น จดโดเมน และ ทำ droplet ใน DigitalOcean (เพราะทุกอย่างมันมีต้นทุนที่ต้องจ่ายเว้ย)
  • จริงๆคือลง production ยากถ้าไม่ใช้ DigitalOcean
  • อย่าย้ายบล็อกมาแบบเรา ซึ่งบล็อกเราเยอะมาก ทั้งหมดคือเกือบ 300 บล็อก มานั่งแก้ slug แก้รูป แก้โน้นนี่ งานถึกล้วนๆ แถม migrate ยากอีก ถ้าทำบล็อกใหม่เลยก็ลองก่อนว่าชอบไหม
  • อย่า draft บล็อกใน mobile site เดี๋ยวพัง ซึ่งมันต่างจาก medium ตรงนี้แหละ

สุดท้าย ถ้าอ่านแล้วงงๆก็นั่นแหละ ขออภัยด้วยจริงๆ คืองานเยอะและไม่ค่อยมีเวลาด้วยแหละ ;____; แต่พยายามให้คนอ่านพอเข้าใจแล้วอยากมาลองเล่นนี่แหละจ้า

Tags

Minseo Chayabanjonglerd

Android Developer ผู้เป็นเจ้าของบล็อก MikkiPastel ที่ชอบทำหลายๆอย่างนอกจากเขียนแอพแอนดรอยด์ เช่น เขียนบล็อก เขียนแชทบอท เรียนออนไลน์ อ่านหนังสือ วาดรูปเล่น ดู netfilx สั่งอาหารอร่อยๆกัน เป็นต้น

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.