How I build and deploy this website.

---

สวัสดีครับ ก่อนอื่น ขอขอบคุณทุกคนที่เข้ามาเยี่ยมชมเว็บไซต์ของผมนะ ผมตั้งใจว่าจะใช้พื้นที่นี้ไว้สำหรับเขียน หรือเก็บประสบการณ์ที่ผมได้เจอในฐานะของ Developer หรืออะไรก็ตามที่รู้สึกว่าเจ๋งดีแล้วอยากจะทำการบันทึกไว้

ขอแนะนำตัวก่อน ผมชื่ออภิสิทธิ์ สะโมรส เป็นคนที่มีความสนใจด้านคอมพิวเตอร์หรือเทคโนโลยีต่างๆ ที่เกี่ยวกับคอมพิวเตอร์ วันนี้เลยจะมาบันทึกวิธีการที่ผมสร้างเว็บไชต์นี้ขึ้นมา จริงๆ แล้วการ deploy ไม่มีการซับซ้อนอะไรมากเลย ทุกคนสามารถทำได้ ซึ่งตัว service ที่ผมใช้สำหรับการ deploy ก็คือตัว github pages ครับ ซึ่งสามารถ deploy ได้ฟรีใน repo ที่เป็น public ซึ่งเหมาะกับเว็บไซต์ที่ไม่มี traffic เยอะ

ส่วนเครื่องมือที่ผมใช้ หรือ Tech Stack มีอยู่อย่างเดียวเลยก็คือ Astro

โดย Astro เป็น Web Framework หนึ่งที่ช่วยสำหรับการสร้าง Static เว็บไซต์ ซึ่งตัว Astro จะใช้วิธีการ render จากทาง server เป็นหลักแทนที่การส่ง Javascript ไฟล์ไปให้ฝั่ง Client render เอง ซึ่งจะทำให้เว็บไซต์เราโหลดได้เร็วกว่า เพราะว่าสิ่งที่โหลดมาเนี่ย มีแค่ไฟล์ Html กับ Css เท่านั้นเลย (จะมี Javascript อยู่น้อยลงมาก เหลือแค่ส่วนที่จำเป็นเท่านั้น) นอกจากนั้นการที่เว็บของเราเป็น Static แบบนี้ยังสามารถช่วยเรื่องของ SEO(Search Engine Optimization) ได้ด้วย เพราะว่าตัว Search Engine จะสามารถอ่านของจากเว็บเราได้ทันทีเลยโดยไม่ต้องรอให้เว็บไซต์โหลดแล้วมา render อีกที ก็จะทำให้เว็บของเราค้นหาได้ง่ายมากขึ้น ตามที่ผมเข้าใจนะ

แต่นอกจากเหตุผลที่ Astro ทำการ render static website ให้แล้ว สิ่งที่ผมเลือกใช้เครื่องมือนี้อีกอย่างหนึ่งเลยก็เพราะว่า มันสามารถ Render Mardown ได้โดยไม่ต้องลงอะไรเพิ่มเลย (Markdown ที่ว่าก็คือสิ่งที่อยู่ในหน้าเว็บนี้แหละครับ) อย่างที่บอกไปว่าผมอยากสร้างเว็บไซต์ไว้สำหรับเขียน Blog หรือบันทึกสิ่งต่างๆ ตัว Markdown นี่แหละเป็น Format ที่ผมเลือกใช้ในการบันทึก

เอาล่ะขออภัยที่เกริ่นซะนาน ต่อไปมาดู Stack ที่ผมใช้จริงๆ กัน

• Astro — Web Framework
• Tailwindcss — ใช้สำหรับทำ UI ให้สวยงามแบบง่ายๆ

เครื่องมืออื่นๆ สำหรับช่วยในการพัฒนาเว็บ

• Nightwatchjs — ตัวนี้คือ Test Automation framework ครับ เป็นตัวช่วยที่ดีสำหรับการเทสเว็บไซต์ของผม โดยที่ไม่ต้องไปลงมือเอง
• pnpm — pacakge manager เหตุผลที่ผมเลือก pnpm คือมันจะทำการโหลดพวก dependency ต่างๆ เก็บไว้ใน cache แทนที่จะมาลงไว้ใน project ทั้งหมด (มันประหยัดพื้นที่อันน้อยนิดของเครื่องผมน่ะครับ)

แล้วก็ Github ตัวพระเอกของเรา ใช้ทั้งการเก็บ Source code แล้ว Deploy ขึ้นตัว Github Pages

---

ลงมือ

สิ่งที่เราต้องเตรียมมีแค่ไม่กี่อย่างครับ

1. repository ของเรา โดยต้องเป็นแบบ plublic ด้วยนะ
2. source code หรือแค่ตัวเว็บไซต์ที่ทำการ build มาแล้วก็ได้

วิธีที่ผมใช้ deploy จะเป็นการใช้ github action ในการ build และ deploy code ให้ทีเดียวเลย ซึ่งตัว workflow นี่ทาง Astro ก็มีตัว Template ให้มาเรียบร้อยแล้ว สามารถอ่านได้ที่นี่

โดยผลสุดท้ายไฟล์ workflow ที่ได้จะเป็นแบบนี้ครับ

# deploy.yml
name: Deploy to GitHub Pages

