Mengurus Blog dengan Front Matter CMS

Salah satu cabaran dalam membina blog statik adalah mengurus content. Front Matter CMS adalah extension VS Code yang menjadikan pengalaman menulis blog hampir sama dengan CMS seperti WordPress, tetapi tanpa backend.

---

Apa itu Front Matter CMS?

Front Matter CMS adalah extension untuk Visual Studio Code yang menyediakan:

• Dashboard untuk melihat semua artikel
• Panel editor untuk metadata (title, tags, date)
• Media manager untuk gambar
• Preview sebelum publish

Semua ini berjalan secara lokal dalam VS Code - tiada server, tiada database, tiada kos hosting.

---

Kenapa Saya Pilih Front Matter?

Kelebihan	Penerangan
Zero setup	Install extension, sedia untuk guna
Git-friendly	Semua content dalam markdown files
Customizable	Define custom fields untuk frontmatter
Free	Tiada subscription atau hosting fees
Works offline	Tiada pergantungan pada internet

---

Setup untuk Astro Blog

1. Install Extension

Cari “Front Matter CMS” di VS Code Extensions dan install.

2. Initialize Project

Tekan Ctrl+Shift+P → “Front Matter: Initialize project”

Extension akan detect Astro dan create frontmatter.json:

{
  "$schema": "https://frontmatter.codes/frontmatter.schema.json",
  "frontMatter.framework.id": "astro",
  "frontMatter.content.publicFolder": "public",
  "frontMatter.content.pageFolders": [
    {
      "title": "Blog",
      "path": "[[workspace]]/src/content/blog"
    }
  ]
}

3. Define Content Type

Untuk blog saya, saya define custom fields:

{
  "frontMatter.taxonomy.contentTypes": [
    {
      "name": "blog",
      "pageBundle": false,
      "previewPath": "/blog",
      "fields": [
        {
          "title": "Title",
          "name": "title",
          "type": "string",
          "required": true
        },
        {
          "title": "Description",
          "name": "description",
          "type": "string",
          "required": true
        },
        {
          "title": "Publish Date",
          "name": "date",
          "type": "datetime",
          "required": true,
          "isPublishDate": true
        },
        {
          "title": "Tags",
          "name": "tags",
          "type": "tags"
        },
        {
          "title": "Draft",
          "name": "draft", 
          "type": "boolean",
          "default": false
        },
        {
          "title": "Hero Image",
          "name": "heroImage",
          "type": "image"
        }
      ]
    }
  ]
}

---

Pengalaman Menggunakan Front Matter

Dashboard View

Front Matter menyediakan dashboard untuk melihat semua artikel:

Dari sini, saya boleh:

• Lihat semua published dan draft articles
• Sort mengikut tarikh
• Filter mengikut tags
• Create artikel baru dengan satu klik

Editing Experience

Apabila buka markdown file, panel Front Matter muncul di sebelah:

Panel ini memudahkan:

• Set title dan description - Tanpa perlu taip YAML manually
• Pick date - Date picker yang proper
• Manage tags - Autocomplete dari existing tags
• Upload hero image - Drag and drop ke media manager
• Toggle draft status - Satu checkbox untuk publish/unpublish

---

Contoh Frontmatter yang Dihasilkan

Setiap artikel saya mempunyai frontmatter seperti ini:

---
title: Membina Expense Tracker dengan Cloudflare Stack
date: 2025-12-24T16:25:16.774Z
description: Panduan teknikal bagaimana saya membina aplikasi pengurusan kewangan
tags:
    - cloudflare
    - javascript
    - pwa
    - tutorial
heroImage: /images/blog/expensemy/dashboard.png
draft: false
---

Front Matter auto-generate dan validate semua fields ini.

---

Tips & Tricks

1. Keyboard Shortcuts

• Ctrl+Alt+D - Buka Front Matter Dashboard
• Ctrl+Alt+P - Toggle panel visibility

2. Snippet untuk New Posts

Front Matter boleh auto-generate artikle dengan template yang kita define.

3. SEO Preview

Extension juga preview bagaimana artikel akan appear di Google search results.

---

Kesimpulan

Front Matter CMS adalah pilihan terbaik untuk developer yang:

• Suka menulis dalam VS Code
• Mahu workflow yang simple tanpa external CMS
• Prefer Git-based content management
• Tak mahu bayar untuk headless CMS

Sebarang soalan, boleh hubungi saya di X (@xhafism) atau Threads (@haf.ism).

---

Artikel ini adalah sebahagian daripada siri tentang setup blog dengan Astro dan tools yang memudahkan content management.