#121 - Redesign เว็บ Devahoy

01 May 2020 ProgrammingSoftware Development

Happy mess
Photo by Steve Johnson / Unsplash

สวัสดีครับ วันนี้ขอพูดถึงเรื่องเกี่ยวกับ Software Development ซักนิด นั่นก็คือการพัฒนาเว็บบล็อกของผมเอง Devahoy.com ซึ่งวันนี้จะมาพูดถึงเกี่ยวการ Redesign เว็บไซต์นั่นเอง

ตัวผมอาจจะแปลกซักเล็กน้อย คือผมชอบ Redesign เว็บตัวเอง บ่อยๆ บางทีเห็นสี เห็น Layout ก็อยากเปลี่ยน บางทีก็รู้สึกปรับนู้นนี่ดีกว่า กลายเป็นว่า ตั้งแต่ทำเว้บมา ผมก็จัดการ Redesign เว็บไปแล้วหลายครั้งด้วยกัน ซ้ำแล้ว บางทีไม่ใช่แค่ Redesign อย่างเดียว บางทีรื้อโค๊ด นั่งวางโครง วาง Structure ใหม่เลยก็มี ทั้งเปลี่ยน Stack ทั้งเปลี่ยน Library เป็นต้น

สิ่งที่ทำมันมีทั้งความสนุก และไม่พอใจกับสี กับ Design / Layout ปัจจุบัน รวมถึงการได้ลอง Technology ใหม่ๆ ก็เอามาลองปรับใช้กับใน Blog ก็เลยเป็นที่มาว่าทำไมเว็บมันเปลี่ยนแปลงบ่อย ปรับบ่อยนั่นเอง


จุดเริ่มต้น

จุดเริ่มต้นของDevahoy ก็ต้องย้อนไปปี 2013 ตอนที่ผมเริ่มทำบล็อกใหม่ๆ ตอนนั้น ผมน่าจะทำงานได้ 2 ปีกว่าๆ ละ ประกอบกับช่วงนั้น ได้เริ่มมาหัดจับ Linux ได้ลอง Setup Server ก็เลยต้องจำพวก Command Line เลยเขียนบล็อกบันทึกคำสั่งไว้ ต่อมาก็ Android และก็มาเรื่อยๆ เรียกได้ว่า Blog ก็เปรียบเสมือนเส้นทางการเรียนรู้ เป็นเหมือนสมุดบันทึกของผมเอง จะเห็นว่าช่วงไหนที่เขียนบทความเนื้อหานั้นๆเยอะ ก็แสดงว่าผมสนใจ หรือกำลังศึกษาเรื่องนั้นเยอะ เช่น Android , Game Development, Web Development ตามลำดับ

ทีนี้มาดู Timeline ที่ผมเคย Redesign และ ก็ปรับเว็บบ้างดีกว่า เอาเท่าที่นึกออก (นี่แค่ๆเว็บบล็อกเดียวนะเนี่ย ฮ๋าๆ เปลี่ยนอะไรบ่อยจัง)

  • ปี 2013 บล็อกทีแรกใช้ Wordpress และ Hosting ที่โฮสไทย THZHost ครับ
  • ปี 2014-2015 เริ่มมาใช้ Jekyll และ Host ไว้ที่ Github Pages ตั้งแต่นั้นมา
  • ปี 2015 มั้ง ก็เปลี่ยนจาก Jekyll ไปใช้ Middleman
  • ปี 2015-2016 มีปรับ Redesign หน้าเว็บใหม่หมดเลย แต่ยังคง Stack เดิม
  • ปี 2017 หรือ 2018 นี่แหละ มีลองย้ายไป Ghost Blogging อยู่พักนึง หรือ 2016 หว่า ก็จำไม่ได้ จำได้ว่าต้องแปลง Markdown ของ Jekyll ไปเป็น JSON ของ Ghost อยู่ช่วงนึง และก็แปลงกลับมาเป็น Markdown อีกครั้งตอน มาเป็น Gatsby ฮ่าๆ
  • ปี 2019 ถึง 2020 ต้นปี เพิ่งนั่งรื้อเว็บ ปรับเปลี่ยนให้เป็น Layout แบบใหม่ (และก็มีปรับ มาเรื่อยๆ ตลอดทาง)
  • ปี 2020 ได้เขียนบล็อกอีกเว็บ ก็คือบล็อกนี้ โดยใช้ Ghost เป็น Admin และใช้ Gatsby เพื่อ build เป็น Static และเริ่มติดใจ เพราะว่ามันเขียนสะดวกดี และข้อดีคือ มันแยกส่วน Content กับ Code ออกจากกัน (เมื่อก่อน คิดว่าเก็บ Markdown ไว้ก็สะดวกดี แต่ไปๆมาๆ พอไฟล์เริ่มเยอะ เริ่มใหญ่ มันก็ไม่ค่อยสะดวกเท่าไหร่นา)

จะเห็นได้ว่า เปลี่ยน Stack ไปบ่อยมาก แต่ CSS ก็ยังคงใช้ตัว Base เดิมคือ skeleton css อาจจะมีพวก Bourbon ที่เป็น Mixin บางช่วง หลังๆ ก็ตัดออกไปเหลือแต่ skeleton เพียวๆ จริงๆใช้แค่ grid เอง


เป้าหมาย

ทีนี้พอมาพูดถึงเป้าหมาย ของรอบนี้ว่าทำไมถึงจะ Redesign เพราะว่า ฝืนใช้ตัว Skeleton CSS ตั้งแต่ 4-5 ปีมาแล้ว custom มาเรื่อยๆ แล้วก็ใช้มาเรื่อยๆ แต่ว่าอยากเปลี่ยน stack เนื่องจากเราใช้ Gatsby และ React ก็เลยอยากให้เป็น Component base เพียวๆ ไปเลย ตอนนี้ที่คิดไว้ก็คือ Version ถัดไปจะเป็นแบบนี้

  • Gatsby.js
  • MDX สำหรับ Markdown และ React.js เผื่อจะแทรก Component ใน Markdown
  • Theme UI และ Emotion หรือ Styled Component ไว้ทำ Component ต่างๆ
  • Gatsby Cloud ไว้ Build + Netlify ไว้ Hosting
  • Features ปัจจุบัน ต้องอยู่ครบ เปลี่นนแค่ design และ codebase เฉยๆ

ซึ่งคาดว่าจะใช้เวลาทำ ราวๆ 2 เดือน ประเมินไว้คร่าวๆ น่ะ แบบ มีเวลาทำเลิกงานหรือว่างๆ น่าจะได้ซัก สัปดาห์ละ 10 ชั่วโมง ก็รวมๆ 80 ชั่วโมง น่าจะเสร็จ ลองดูว่าจะเป็นไง ฮ่าๆ

สวัสดี


📝 Day 121 of #365DaysOfBlogging

#เขียนบล็อก #ฝึกสร้างนิสัย #GoodHabit #Blogging


Chai Phonbopit

เป็นนักพัฒนาซอฟแวร์ เวลาว่างนอกจาก Coding ก็จะเขียนบล็อกเกี่ยวกับสอนทำเว็บไซต์ สอน Programming ที่ devahoy.com ชื่นชอบการพัฒนาตัวเองและเชื่อว่าการสอนเป็นหนึ่งในวิธีการเรียนรู้ที่ดีที่สุด ❤️🎒🍣🎸⚽️

แสดงความคิดเห็น