จัดการ Content ด้วย pagecms opensource สุดคูล

Introduction

เว็บไซต์นี้พัฒนาโดยใช้ Nuxt ร่วมกับ NuxtContent ซึ่งการจะเป็นการนำเอา Content ในรูปแบบของ Markdown มาสร้างเป็น Web Application โดยเป็นไปตามที่มีการตั้งค่าเอาไว้ ซึ่งวิธีนี้จะทำให้สามารถ Custom ตัวเว็บไซต์ได้เกือบ 100% เลย

ผมเก็บ source code ของ website ไว้ที่ github และ deploy ไปยัง cloudflare page โดยใช้ CICD ของ cloudflare page ครับ ซึ่งวิธีการนี้ทำให้มีค่าใช้จ่ายของเว็บไซต์นี้เกือบจะเป็น 0 บาทต่อเดือนเลยครับ เพราะทุกอย่างใช้จบได้ภายใน Free Tier

แต่ความยากอย่างนึงที่ผมเจอก็คือการที่ต้องจัดการ content ซึ่งอยู่ในรูปแบบของ markdown ช่วงแรก ๆ ก็จะใช้งานผ่าน vscode เอาเลย แต่ช่วงหลังก็เปลี่ยนมาใช้ obsidian โดยปรับแต่งให้สามารถจัดการ content ได้ แต่ก็ยังรู้สึกไม่ค่อยสะดวกเท่าไหร่

จนผมมาเจอเครื่องมือ opensource ตัวนึงชื่อว่า pagecms ซึ่งสามารถแก้ไขปัญหาตรงนี้ให้ผมได้และสะดวกมากขึ้นเยอะเลยครับ

What is pagecms?

pagecms คือ Content Management System สำหรับ Website ที่เป็นประเภท Static Site เช่น Jekyll, Next.js, VuePress, Hugo หรือประเภทใดก็ตามที่มีการเก็บ content ในลักษณะของ File Markdown

ซึ่งตัวเครื่องมือนี้สามารถใช้งานได้แบบง่าย ๆ โดยการเข้าใช้งานที่ https://app.pagescms.org/ จากนั้นทำการเชื่อมต่อกับ Github และเลือก Repo ที่ต้องการได้เลย

สามารถกำหนดการตั้งค่าต่าง ๆ ได้ผ่านตัวเว็บไซต์เลยครับ กำหนด config ให้ตรงกับ project structure โดยดูเพิ่มเติมได้จาก https://pagescms.org/docs/configuration/

สิ่งที่ pagecms สามารถทำได้

• เพิ่ม/ลบ/แก้ไข content ของ website ได้ โดยจะเป็นการ commit เพื่อแก้ไข repo บน github โดยตรง
• สามารถเพิ่ม/ลบ จัดการ media ภายใน website หรือ repo ได้
• สลับ branch ในการจัดการได้
• สามารถ invite คนอื่นเข้ามาร่วมแก้ไขได้ด้วย โดยอันนี้จะเป็นการ invite เข้า repo บน github เลยนะครับ

ซึ่งทั้งหมดจะทำงานบน github อีกทีนึง ตัว pagecms จะเป็นแค่หน้ากากทำให้ใช้งานได้ง่ายยิ่งขึ้นครับ

คำแนะนำ

จากที่ลองใช้งานมารู้สึกโอเคนะครับ แต่ตอนนี้ project กำลังอยู่ในช่วงพัฒนาคิดว่าจะมีฟีเจอร์มาให้ใช้งานอีกเพียบ สามารถติดตามได้ที่ https://github.com/pages-cms/pages-cms

แนะนำให้สร้าง branch แยกกับ branch ที่มีการเปิด CICD เอาไว้นะครับ เพราะว่าทุกครั้งที่มีการ Upload File ในช่อง "Media" มันจะเป็นการสร้าง commit ใหม่ ซึ่งจะ trigger CICD เลยครับ แนะนำว่าให้สร้าง branch ใหม่แล้วถ้าต้องการ update ค่อย merge เข้าไปใน branch หลักอีกที

สำหรับผมมองว่าเป็นแค่ Add-on ที่เพิ่มเข้ามา ถ้าวันนึงมันไม่ work แล้วก็สามารถนำออกไปได้เลยครับ

ส่วนอันนี้เป็น config สำหรับ Nuxt Content + Nuxt ที่ผมใช้งานอยู่นะครับ

media: 
  input: public/images
  output: /images
content:
  - name: blogs
    label: Blog Posts
    type: collection
    path: 'content/blogs'
    view:
      fields: [ title, draft, date, tags ]
    fields:
      - name: title
        label: Title
        type: string
      - name: description
        label: Description
        type: string
      - name: date
        label: Date
        type: date
        options:
          format: yyyy-MM-dd
      - name: tags
        label: Tags
        type: select
        options:
          creatable: true
          multiple: true
          values: [ News, Security, Home Lab, N8N, Telegram Bot, Ubuntu, Development, LLM ]
      - name: draft
        label: Draft
        type: boolean
        default: false
      - name: image
        label: Banner Image
        type: image
      - name: prev
        label: Previous Post
        type: string
        description: Link to previous post
      - name: next
        label: Next Post
        type: string
        description: Link to next post
      - name: recommends
        label: Recommended Posts
        type: select
        options:
          creatable: true
          multiple: true
      - name: body
        label: Body
        type: rich-text