Github Pages คืออะไร?
ในมุมมองของผมมันก็คือโฮสต์ฟรีที่เอาไว้เก็บเว็บที่ build จาก React ผมนั่นแหละ(สำหรับบทความนี้น่ะนะ) ซึ่งมันสะดวกมากๆ เพราะเราแค่ตั้งค่านิดหน่อยแล้ว push code ขึ้น Github ปกติ แค่นี้เราก็ได้เว็บไซต์ที่ออนไลน์พร้อมใช้งานแล้ว โดยเฉพาะเว็บไซต์ทั่วๆไปที่ไม่ได้ใช้ฟังก์ชันอะไรมากมาย บอกเลยว่า Github Pages ก็เหลือเฟือแล้ว
ตั้งค่าไฟล์ package.json สำหรับการ deploy
ก่อนอื่นเลยก็เปิดไฟล์ package.json ในโปรเจ็คของเราขึ้นมา แล้วก็ใส่ homepage เข้าไปแบบนี้สำหรับแต่ละโปรเจ็ค
"homepage": "https://myusername.github.io/my-app",หรือแบบนี้สำหรับหน้าหลักของ Github Pages ของเรา
"homepage": "https://myusername.github.io",หรือหากจะตั้งค่าเว็บไซต์ส่วนตัวให้ชี้มาที่ Github Pages ก็ใส่ไปแบบด้านล่างนี้
"homepage": "https://mywebsite.com",ติดตั้ง gh-pages สำหรับ deploy script
ส่วนตัวผมใช้ npm มากกว่า yarn ผมก็เลยเพิ่มเข้าไปแบบด้านล่างนี้
npm install --save gh-pagesหลังจากนั้นก็เป็นการตั้งค่าสคริปต์สำหรับ build และ deploy ใน file package.json อันเดิมนั่นแหละ ง่ายๆก็คือเพิ่มสคริปต์ด้านล่างเข้าไป
"scripts": {
+ "predeploy": "npm run build",
+ "deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",สำหรับหน้าเพจหลักแก้เพิ่มนิดหน่อยตามนี้(เครื่องหมายลบก็คือลบออก ส่วนบวกก็คือเพิ่มเข้าไป)
"scripts": {
"predeploy": "npm run build",
- "deploy": "gh-pages -d build",
+ "deploy": "gh-pages -b master -d build",จากนั้นก็ build ด้วยการรันคำสั่งด้านล่างนี้
npm run deployจากนั้นก็ push โค้ดขึ้น Github ปกติเลยครับ ไม่มีอะไรมาก ขั้นตอนก็ตามด้านล่างนี้เลย
git add .
git commit -m "build and update code"
git pushจากนั้นก็ไปที่หน้า project ใน Github ตรง settings เลื่อนหา GitHub Pages แล้วตั้งค่าเหมือนรูปด้านล่าง เป็นอันจบขั้นตอน
ส่วนการ deploy React Project ไปยัง server ต่างๆ ก็ดูคู่มือเต็มๆได้ตามนี้เลยครับ https://create-react-app.dev/docs/deployment/ มีแทบจะทุกแบบจริงๆ