หยุดโควิดมันว่าง เลยอยากลองมาเขียนสรุปว่าผ่านมาทั้งปีรู้อะไรเพิ่มมั่ง

ตั้งแต่เปิดเทอมที่คิดว่าจะได้ใช้ชีวิตปี 3 กับการเรียนหมอแบบ 200% ผลสุดท้ายคือได้เขียนเว็บทั้งปี

เรื่องมันเริ่มมาจากที่เรา[เขียนเว็บให้ค่ายหมอของคณะ](https://www.sirirajmedcamp.com/)ตั้งแต่ตอนปีสอง เราจึงถูกเชิญให้มาทำต่ออีกปี ก็ถือเป็นโอกาสดีที่ได้แก้ไขโค้ดตัวเองให้เรียบร้อย (หลังจากเขียนชุ่ยๆ ให้จบๆ ไปตอนนั้น เพราะคิดว่าจะไม่ได้ทำต่อแล้ว 🤣) ก่อนจะส่งต่อให้รุ่นน้องทำในปีต่อๆ ไป (ไม่แน่ใจว่าปีนี้จะได้จัดป่าว) ซึ่งก็มีเรื่องตื่นเต้นหลายอย่างอยู่ ถ้าว่างจะมาเขียนเล่าเพิ่มเติม

ตอนนั้นใช้ stack ง่ายๆ เลย มีแค่ Nodejs, Express, Google Cloud: [App Engine, Firestore (ปีแรกใช้ Datastore แต่เห็นว่าตัวใหม่ออกเลยพึ่งมาเปลี่ยน), Google Analytics, Google API: [Sheet API]], simple frontend: [html, js: jquery, css: Bootstrap, sass ด้วยนิดนึง compile ผ่าน webpack] ถ้าอยากรู้เพิ่มเติมไปดูโค้ดได้เลย -> [https://github.com/si-computer-club/simc-web](https://github.com/si-computer-club/simc-web)

![](https://miro.medium.com/max/1375/1*peT5W1qVbgSnzKy8dH1uug.png)

มีทีมช่วยกันทำกันกี่คนหรอ? หึ full stack จ้า โซโล่ทำคนเดียวเกือบหมดเลย ยังดีมีเพื่อนมาช่วยทำตอนท้ายนิดนึง

หลังจากนั้นก็มีอีกงานติดๆ กันที่ต้องเขียนเว็บเพื่อรับสมัคร เป็น[งานแข่งขันวิชาการ](https://www.simpicofficial.org/)ของคณะโดยจะเชิญต่างประเทศมาด้วย งานมีแพลนว่าจะจัดในช่วงเดือนมีนาปีนี้ (สุดท้ายถูกยกเลิกไปด้วยโควิด 😢) เนื่องจากตอนนั้นเรากำลังทำเว็บค่ายพอดี จึงได้มีโอกาสทำสองงานควบกันเลย ซึ่งทั้งสองงานที่แม้จะดูแลโดยคนละกลุ่มเลยแต่จะมีข้อตกลงร่วมกันเหมือนกันอยู่ข้อนึงคือ ออฟงานทั้งหมด 2 วีคก่อนสอบ ซึ่งมันเลยทำให้หลังสอบกลายเป็นงานเราคูณสองเทียบกับปีแรกที่ทำงานเดียว

สำหรับงานนี้เนื่องจากมีรุ่นพี่เขียนเว็บนี้มาก่อนแล้ว เราแค่รับมาทำต่อเฉยๆ เลยไม่ได้ยุ่งอะไรกับ frontend เลย แก้แค่พวก backend เฉยๆ stack ที่ใช้ก็คล้ายๆ งานแรกเลย มีแค่เพิ่ม sync ข้อมูลใน db กับ Google Sheet เพื่อความสะดวกของฝ่ายทะเบียนไม่ต้องมานั่งกรอกข้อมูลทีละคนๆ

จบช่วงรับสมัครไปก็เป็นช่วงงานจริง งานค่ายจัดในช่วงปลายปีที่ผ่านมา ซึ่งเราก็มีหน้าที่ทำ[เว็บรายงานคะแนน](https://www.sirirajmedcamp.com/scoreboard)น้องๆ ตามกลุ่ม (เปิดในมือถือกับในคอมจะออกมาเป็นคนละหน้า (ใช้วิธีแบ่งตามขนาดจอ)) ซึ่งงานก็หนักและ deadline ก็เป็นสิ่งที่สำคัญพอสมควร จำได้ว่าพีคที่สุดคือหน้าสุดท้ายได้เริ่มเขียนวันพฤหัสกลางคืน ต้องใช้วันเสาร์ตอน 9.00 เขียนเสร็จตอนวันเสาร์ประมาณตีสี่กว่าๆ

![](https://miro.medium.com/max/2326/1*fx4MBIldNyAHYyYckmFn3Q.png)

รูปตัวอย่างหน้าดูคะแนนแบบดูในคอม (ขอบคุณ art สวยๆ จากน้องฝ่าย PR ด้วยครับ)

หลังจากนั้นในช่วงต้นปีนี้ (ที่ยังไม่ค่อยมีข่าวโรคระบาด) เราเริ่มทำระบบแข่งขันแบบ real-time กล่าวคือระหว่างที่ผู้แข่งกำลังเขียนคำตอบ (โจทย์เป็นข้อเขียน) คนดูจะได้เห็นทันทีว่าใครตอบก่อน-หลัง ตอบว่าอะไร ซึ่งมีโค้ดจากรุ่นพี่ส่งต่อๆ กันมาอยู่บ้าง (ส่งมาทาง Google Drive **🙈**) แต่เป็นลักษณะที่แก้ไม่ง่ายนัก เชื่อว่าเกิดจากการทำงานสู้ deadline กันมาหลายต่อหลายครั้งจนโค้ดมี [technical debt](https://en.wikipedia.org/wiki/Technical_debt) พอสมควร

ตอนแรกคิดจะเขียนใหม่ทั้งหมดเลย แต่ใช้ก้อปโค้ดบางส่วนเท่าที่ได้ และคิดว่าจะใช้ stack ดีๆ ทับลงไปเลย จะได้ใช้ต่อได้ยาวๆ เริ่มจาก frontend คิดว่าจะต้องมี framework จริงจังซักตัว สุดท้ายใจไปที่ React เพราะเห็นว่ามี React Native เผื่อวันหลังอยากเขียนแอพมือถือจะได้ง่ายๆ

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

อยู่มาวันหนึ่งก็มีคนชวนเราไปทำโปรเจกอีกอัน เป็น LINE Chatbot ของภาควิชาสูติ-นรีเวช ที่มีจุดประสงค์ใช้สอบถามข้อมูลประจำวันของผู้ป่วยกลุ่มที่เราติดตาม เพื่อใช้ประกอบการประเมินโรค ซึ่ง features หลักที่ต้องการตอนนี้คือให้สามารถป้อนข้อมูลส่วนตัว (วันเกิด) ได้ และให้ bot ทักแชททุกวันเพื่อถามประวัติประจำเดือน (เนื่องจากผู้ป่วยมักลืมรอบเดือนของตน และมี compliance ต่อเรื่องแนวนี้ไม่มาก)

งานที่ผ่านมาเราทำเองคนเดียวเกือบหมดเลย แต่งานนี้เห็นว่ามีหลายคนช่วยกันทำ เลยหลวมตัวไปช่วยเค้าด้วย เราเลยกลายเป็นคนหลักที่ออกแบบและทำ backend แทนเองเลย 😂 แต่คราวนี้มีคนช่วยทำ frontend ให้แล้วงานเลยน้อยหน่อย รอบนี้ก็ไม่ได้ใช้อะไรหวือหวา เพียงแต่ก่อนเราเข้าไปทำเค้ามีทำกันไปบ้างแล้วซึ่งใช้ Dialogflow มาช่วยจับ pattern แชทของผู้ใช้ พอเราเข้าไปทำก็เลยยึดอำนาจ ยัด GCP เข้าไปซะเลย ให้เราทำดีนัก 😏 ใครสนใจอยากช่วยหรือมีข้อแนะนำก็แวะไปดูโค้ดกันได้ครับ -> [https://github.com/si-computer-club/signb-project](https://github.com/si-computer-club/signb-project)

หลังจากประกาศหยุดเรียนก็เหมือนปิดเทอมที่ยังไม่ปิด (เพราะยังสอบไม่หมดทุกตัว) ก็มานั่งทำงานนี้ต่อกะว่าจะให้เสร็จ แล้วก็ได้บังเอิญอ่านเรื่อง concept ของ monorepo ผ่าน [blog ของ Nx](https://blog.nrwl.io/why-you-should-switch-from-lerna-to-nx-463bcaf6821) เลยมาลองใช้ดู กลายเป็นว่าได้เปิดโลกของ DevOps เลย โอ้โหมันมี tool อะไรเยอะแยะไม่รู้ไปหมด ตั้งแต่ Eslint, Prittier, Babel, Typescript (พึ่งได้มาลองใช้ก็ตอนนี้แหละ), Jest, Cypress, Netlify, CI/CD และอื่นๆ อีกร้อยแปดพันเก้า และก็ได้มาลองอ่านเรื่อง Git แบบจริงจัง เหตุผลนึงเพราะก่อนหน้านี้เราทำงานคนเดียวมาตลอด เลยพึ่งรู้จักว่า VCS ดีกับการทำงานเป็นทีมยังไง ส่วนเรื่อง container พวก Docker, Kubernetes ไรงี้ยังไม่ได้ลองจริงจังเลย เพราะ App Engine ที่เป็น free tier (Standard Env) ยังไม่รองรับ

![](https://miro.medium.com/max/1498/1*qOOQ0G2_gaiGKJZFywxRXA.png)

จำนวน Commit ที่ผ่านมา สังเกตุได้ว่าตั้งแต่ช่วงมีนาหลังหยุดโควิดก็หนาขึ้นอย่างเห็นได้ชัด และถ้าสังเกตุอีกจะพบว่าเว้นไปช่วงนึงตอนกลางๆ May

ตอนนั้นเห็นว่าคณะเค้าหารือกันว่าจะสอบช่วงไหน ได้ผลมาเป็นช่วงเดือนสิงหาคม ก็เลยคิดว่าสบายละ ได้เล่นเกมยาวๆ กด Dota plus ไปเล่นได้สองสามวันก็มีประกาศมาว่า **“มีการจัดสอบออนไลน์ในวันที่ 13–15 พฤษภาคม”** ซึ่งประกาศตอน 30 เมษา ถึงกับไปไม่เป็นเลยทีเดียว แต่ก็เท่ากับว่าเวลาหลังสอบก็จะเหลืออีกเพียง 3 สัปดาห์ก่อนเปิดเทอม

> “…มันมีเวลาให้เตรียมตัว แล้วเอาเข้าจริง เค้าสอบเมื่อไหร่ก็ได้นะครับ เพราะมันสิ้นสุดการเรียนการสอนแล้ว”

กลัวแล้วครับ 14 วันกับการอีเลคมาราธอน 30 กว่าชั่วโมง แต่ก็ผ่านไปได้

หลังสอบเสร็จก็กลับมา explore เรื่องอะไรไม่รู้ของเราต่อ และก็คิดอยากจะทำแอพเล่นๆ อันนึง เป็นแนวๆ todo แต่มี feature เพิ่มมาคือให้มีแจ้งเตือนทุกๆ วัน เกี่ยวกับเรื่องอะไรก็ได้ที่เราสนใจ หรือเป็น collection แล้วให้สุ่มๆ มาก็ได้ ไหนๆ ก็ทำเล่นๆ เลยจะลองใช้ tool ทั้งหมดที่ไม่เคยใช้มาก่อน เลยได้มีโอกาสลอง [Koa,](https://koajs.com/) [Yarn Workspace](https://classic.yarnpkg.com/en/docs/workspaces/)(berry), [Netlify build tool](https://www.netlify.com/products/build/) (แต่สุดท้ายก็ไม่สำเร็จ ลืมไปว่าแอพเราก็ต้องมี backend เหมือนกัน เลยกลับไปซบ GCP ), React Native

แล้วก็เห็นเพื่อนๆ มีแนะนำคอร์สเรียนฟรีใน Coursera กัน ก็เลยเริ่มสนใจว่าอาจจะลองเรียนเรื่องอะไรสนุกๆ ซักหน่อย ใครมีของดีก็มาป้ายยากันได้ครับ

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



large_1 UJKrs4qrbR4VtfRn7KQxrA.webp

medium_1 UJKrs4qrbR4VtfRn7KQxrA.webp

small_1 UJKrs4qrbR4VtfRn7KQxrA.webp

thumbnail_1 UJKrs4qrbR4VtfRn7KQxrA.webp

1 UJKrs4qrbR4VtfRn7KQxrA.webp

หยุดโควิดมันว่าง เลยอยากลองมาเขียนสรุปว่าผ่านมาทั้งปีรู้อะไรเพิ่มมั่ง

ชีวิตเขียนโค้ด ปี 3 + ปิดเทอม

small_198698_517793794899786_2013913423_n.webp

thumbnail_198698_517793794899786_2013913423_n.webp

198698_517793794899786_2013913423_n.webp

Napat Limsirorat

แรกเริ่มเดิมทีงานนี้ก็จัดมาทุกปีเรื่อยๆ อยู่แล้ว ปีนี้เป็นปีที่ 3 (?) แต่เนื่องจากปีนี้ต้องเปลี่ยนมาจัดเป็นระบบออนไลน์ ก็เลยต้องมีระบบกิจกรรมออนไลน์ที่คอยดึงคนให้อยู่กับงานเราตลอดๆ ทีมจึงคิดกันมาว่าทำเป็นเว็บเลยมั้ย ง่ายดี ให้ผู้เข้าร่วมงานคอย standby อยู่หน้าเว็บตลอดและจะมีควิซเด้งมาเรื่อยๆ คนที่ทำครบก็จะมีสิทธิ์ได้ลุ้นรางวัล พอสรุปกันได้แบบนี้งานก็เลยตกมาที่เราอีกตามเคย …

ตอนแรกว่าจะโยนให้รุ่นน้องทำละ จะเรียน เรียนไม่ทันเพื่อนแล้ว 😭 แต่รู้สึกว่าคนอื่นก็งานยุ่งๆ กัน และมีเราที่น่าจะทำเสร็จเร็วที่สุด ก็เลยทำเองก็ได้ รับงานมาช่วง กค งานจัด ตค ก็ถือว่ายังพอมีเวลา แต่ก็มีไฟการเรียนและการสอบที่ตามลนก้นมาตลอด ก็เลยต้องรีบทำให้เสร็จช่วงนี้ให้เร็วที่สุด

ก่อนหน้านี้ตอนใกล้ๆ เปิดเทอมลงเรียน Coursera ไว้อันนึง [เป็นคอร์สใหญ่ๆ สอนเขียนเว็บและแอพมือถือสาย react, react-native](https://www.coursera.org/specializations/full-stack-react) พอตอนนี้เรียนจบไปสองอันแรก ก็เลยอยากมาลองประยุกต์ใช้ react, redux กับงานนี้จริงๆ แต่พอลองจริงๆ ก็รู้สึกว่ามันเป็นครั้งแรกของเรา น่าจะต้องใช้เวลาเรียนรู้อีกเยอะ คือทำไปนิดนึงก็ติด ต้องคอย google หาคำตอบตลอด ซึ่งถ้าเป็นแบบนี้ไปเรื่อยๆ คงไม่ทันแน่ สุดท้ายก็เลยตัดใจกลับไปทำแบบ old-school เลย (แต่ครั้งนี้ไม่ใช้ ejs แล้วนะรู้สึกว่ามันขัดกับหลักการ client-side rendering เราก็เลยอยากเลี่ยง)

พอปั่นๆ ไปด้วยความรีบ (ต้องไปอีเลคเชอร์ต่อ เรียนไม่ทันเพื่อนแล้วจริงๆ 😰😅) ก็สามารถเสร็จงานได้ในวันเดียว ซึ่งเร็วกว่าที่คิดเยอะ แต่ก็ออกมาเป็นแค่โครงๆ คือ login ได้ ทำควิซได้ ส่งได้ครั้งเดียวแล้วจะปิดไม่ให้ส่งซ้ำ [ลองดูโค้ดได้เลย](https://github.com/jewkub/si-open-house) ที่จริงคิดว่านี่ก็ครบแกนหลักๆ ของเว็บแล้ว แต่ก็ไม่รู้เพื่อนจะสรรหาอะไรมาให้ทำอีก ก็ต้องรอดูต่อไป สำหรับในช่วงนี้ก็เลยขอพักงานนี้ไว้แค่นี้ก่อน แล้วเดี๋ยวใกล้ๆ วันงานจะกลับมาเก็บงานต่ออีกทีแล้วจะกลับมาเขียนตอนต่อไป แต่เท่าที่ดูงานนี้ไม่น่ามีอะไรหวือหวามาก อาจจะไม่ค่อยมีอะไรเขียนเท่าไหร่ แต่ก็ไม่แน่เหมือนกัน ใกล้ๆ วันงานคงได้รู้อีกที

[ต่อตอนที่ 2](https://medium.com/jewkub/บันทึกเขียนเว็บงาน-siriraj-open-house-2020-2-2dc8f397a8f6)



small_favicon.webp

thumbnail_favicon.webp

favicon.webp

แรกเริ่มเดิมทีงานนี้ก็จัดมาทุกปีเรื่อยๆ อยู่แล้ว ปีนี้เป็นปีที่ 3 (?) แต่เนื่องจากปีนี้ต้องเปลี่ยนมาจัดเป็นระบบออนไลน์ ก็เลยต้องมีระบบกิจกรรมออนไลน์ที่คอยดึงคนให้อยู่กับงานเราตลอดๆ ทีมจึงคิดกันมาว่าทำเป็นเว็บเลยมั้ย ง่ายดี ให้ผู้เข้าร่วมงานคอย standby อยู่หน้าเว็บตลอดและจะมีควิซเด้งมาเรื่อยๆ คนที่ทำครบก็จะมีสิทธิ์ได้ลุ้นรางวัล พอสรุปกันได้แบบนี้งานก็เลยตกมาที่เราอีกตามเคย

บันทึกเขียนเว็บงาน Siriraj Open House 2020 [1]

[ต่อจากตอนที่ 1](https://medium.com/jewkub/บันทึกเขียนเว็บงาน-siriraj-open-house-2020-1-eefd2cd1cba5) ก็คือหลังจากที่ผ่านช่วงมรสุมการสอบรัวๆ และต่อด้วยวอร์ดที่โหดที่สุดในปีสี่ ก็ได้ลงมามีเวลาว่างอยู่บนพื้นโลกบ้าง(เค้าว่าวอร์ดนี้ชิวและฮีลที่สุดในปีสี่) เลยกลับมานั่งปั่นงานต่อ แต่เนื่องจากเราไม่ได้ช่วยเค้าทำงานกันเท่าไหร่ก่อนหน้านี้ เลยยังไม่ค่อยเข้าใจ flow ของงาน กว่าจะได้เห็นจริงๆ ก็คือวันจริงวันเดียวเลย

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

![](https://miro.medium.com/max/1574/1*9aLpqI5bQlZtgo2QaZe44g.png)

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

พอถึงวันจริง ปกติถ้าเป็นงานอื่นๆ โค้ดก็คงนิ่งแล้ว รอ monitor อย่างเดียว แต่อันนี้คือยังแก้ได้ไม่ถึงไหนเลย ตอนใกล้ๆ เริ่มงาน เริ่มห่วง traffic ว่าจะมีคอขวดตรงไหนมั้ยเพราะน้องน่าจะเข้ากันมาเยอะ เป็นหลักพันคนได้ งานนี้มันเน้น real-time ถ้าเว็บเราช้า delay ไปมันก็จะอัพเดทไม่ค่อยตรงกับ live

![](https://miro.medium.com/max/2208/1*JYf9lJdmx7fgUcPyihivrQ.png)

Traffic วันนั้น peak ที่สุดคือตอนควิซสุดท้าย ประมาณ 300 requests/min

พอ live เริ่ม แรกๆ ก็ยังดูเรียบร้อยดี traffic ก็เยอะมาก แต่ไม่ได้มีปัญหาเว็บช้าหรือล่ม แต่พอเริ่มเปิดควิซแรกเท่านั้นแหละ กดผิดอัน! 😅 ผลก็คือทำให้เราต้องรีบตัดกลับไปควิซที่ถูก ซึ่งมันก็เลยมีปัญหากับน้องที่เข้าควิซไปแล้ว เพราะจะโดนเด้งไปควิซถัดไปและถือว่าส่งควิซอันนี้ไปแล้ว ตอนนั้นคิดว่าน่าจะโดนกันไม่กี่คนมั้งไม่น่าเป็นไร แต่ก็ลองไปเขียนโค้ด query รันดู พบว่ามี 900 กว่าคน 😱 ก็เลยต้องรีบกลับมาแก้ จำได้ว่าตอนนั้นเป็นอะไรที่ตื่นเต้นและกดดันในการเขียนโค้ดที่สุดตั้งแต่ที่เคยทำมา ยิ่งกว่าตอนแข่งตอนม.ปลายอีก คือต้องแก้ database ลบข้อมูลให้ทุกคนที่โดนเด้งว่าส่งแล้วให้น้องๆ กลับมาทำใหม่ได้ทัน ซึ่งมันต้องทำให้เสร็จก่อนควิซสองจะเปิด คือประมาณ 15 นาที โดยที่เราไม่เคยเตรียมอะไรมาก่อนเลยว่าจะมีแบบนี้

แต่สุดท้ายงานก็จบลงด้วยดี แต่ยังมีเรื่องที่ต้องทำเกียรติบัตรให้น้องๆ ผู้เข้าร่วมงาน ซึ่งเราก็พยายามหา library ใช้ก็ไปเจอ [pdf-lib](https://www.npmjs.com/package/pdf-lib) ถึงจะยังใหม่และดูคนใช้ยังไม่ค่อยเยอะ แต่มันเป็นอันเดียวที่แก้ไข pdf ได้ คือเพื่อนส่งไฟล์เกียรติบัตรมาให้เราเป็น pdf แล้วเราก็เลยจะเอา pdf นี้มาแก้โดยการเติมชื่อไปทีละคนๆ ตอนทดลองทำชื่อเพื่อนก็ออกมาเหมือนจะดี แต่พอใช้จริงอัพขึ้นเว็บไปแล้ว มีน้องๆ ทักมาในเพจว่าตัวอักษรมันเด้ง ก็เลยไปนั่งงมอีกรอบว่าทำอะไรผิด จนพบว่ามันจะมีปัญหา render ตอนที่จะต้องมีคำที่เป็นตัวสระกับวรรณยุกต์อยู่ด้วยกันมันจะมีเว้นวรรคเกินมาทุกครั้ง ก็เลยคิดว่าปัญหาอยู่ที่ตัว library อาจจะเพราะยังไม่เคยมีคนไทยมาทำจริงจังไรงี้ เลยไปงมโค้ดตั้งแต่ต้นทางเลยเผื่อจะเจอที่ที่พอจะซุยๆ ได้จะได้ไม่ต้องลำบากหา library อันใหม่ แต่กลายเป็นว่ายิ่งอ่านยิ่งงงเพราะ [concept ของ pdf มันซับซ้อน](https://stackoverflow.com/questions/59983306/how-to-find-the-hex-of-a-string-in-a-pdf#comment106082267_59983306)กว่าที่เราคิดไว้แต่แรกเยอะ แต่สุดท้ายไปเจอคนที่[มีปัญหาประมาณนี้](https://github.com/Hopding/pdf-lib/issues/549)เหมือนกัน (แต่เป็นภาษาอื่น) เค้าก็แก้ได้ด้วยการ embed font เป็นแบบ subtype แทนซึ่งก็ไม่เข้าใจเหมือนกันว่ามันช่วยได้ยังไง (ใครรู้สอนที) ตอนนี้ก็เลยแก้ปัญหาเว้นวรรคได้แล้ว เหลืออยู่ที่เดียวคือเรื่องไม้โทกับสระอำ ที่มันจะขึ้นสลับลำดับกัน แต่คิดว่าน่าจะเป็นปัญหาของตัว library เอง มั้ง คงแก้อะไรไม่ได้จริงๆ ถ้ามีน้องขอมาให้แก้จริงๆ (ซึ่งมี เยอะด้วย) ก็คงจะต้อง edit pdf แบบ manual แล้ว

หลังจบงานเลยได้เรียนรู้ว่า ไม่ว่าจะงานอะไรถ้าเราได้ทำก็ต้องศึกษางานดีๆ ให้เข้าใจก่อน เพราะถ้าไม่คิดอะไรมากรอทำตามที่คนอื่นสั่งอย่างเดียว พอถึงเวลาจริง มันจะเกิดเรื่องไม่คาดฝันที่คงไม่มีใครมาบอกเราในตอนนั้นได้แหละ ว่าต้องทำอะไรบ้าง เพราะงั้นสุดท้ายก็ต้องเป็นเราเองนี่แหละที่รู้บริบทตัวเองดีที่สุดต้องคาดการณ์และเตรียมตัวกับเหตุเฉพาะหน้าจะได้แก้ปัญหาได้ทัน

จบงานนี้ไปแล้วก็ยังคงหวังเหมือนเดิมว่าจะทำงานเว็บเป็นงานสุดท้ายแล้ว จะได้กลับไปเรียนแบบ 200% ได้เหมือนเดิม ทุกวันนี้ก็ยิ่งไม่ค่อยจะรอดเท่าไหร่อยู่



medium_1 9aLpqI5bQlZtgo2QaZe44g.webp

small_1 9aLpqI5bQlZtgo2QaZe44g.webp

thumbnail_1 9aLpqI5bQlZtgo2QaZe44g.webp

1 9aLpqI5bQlZtgo2QaZe44g.webp

ต่อจากตอนที่ 1 ก็คือหลังจากที่ผ่านช่วงมรสุมการสอบรัวๆ และต่อด้วยวอร์ดที่โหดที่สุดในปีสี่ ก็ได้ลงมามีเวลาว่างอยู่บนพื้นโลกบ้าง

บันทึกเขียนเว็บงาน Siriraj Open House 2020 [2]

ที่จริงก็ไม่ได้อยากใส่ขนาดนั้น แต่พักหลังๆ รู้สึกว่าคอมเริ่มช้าลงมาก เปิดคอมทีนึง 15 นาทียังไม่เสร็จ (มันเสร็จแต่ hdd มันยังขึ้น 100% เต็มอยู่ จะเปิดอะไรต่อก็ยังค้าง) ที่จริงตอนแรกคิดจะ reinstall windows ใหม่ แต่คิดไปคิดมา เห็นว่าคอมเราใส่ SSD เพิ่มได้ เลยหาซื้อมาใส่เพิ่มดีกว่า แล้วก็จะลองลง OS ใหม่ที่ไม่ใช่ Windows เอาไว้เขียนโค้ด ก็เลยคิดว่าจะลอง Ubuntu ก็แล้วกัน จะได้เป็นการลองหัดใช้ Linux ไป ว่าแล้วก็เลยไปค้นหาข้อมูลเกี่ยวกับ SSD เลย ซึ่งหลายๆ เรื่องก็เป็นความรู้ใหม่ พออ่านจบแล้วก็คิดว่าไม่ยากหนิ ลงแปปเดียว แต่พอได้เริ่มจริงๆ ก็สัมผัสได้ถึงความปวดหัวของช่างซ่อมคอมเลย ขนาดคอมเราอยู่กะเรามาตั้งนานพอเอาเข้าจริงก็ยังไม่เข้าใจอะไรอีกตั้งหลายอย่าง เลยอยากมาเขียนๆ ไว้เพราะความรู้ใหม่มันเยอะมาก กลัวลืมละก็เผื่อจะเป็นประโยชน์กับคนอื่นๆ นะครับ ที่ทำทั้งหมดนี้ทำเองแบบซุยๆ ไม่ได้ปรึกษาใครเลย (แอบกลัวพังเหมือนกัน แต่รู้สึกว่าอ่านเองทำเองมั่วเองมันสนุกกว่าไปให้คนอื่นทำ 😂) เพราะงั้นถ้ามีตรงไหนที่เข้าใจผิดหรือมีอะไรก็แนะนำกันได้เลยนะครับ ยินดียิ่งๆ

เริ่มจากเราเห็นที่ฝาหลังโน้ตบุ้กเรามันเขียนว่า

 ![20210308_234526.jpg](https://backend.jewkub.dev/uploads/20210308_234526_7c30255f3c.jpg)

ก็เลยไปอ่านว่า M.2 2280 คืออะไร ละก็ได้เข้าใจว่ามันคือชื่อชนิดของ SSD โดยตัวเลข 2280 หมายถึงขนาด 22x80 mm แล้วตัว SSD เองที่มีขายในตลาดตอนนี้ก็จะมี 3 ชนิดหลักๆ คือ 1. SSD SATA ก็คืออันจะเป็นก้อนๆ หน้าตาคล้ายๆ HDD ธรรมดา แต่ความเร็วเยอะขึ้นมามากๆ เป็นสิบๆ เท่า 2. M.2 SATA คือ SSD ที่ขนาดเล็กลงมาก โดยเท่าที่เห็นก็จะมีแค่ขนาด 22x80 ที่มีขายอยู่ทั่วไป โดยความเร็วจะถูกจำกัดไม่ต่างกับ SATA เท่าไหร่นักเพราะยังใช้ interface เดียวกับ SATA 3. M.2 PCIe/NVMe เป็นชนิดที่ความเร็วจะสูงที่สุด และสูงเกินระดับที่ใช้งานทั่วๆ ไปไปเยอะเลย เฉลี่ยประมาณ 5 เท่าเทียบกับ SSD SATA แต่ราคาก็จะแพงขึ้นมาอีกระดับนึง

หลังจากนั้นเราก็เลยเริ่มปฏิบัติการแงะคอม หลังจากเปิดฝาออกมาก็พบว่า..

![20210321_034854.jpg](https://backend.jewkub.dev/uploads/20210321_034854_3517c05e1f.jpg)

เห็นช่องใส่ SSD แล้ว! ซึ่งถ้าดูจากหน้าตามันเป็นช่องแบบ NVMe นะ แบบมีแง่งอันเดียว แต่ก็แอบสงสัยว่าทำไมสติกเกอร์แปะถึงเขียนว่า SATA SSD ONLY จากที่ลองไปหาๆ ดูในเน็ต (คือในเว็บ official มันไม่มีข้อมูลโน้ตบุ้กรุ่นนี้แล้ว (อาจจะเก่าไปเลยลบไปแล้วมั้ง) ไปเจอ[กระทู้ที่มีคนตั้งเมื่อ 5 ปีที่แล้ว](https://rog.asus.com/forum/showthread.php?81265-SSD-upgrade-for-the-GL552VW-Please-help-!/page2#post560703)คุยๆ กันว่ารุ่นที่คล้ายๆ รุ่นนี้ไม่รองรับ NVMe แต่ทั้งๆ ที่ slot หน้าตาเป็นแบบ NVMe เนี่ยนะ แต่สุดท้ายก็ลงเอยว่าต้องเป็น SATA SSD ถึงจะได้

โอเค SATA ก็ได้ แค่นี้ก็เร็วเกินพอไปเยอะละ ไม่ได้จะเอาไปทำอะไรหนัก ก็เลยรอลดราคา ตอนแรกลักเลอยู่ว่าจะซื้อ 500GB หรือ 1TB ดี สุดท้ายก็จบที่ 1TB เพราะกะใช้ยาวๆ ถึงจะเปลี่ยนคอมก็สามารถถอดอันนี้ไปใส่เครื่องใหม่ได้ แล้วก็เตรียมเอามาใส่ในเครื่อง ในใจคือตื่นเต้นมาก จะได้ชุบชีวิตน้อนโน้ตบุ๊กตัวนี้ซะที อืดอาดมาเป็นปีละ ตอนเอาไปทำงานกลุ่มช่วงปลายปีที่แล้วทุกคนก็คือบ่นเป็นเสียงเดียวกันว่าช้ามาก ถึงเวลาเกิดใหม่แล้ว

 ![20210404_203817.jpg](https://backend.jewkub.dev/uploads/20210404_203817_db205e4c71.jpg)

ตอนใส่เหมือนจะง่าย แต่ปลายดันไม่พอดีกับน็อตที่จะต้องขันยึดตัว SSD ก็เลยงงว่าขนาดไม่เท่ากันหรอ เอ้ะแต่ SSD M.2 น่าจะเป็นขนาดเดียวกันหมดนะ หรือยังมีน็อตตัวไหนที่เรายังคลายไม่หมด แล้วก็เหลือบไปเห็นตรงมุมๆ นึง ที่ยังมีน็อตอันนึงยึดอยู่ ก็เลยคิดว่าอันนี้แหละที่ต้องแกะก่อนจะใส่ SSD ก็เลยพยายามขันน็อตให้ออก พยายามอยู่นานมากคือมันแข็งจริงๆ อันนี้ บิดสุดแรงก็ยังไม่ออกจนเริ่มเอะใจว่ามันอาจจะไม่ได้ออกแบบมาให้เราขันป่าว เอ้ะแต่มันเป็นน็อตก็ต้องมีไว้ขันเข้า-ออกดิ เริ่มไม่แน่ใจเลยไปให้เพื่อนช่วยลอง คือเพื่อนแรงเยอะกว่าเรามาก แต่ก็ยังขันไม่ออกเหมือนกัน ก็เลยมานั่งงงๆ กันอยู่พักนึงเพื่อนก็แนะว่ามันไม่น่าจะต้องขันอันนี้นะ ลองพยายามทางอื่นมั้ย แล้วก็พบว่ามันต้องสอดตรงขั้ว SSD เข้าไปแล้วปลายอีกด้านจะเผยอขึ้นมา แล้วก็กดด้านนั้นลงมามันจะพอดีกับรูที่เอาไว้ขันน็อตล็อกเลย โถ่ เหนื่อยฟรีไปตั้งหลายชั่วโมงเลย

หลังจากใส่เสร็จก็เริ่มเปิดเครื่อง เตรียม Ubuntu boot load ไว้ใน flash drive รอมาหลายวันละจะได้ใช้ซะทีวันนี้ ก็เริ่มทำตามขั้นตอน[ที่เค้าสอนในเว็บ](https://itsfoss.com/install-ubuntu-1404-dual-boot-mode-windows-8-81-uefi/)ไปเรื่อยๆ จนถึงขั้นนึงที่เค้าบอกให้ disable secure boot in UEFI ก็เลยไปลองค้นว่าคืออะไร ก็พบว่ามันคือ interface ที่ใช้เชื่อม OS กับ firmware ชนิดนึงที่ใหม่กว่าแบบเก่าคือ MBR โดยมันสามารถโหลด bootloader จากที่ไหนก็ได้ใน disk ไม่จำเป็นต้องอยู่ใน boot sector ที่ BIOS กำหนด แล้วเค้าเคลมว่ามันจะ boot เร็วกว่า MBR และแนะนำให้เปลี่ยนมาใช้ทำ dual boot จะเร็วกว่า โอเค ลองมาดูกันก่อนว่าคอมเราเป็นแบบไหน ปรากฎว่าเป็น MBR จ้า ก็เลยต้องเปลี่ยนเป็น EFI ก่อนเพื่อจะได้เก็บ windows ไว้ boot alongside แบบ EFI ไปพร้อมๆ กับ Ubuntu ตัวใหม่ที่จะลงแบบ EFI ไปด้วยกันได้ ก็เลยไปค้นหาข้อมูลว่าคอมเราสามารถเปลี่ยนมาใช้ UEFI ได้มั้ยกับ BIOS ตัวนี้ ผลก็คือขึ้นว่า Legacy

[https://i2.wp.com/itsfoss.com/wp-content/uploads/2020/06/BIOS-windows.png?w=800&ssl=1](https://i2.wp.com/itsfoss.com/wp-content/uploads/2020/06/BIOS-windows.png?w=800&ssl=1) (รูปจากเน็ต ลืมแคปไว้ตอนนั้น)

ซึ่งเราก็ไปอ่านว่า BIOS เรามันใช้ UEFI ได้มั้ย ซึ่งคำตอบก็คือให้ไปลองดูในเมนูใน BIOS ถ้ามันขึ้นให้เลือกก็แปลว่ามี เราเข้าไปดูก็ไม่ค่อยเข้าใจพวกคำศัพท์เกี่ยวกับในการ Boot แต่ก็มีคำแนะนำนึงบอกว่าลองอัพเดท BIOS ดูด้วยเผื่อ firmware มันพึ่งจะมีให้ในเวอร์ชันหลังๆ ซึ่งหลังจากอัพเดทเวอร์ชันจาก 2016 เป็น 2019 (โชคยังดีที่เว็บ official ยังมี file ให้โหลด ถึงแม้ document จะหายไปหมดแล้วก็ยังดีอะนะ) ก็พบว่ามีเมนูใหม่เกี่ยวกับ secure boot เพิ่มขึ้นมา! สงสัยจะใช้ UEFI ได้ละมั้งง ลองเลยละกัน หลังจากนั้นก็ไปหาวิธีแปลงจาก MBR ให้มาใช้ GPT (เป็นชื่อระบบ partition ที่เอาไว้ใช้กับ UEFI) ก็ไปเจอ tool ฟรีตัวนึงที่มีอยู่ใน windows อยู่แล้วชื่อ mbr2gpt แต่ดัน[มีข้อจำกัด](https://superuser.com/a/1377969/570998)อีกคือไดรฟ์เรามี 3 drives แล้วเค้าให้มี primary partitions แค่ 3 อัน ตอนแรกคิดว่าก็พอดี แต่รันไปแล้วดันขึ้น `Disk layout validation failed for disk 0` พอลองไปอ่านดูก็พึ่งเข้าใจอีกว่า System reserved partition ก็นับเป็นอีกหนึ่ง partition โถ่ ถ้างั้นก็ต้องย้ายไฟล์ drive นึงทั้ง drive ไป backup ที่อื่นไว้ก่อน ก็เลยเลือกเป็น drive E ของเราที่ขนาดประมาณ 200GB ก็โอเค ยอมนั่งรอก็ได้ ย้ายไปที่ SSD เราละกัน ถือเป็นการทดลองใช้งานไปเลย ผลก็คือ 2 ชั่วโมงจ้า แล้วเดี๋ยวต้องย้ายกลับอีก ==

โอเค หลังจาก format drive E ก็พร้อมทุกอย่างละ ถึงเวลาแปลง partition ซะที!

 ![20210405_193836.jpg](https://backend.jewkub.dev/uploads/20210405_193836_86cf038115.jpg)

เรียบร้อยย แต่เหมือนจะขึ้น error อะไรซักอย่างเกี่ยวกับ WinRE ก็เอ้ะ ลองเอาคำไปค้นในเน็ตดู แต่อ่านคำอธิบายแล้วไม่ค่อยเข้าใจ ก็เลยช่างมันละกัน ถ้ายังเปิด Windows ได้ก็โอเคละมั้ง ไม่ได้จะเอามาใช้งานเป็นหลักอยู่แล้วหนิ

ทุกอย่างน่าจะเรียบร้อยดีแล้วนะ จากนั้นก็ลองกลับไปเปิด Windows ก็ยังเปิดได้ปกติ เย่ ทุกอย่างราบรื่น หลังจากก็อปไฟล์จากที่ backup กลับมาใน drive E (อีก 2 ชั่วโมง ==) สุดท้ายก็ได้ไปเปิด secure boot ตามที่เค้าแนะนำแล้วก็ลง Ubuntu จาก flash drive ได้แล้ว เป็นอันจบภารกิจ ใช้เวลารวมทั้งสิ้น 3 วัน ถึงจะได้ Ubuntu ที่เป็น UEFI และยังมี Windows ที่เปิดจาก UEFI ได้ด้วย Windows boot loader อยู่ด้วย!

สรุปสุดท้ายก็ถือว่าคุ้มค่าแหละมั้ง ปัญหาแต่ละอย่างที่เจอพอไปค้นในเน็ตคือมีแต่คำอธิบายยืดยาวที่ต้องใช้เวลาอ่านนานมาก อาจจะเพราะไม่เคยจับงานเกี่ยวกับ hardware/firmware เลยมั้งนะเลยไม่คุ้นกับอะไรแบบนี้เลย แต่ก็ผ่านมาได้ด้วยดีแหละ เลยมาเขียนไว้กันลืม(ซึ่งตอนเขียนก็ลืมบางขั้นตอนกับบางปัญหาไปเยอะแล้ว เพราะไม่ได้แคปรูปไว้เลย ขุดจากในหัวมาเขียนอย่างเดียว 😂) เสียดายที่ไม่ได้แคปบางรูปเอาไว้เพราะมันทำกลับให้ได้รูปเดิมไม่ได้แล้ว

large_20210404_203817.jpg

medium_20210404_203817.jpg

small_20210404_203817.jpg

thumbnail_20210404_203817.jpg

20210404_203817.jpg

เหนื่อยมาก กว่าจะได้

รีวิวการใส่ SSD ครั้งแรก

ใครที่เคยใช้ [Github](https://github.com/) คงเคยได้เห็น feature ในการสร้างหน้าเว็บของตัวเองได้อย่างง่ายดาย ด้วย [Github Pages](https://pages.github.com/)

แต่ถ้าหากลองศึกษาวิธีทำ ส่วนใหญ่จะนิยมแนะนำให้เริ่มต้นด้วย [Jekyll](https://help.github.com/en/github/working-with-github-pages/setting-up-a-github-pages-site-with-jekyll) แต่ด้วยตัวผมเองไม่ค่อยถนัดภาษา Ruby เท่าไหร่ เพราะใช้ Javascript มาตลอดทั้ง frontend และ backend จึงลองหาทางเลือกอื่นและมาเจอเครื่องมือนึงของ Next.js คือความสามารถในการ [export](https://nextjs.org/docs/advanced-features/static-html-export) เว็บทั้งหมดออกมาเป็น html, js, css เพียวๆ โดยไม่มี backend เลย เลยได้มีโอกาสลองเล่นซึ่งพบว่าไม่ยากอย่างที่คิด เลยจะมาแชร์ขั้นตอนการติดตั้งเผื่อจะเป็นประโยชน์ครับ (ใครขี้เกียจอ่านทีละขั้นข้ามไปดูโค้ดสุดท้ายเลยก็ได้นะครับ -> [https://github.com/jewkub/jewkub.github.io](https://github.com/jewkub/jewkub.github.io) )

เริ่มจากสร้าง repository ก่อน ตั้งชื่อเป็น  `<username>.github.io` และตั้ง gitignore เป็น Node เพราะเราจะใช้ Node เป็นตัวรันคำสั่งต่างๆ ทั้งหมดครับ

![รูปตัวอย่างการสร้าง repository](https://miro.medium.com/max/1205/1*RZFznei7AveibLsNVKMLfQ.png)

ตัวอย่างการสร้าง repository (อย่าลืมเปลี่ยนชื่อตาม username ด้วยนะครับ)

จากนั้นก็ [clone](https://help.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository) ลงเครื่อง และเริ่ม project ด้วยคำสั่ง

`npx create-next-app`

หรือใครชอบ yarn ก็ใช้

`yarn create next-app`

ใส่ชื่อ project ตามชื่อ repository เสร็จแล้วเข้าไปที่โฟลเดอร์ที่พึ่งสร้าง จะได้ structure ประมาณนี้

![](https://miro.medium.com/max/203/1*x7XE8lhlTpu7ETnWSBWmTw.png)

ลบโฟลเดอร์ `/api` ทิ้งได้เลยครับ เพราะเราจะไม่ใช้ API route หลังจากนั้นดูที่ไฟล์ `package.json` จะเป็นไฟล์หน้าตาประมาณนี้

<gist id='eb8cca4564bcc85406eeef0209a49009' ></gist>

เพิ่มคำสั่งที่เราจะใช้สั่งเรื่อยๆ ในช่อง `"scripts"` เป็นแบบนี้ (สามารถใช้ `touch` แทน `type nul >` ได้เลย ตัว Windows มันไม่รองรับคำสั่งนี้ 😢)

```js
"scripts": {  
    "dev": "next dev",  
    "build": "next build",  
    "start": "next start",  
    "export": "npm run build && next export && type nul > out/.nojekyll",  
    "serve": "npm run export && serve out",  
    "deploy": "npm run export && node gh-pages.js"  
},
```

ไฟล์ `.nojekyll` มีไว้เพื่อระบุว่าเราจะไม่ใช้ jekyll ให้ข้ามขั้นตอนนั้น แล้ว host static file ของเราได้เลย

ที่จริงแล้ว [gh-pages](https://www.npmjs.com/package/gh-pages) สามารถสั่งจาก command line ได้เลย แต่ส่วนตัวรู้สึกว่าพอต้อง config อะไรเพิ่มขึ้นเรื่อยๆ ก็ตั้งเป็นไฟล์ไปเลยดีกว่า สร้างไฟล์ `gh-pages.js` ที่ root folder

<gist id='59d7c4709f28d64ec09e9005329322da' ></gist>

อธิบายโค้ดด้านบนคือ จากที่ github pages จะยอม host file ให้เฉพาะไฟล์ที่อยู่บน `master` branch เท่านั้น จึงต้องเปลี่ยน branch (ที่เดิม default เป็น `gh-pages`) เป็น `master` และเราต้องกำหนดด้วยว่าให้ ship ไฟล์ที่ชื่อขึ้นต้นด้วย . (ในที่นี้คือ `.nojekyll`) โดยระบุ `dotfiles: true` และส่วนสุดท้ายคือ commit messages โดยใช้ [moment](https://momentjs.com/) ด้วยเพื่อแปลงวันที่ได้อย่างสะดวก (ที่ใส่วันที่ด้วยเพราะไม่งั้น deploy แต่ละครั้งจะมี commit messages เหมือนกันหมดเลย เดี๋ยวจะดูยาก)

หลังจากนั้นติดตั้ง dependencies ที่เหลือที่ Next ไม่ได้ให้มา

`npm install moment gh-pages serve`

รัน `npm run serve` script จะรัน 3 คำสั่งด้วยกัน

1.  **build** คือการประมวลไฟล์ทั้งหมดให้เป็นรูปแบบ production คือพร้อม deploy ขึ้นใน backend ที่ต่างๆ แต่ในที่นี้เราใช้ Github pages ซึ่งไม่ค่อยรองรับ backend เท่าไหร่นัก จึงต้อง
2.  **export** หน้าเว็บทั้งหมดให้กลายเป็น static html files และสามารถนำไปฝากไว้ที่ host ที่ไหนก็ได้โดยไม่ต้องตั้ง server เองแต่อย่างใด
3.  **serve** ก็คือเหมือนทดสอบ host ที่โฟลเดอร์ที่เรากำหนด ในที่นี้กำหนดที่โฟลเดอร์ที่เราพึ่ง export มา คือ `/out` แล้วลองเข้าตาม url ที่มันเด้งขึ้นมา [http://localhost:5000](http://localhost:5000) ก็จะพบกับ

![](https://miro.medium.com/max/1259/1*PN83buXPhPyEaDK06QKVIg.png)

[http://localhost:5000](http://localhost:5000)

ได้แล้วว คราวนี้ลองเพิ่ม routes ด้วย Link component ที่ Next มีสำเร็จรูปมาให้ใช้ ด้วยการสร้างหน้าว่างๆ ขึ้นมาหน้านึง ที่มี link กลับหน้าแรก

<gist id="5e939b15b9489c2c774863218f228294"></gist>

แก้โค้ดใน index.js ให้ใช้ Link component

<gist id="4047e342d5eca954fd319cbaa7442cda"></gist>

`npm run serve` อีกครั้ง จะพบว่าเว็บเราสามารถ navigate ไปมาภายในได้แล้ว 😃

ต่อไปเป็นขั้นตอนการ deploy เริ่มจากตั้งค่า git ในโฟลเดอร์เราก่อน ให้มี remote ชี้ไปที่ url ของ repository เรา

`git remote add origin https://github.com/<username>/<username>.github.io.git`

จากนั้นตั้ง branch เป็น branch หลักของ source code นี้ ชื่ออะไรก็ได้ที่ไม่ใช่ master

`git checkout -b main`

เริ่ม deploy เว็บลง master

`npm run deploy`

ผลออกมาเป็น

![](https://miro.medium.com/max/1561/1*UJKrs4qrbR4VtfRn7KQxrA.png)

ไปที่ environment -> View deployment ก็จะพบกับหน้าเว็บของเราเป็นที่เรียบร้อย 🎉🎉🎉

**เพิ่มเติม**

สำหรับโค้ดด้านบนทั้งหมดเพียงพอต่อการตั้งเว็บด้วย Github pages แล้ว แต่ก็ยังพอมีอะไรที่ทำเพิ่มให้สวยงามได้อีก

เริ่มจาก commit ผลงานเราขึ้นอีก branch ประดับไว้ด้วย

`git add -A && git commit -m "Setup Nextjs for Pages"`

และ push

`git push --set-upstream origin main`

(เฉพาะครั้งแรกที่ต้องสั่ง set-upstream หลังจากนี้สั่งแค่ `git push` ก็พอ)

ถ้าสังเกตุใน log ตอน export จะมีบอกว่า `No “exportPathMap” found in “next.config.js”. Generating map from “./pages”` ซึ่งเราสามารถ config ตรงนี้ได้ ในไฟล์ `next.config.js`

<gist id="f0f4ebe405cb3c06532ed6118f3996d2"></gist>

ถ้าหากอยากใส่ไฟล์ readme ใน master branch ด้วยเผื่อใครผ่านเข้ามาใน git จะได้เห็น source code หลังบ้าน ก็ทำได้ง่ายๆ แค่ใส่ไฟล์ไว้ในโฟลเดอร์ `/public` ตอน build ไฟล์นี้ก็จะ ship ไปด้วยและ deploy ไปด้วยกันเลย

**ลองใช้** [**Typescript**](https://www.typescriptlang.org/) **กัน**

[Next.js มี Typescript ให้ใช้ด้วย](https://nextjs.org/docs/basic-features/typescript) ลองทำตาม docs เลยละกัน (ใน docs มีบอกให้ใช้ yarn แต่ใครใช้ npm มาแล้วก็ใช้ npm ต่อไปนะ ใช้สลับไปสลับมาอาจทำให้ตอน build มันมองไม่เห็นไฟล์)

หลังจากเปลี่ยนไฟล์เป็น `.tsx` หมดแล้วก็อยากเปลี่ยน `gh-pages.js` เป็น `.ts` ด้วย

<gist id="b1366081211d76a6d4882db206bd94a6"></gist>

และเปลี่ยนคำสั่งใน scripts เป็น `ts-node gh-pages.ts` ใช้ [ts-node](https://www.npmjs.com/package/ts-node) เพื่อจะได้รัน typescript ได้โดยไม่ต้อง compile ก่อน ซึ่งพอลองรัน serve ก็ยังปกติดี แต่พอ deploy จะมี error ขึ้นมาว่า

`SyntaxError: Cannot use import statement outside a module`

ซึ่งเป็นเพราะว่าใน `tsconfig.json` มีการตั้งค่า `“module”: “esnext”` ดังนั้นเราจึงต้องตั้ง `“type”: “module”` ใน `package.json` ด้วย แต่เมื่อตั้งแล้วก็พบ error อะไรไม่รู้อีกหน้าตาแปลกๆ อ่านไม่รู้เรื่อง หลังจากนั่งซุยๆ อยู่ซักพักนึงก็เข้าใจว่าปัญหาเกิดจากไฟล์ที่เป็นไฟล์ของ Next เอง มีการ load module ด้วยวิธีที่ไม่ใช่คำสั่ง `import` (เดาว่าน่าจะใช้ require) เพราะเราไปตั้ง type เป็น module ไปซะแล้วเลยต้องใช้ import เท่านั้น จึงไปลองดูใน github issue ก็พบว่ามีคนมีปัญหานี้เหมือนกันเลย [#9607](https://github.com/vercel/next.js/issues/9607) แล้ว ณ ตอนที่เขียนนี้ issue นี้ยัง open อยู่ จึงต้องรอต่อไป ในระหว่างนี้ก็แก้ด้วยการกลับไปใช้ `gh-pages.js` ไปก่อน

เป็นอันเสร็จสิ้นการติดตั้งเว็บ ลองเอาไปเล่นกันได้ ผลเป็นอย่างไรมาแชร์กันได้ครับ 😊



medium_1 UJKrs4qrbR4VtfRn7KQxrA(1).webp

small_1 UJKrs4qrbR4VtfRn7KQxrA(1).webp

thumbnail_1 UJKrs4qrbR4VtfRn7KQxrA(1).webp

1 UJKrs4qrbR4VtfRn7KQxrA(1).webp

ใครที่เคยใช้ Github คงเคยได้เห็น feature ในการสร้างหน้าเว็บของตัวเองได้อย่างง่ายดาย ด้วย Github Pages

Jew

My name is Jew

I am Jew.

ชีวิตเขียนโค้ด ปี 3 + ปิดเทอม

บันทึกเขียนเว็บงาน Siriraj Open House 2020 [1]

บันทึกเขียนเว็บงาน Siriraj Open House 2020 [2]

รีวิวการใส่ SSD ครั้งแรก

สร้าง Github Pages ด้วย Next.js