on:
  push:
    branches: [main]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout your repository using git
        uses: actions/checkout@v4
      - name: Install, build, and upload your site
        uses: withastro/action@v3
        with:
          node-version: 20
          package-manager: pnpm@latest

  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

สิ่งที่ผมแก้เพิ่มเติมคือเพิ่มส่วนที่บอก version ของ node แล้วก็ pnpm เท่านั้นเอง ตัวไฟล์นี้น่ะ เรานำไปวางไว้ที่ folder .github/workflows/

เรียบร้อย

เพียงแค่นี้เราก็พร้อม deploy ขึ้น github pages แล้วล่ะ ผมข้ามการอธิบายเรื่อง github action ไป ตอนนี้น่าจะเป็นโอกาสเหมาะที่จะได้พูดถึงมันหน่อย ผมจะพยายามอธิบายให้เต็มความสามารถของผมนะ

ตัว github action เป็นเครื่องมือ automate แบบหนึ่ง ลองนึกถึงว่าการ deploy แต่ละครั้งเราจะต้องทำอะไรบ้าง ถ้าพูดแบบคร่าวๆ เลยก็จะมีการ build เพื่อทำให้เว็บเราพร้อม และ optimize สำหรับการใช้งาน, เมื่อ build เสร็จแล้ว เราต้องนำไฟล์ที่เราจะทำการ deploy ไปวางไว้ที่ server นั่นหมายความว่าถ้าผมต้องการจะนำเว็บไปใช้งาน ผมต้อง build รอให้เสร็จ พอเสร็จแล้วก็ต้อง copy ไฟล์ access เข้าไปใน server วางไฟล์ใหม่เข้าไป restart server และอื่นๆ ถ้าต้องมานั่งทำแบบนี้เองหลายๆ ครั้ง กว่าจะได้ดูเว็บผมต้องเสียเวลามานั่งรออยู่เยอะพอสมควร

ตัว github action จะมาใช้ช่วยส่วนนี้แหละ มันสามารถกำหนดงานและขั้นตอนต่างๆ ให้ทำงานได้แบบอัตโนมัติเลย

ถ้าดูจากไฟล์ที่เรามีตอนนี้

on:
  push:
    branches: [main]
  workflow_dispatch:

ส่วนนี้จะเป็นการบอกว่า workflow ไฟล์นี้ จะให้ทำงานตอนไหน push ก็คือผม push code เข้าไปใน git ก็จะทำงานเลย ส่วน workflow_dispatch คือผมสามารถไปกด manual จากตัว repository ได้

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout your repository using git
        uses: actions/checkout@v4
      - name: Install, build, and upload your site
        uses: withastro/action@v3
        with:
          node-version: 20
          package-manager: pnpm@latest

  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

ส่วนนี้จะเรียกว่า Job ก็คืองานที่อยากให้ทำ ในตัวอย่างนี้จะมี 2 งาน คือ build และ deploy และแต่ละงานจะประกอบด้วย Steps เพื่อบอกว่างานนี้มีขั้นตอนอะไรบ้างที่ต้องทำ

คร่าวๆ ของ github action ก็จะประมาณนี้ครับจริงๆ มันใช้ข้อความที่เราสามารถอ่านได้เข้าใจอยู่ระดับนึง ผมขอละรายละเอียดต่างๆ ไว้นะครับ

เอาล่ะเท่านี้ก็พร้อมเรียบร้อยแล้ว ทีนี้จะเหลืออีกหนึ่งอย่างที่น่าจะต้องทำกันสำหรับคนที่ใช้ Astro นะ ผมได้เจอว่า folder ที่ขึ้นต้นด้วย _ จะไม่สามารถเข้าถึงแบบสาธารณะได้ (ผมคิดว่านะ) ซึ่งตัว Astro เนี่ยเวลา build แล้ว จะทำการเก็บ assets ไว้ใน folder ชื่อ _astro … ครับผม ตอนที่ผมเจอคือไฟล์ css เนี่ยมันถูกเก็บไว้ในนี้ ทำให้หน้าเว็บผมขาวโพลนเลย แต่ก็แก้ได้ไม่อยากแค่ไปตั้งค่าให้มัน build ไปไว้ที่ folder อื่นก็ใช้งานได้แล้ว

export default defineConfig({
  ...
  build: { assets: "astro_assets" },
});

เรียบร้อย จากนั้นก็แค่ push code แล้วรอชมหน้าเว็บของเราขึ้นมาได้เลย (/^o^/)

นี่ก็เป็นวิธีที่ผมใช้สำหรับการ deploy เว็บนี้ครับ เดี๋ยวนี้เครื่องมือต่างๆ พร้อมมาก เราสามารถทำอะไรต่างๆ ได้ง่ายดายขึ้นเยอะเลย (ก็ไม่ใช่ว่าผมจะเคยลำบากอะไรมานะ แต่รู้สึกชื่นชมกับความสามารถของ technology ในปัจจุบันมาก) ที่เหลือก็จะเป็นการปล่อยจินตนาการของทุกคนแล้วล่ะครับ ขอให้มีความสุขกับการ coding หวังว่าบทความนี้จะมีประโยชน์ได้บ้าง ถ้าผิดพลาดประการใดขออภัยไว้ ณ ที่นี้ แล้วก็จะนำไปปรับปรุงนะครับ (b^.^b)