Salah satu benda yang cepat jadi leceh bila bina blog statik ialah urus content. Front Matter CMS ialah extension VS Code yang buat proses menulis dan kemas kini post rasa lebih dekat dengan pengalaman guna CMS, tapi tanpa perlu setup backend.

Apa itu Front Matter CMS?

Front Matter CMS ialah extension untuk Visual Studio Code yang bagi beberapa benda ini terus dalam editor:

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

Semua ini jalan secara local dalam VS Code. Tak perlu server, tak perlu database, dan tak ada kos tambahan untuk setup CMS berasingan.

Kenapa Saya Pilih Front Matter?

KelebihanPenerangan
Zero setupInstall extension, sedia untuk guna
Git-friendlySemua content dalam markdown files
CustomizableDefine custom fields untuk frontmatter
FreeTiada subscription atau hosting fees
Works offlineTiada pergantungan pada internet

Setup untuk Astro Blog

1. Install Extension

Cari “Front Matter CMS” dekat VS Code Extensions dan install macam biasa.

2. Initialize Project

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

Lepas initialize, 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 ini, saya define beberapa custom fields yang memang saya guna dekat setiap post:

{
  "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 sediakan dashboard untuk tengok semua artikel dalam satu tempat:

Front Matter Dashboard

Dari sini, saya boleh:

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

Editing Experience

Bila buka markdown file, panel Front Matter akan muncul di sebelah:

Front Matter Editor

Panel ini memang mudahkan kerja harian:

  • 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 biasanya ada frontmatter lebih kurang macam 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 akan auto-generate dan validate field macam ini, jadi tak perlu kerap semak YAML secara manual.

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 juga boleh auto-generate artikel baru ikut template yang kita define.

3. SEO Preview

Extension ini juga boleh preview macam mana artikel akan nampak dekat Google search results.

Kesimpulan

Bagi saya, Front Matter CMS memang sesuai 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

Kalau anda memang suka tulis content terus dalam editor, workflow ini memang sedap dipakai. Kalau ada soalan, boleh hubungi saya di X (@xhafism) atau Threads (@haf.ism).

Artikel ini sebahagian daripada siri tentang Astro blog setup dan tools yang mudahkan content workflow harian.

Back to Blog