Website iszuddinismail.com memang dah lama. Cuba saya yang tak konsisten dalam menulis. Kali terakhir saya membuat kemaskini lebih kepada untuk halaman hadapan sahaja. Dan ruangan blog ini, walaupun masih ada macam disembunyikan pula.

Apa pun saya nak maklumkan yang website iszuddinismail.com yang dulunya berasaskan WordPress kini adalah sebuah website statik.

Ini bermakna di server, tiada lagi PHP & MySQL. Tiada juga apa jenis database pun. Malahan ia sekarang menggunakan infrastruktur Cloudflare Pages yang dikhususkan untuk website dengan HTML, CSS, JavaScript dan gambar-gambar.

Ada yang teringat zaman Geocities tak? Ya, macam tulah. (dan korang kalau ingat Geocities mesti dah tua)

Kenapa tukar dari WordPress ke Statik?

Jujurnya saya nak kata yang saya penat jaga website WordPress. Malahan, dengan website WordPress ni kita kena ada VPS atau web hosting. Lepas tu saya tak update sangat pun website ni. Tapi sayang kalau nak buang. Domain tu ada, maka eloklah website-nya ada juga.

Ya, satu VPS boleh letak banyak website. Tapi kalau saya dapat kurangkan satu persatu, mungkin saya boleh kurangkan satu VPS yang saya perlu bayar.

Oh, ya! Cloudflare Pages ni percuma. Ya! Free.

Kan saya kata yang saya penat jaga website WordPress ni. Antaranya adalah sebab:

  • Penat nak kena update website selalu; themes, plugins, core, dll.
  • Lepas tu kalau VPS nak kena jaga compatibality dengan source code. Contoh plugin tertentu kena pakai PHP8. Atau sebaliknya.
  • Penat website asyik kena attack; WordPress memang selalu menjadi sasaran. Kalau dia tak jumpa apa-apa pun, website masih down sebab dia macam kena DDOS.
  • Nak update nak kena login ke panel. Dan rasanya WordPress ni dengan pelbagai plugin yang diperlukan, kadang rasa berat admin UI tu.
  • Kat frontend juga berat dan lambat nak load. Banyak kod yang WordPress ni loading hanya untuk paparkan beberapa baris HTML. Tapi website statik ni laju. Dia takde nak ambil data dari pangkalan data. Memang terus papar sahaja HTML.

Oh banyak mengutuk WordPress pula. Takdelah… yang nak pakai tu, teruskanlah. Takde salahnya. Janji dapat cari makan.

Saya pun ada juga website klien yang saya masih pakai WordPress ni. Tapi kalau dapat kontrak baru, mungkin saya akan racun guna static site je. Kalau dia terlalu familiar dengan WordPress, kita minta dia invest pakai SSG plugin. WordPress tu memang untuk itulah — content management sahaja. Tapi kita akan generate HTML, CSS, JavaScript, gambar-gambar dan kita hostinglah kat static hosting mana-mana. S3 dengan Cloudfront ke, Cloudflare Pages, atau lain-lain.

Macam Mana Saya Beralih ke Static Site — AstroJS

Dalam dunia static site ni ada satu konsep dipanggil static site generator, atau SSG.

Kalau kita faham apa itu website statik. Dan kita faham blogging, maka kita tahu yang setiap halaman di sesebuah website statik adalah satu fail HTML. Maka bila kita membina blog gaya website statik, setiap artikel perlu dibina satu fail HTML.

Ya. Betul… begitulah.

Tak susah ke?

Ada beberapa pendekatan untuk kita membina website statik ni. Tapi dua cara yang paling biasa adalah:

  • Menggunakan format Markdown untuk menulis artikel
  • Menggunakan sebuah perisian yang dipanggil headless CMS

Sekadar untuk makluman, bila kitag guna headless CMS, ianya khusus untuk pengurusan kandungan dan penulisan. Ia tidak datang bersama ciri-ciri rekabentuk dan rekaletak. Antara yang popular adalah seperti Strapi dan Directus. Kalau mahukan aplikasi desktop, boleh cuba Publii.

Tapi saya menggunakan file dengan format Markdown sahaja. Markdown adalah seperti seperti HTML tetapi lebih ringkas lagi. Contoh

<h1>Selamat Datang</h1>

HTML

# Selamat Datang

Markdown

Kita akan gunakan sesuatu enjin lain untuk menterjemahkan Markdown ke HTML, dan kemudian boleh dilihat menggunakan pelayar Internet seperti biasa.

Saya memilih AstroJS sebagai static site generator. Ia adalah framework moden yang membenarkan kita membina website dengan sangat pantas. Yang best pasal AstroJS ni adalah dia sangat fleksibel dan mudah untuk digunakan.

Kenapa Pilih AstroJS?

Bila saya mula survey nak pilih SSG yang mana, ada beberapa pilihan popular seperti:

  • Jekyll - Yang paling lama dan popular. Ruby-based. GitHub Pages gunakan ini.
  • Hugo - Super laju. Ditulis dalam Go. Tapi template dia agak kompleks.
  • Next.js - Powerful tapi rasa macam overkill untuk website personal yang simple.
  • Eleventy (11ty) - Minimalist dan fleksibel. JavaScript-based.
  • AstroJS - Modern, pantas, dan support pelbagai framework.

Saya pilih AstroJS sebab:

  1. Performance First - Astro by default ship zero JavaScript ke browser melainkan kita perlukan. Ini buat website super laju.
  2. Markdown Support - Built-in support untuk Markdown. Boleh tulis content dalam Markdown terus.
  3. Component-Based - Boleh buat komponen yang boleh reuse. Macam React/Vue tapi lebih simple.
  4. TypeScript Support - Kalau nak guna TypeScript, dia support out of the box.
  5. Easy Learning Curve - Kalau dah biasa HTML, CSS, JavaScript, mudah je nak pickup Astro.

Proses Migration dari WordPress

Okay, jadi macam mana saya buat migration ni?

1. Export Content dari WordPress

Pertama sekali, saya export semua artikel dari WordPress. WordPress ada built-in export tool yang akan keluarkan semua content dalam format XML.

Saya download XML file tu, dan kemudian saya kena convert ke Markdown format. Ada beberapa tools online yang boleh buat conversion ni, tapi saya guna script Python sendiri untuk pastikan formatting betul-betul cantik.

2. Setup AstroJS Project

Saya mulakan dengan command simple:

npm create astro@latest

Astro akan tanya beberapa soalan untuk setup project. Saya pilih:

  • Template: Empty (nak bina dari kosong)
  • TypeScript: Yes, strict
  • Install dependencies: Yes

Lepas tu saya setup struktur folder untuk blog:

src/
  content/
    blog/
      artikel-1.md
      artikel-2.md
  layouts/
    BaseLayout.astro
  pages/
    index.astro
    blog/
      [slug].astro

3. Configuration untuk Blog

Dalam AstroJS, ada satu feature yang sangat berguna dipanggil Content Collections. Ini memudahkan kita manage content seperti blog posts.

Saya setup dalam src/content/config.ts:

import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    date: z.date(),
    categories: z.array(z.string()),
    tags: z.array(z.string()).optional(),
    heroImage: z.string().optional(),
  }),
});

export const collections = { blog };

Dengan ini, setiap artikel blog saya kena ada frontmatter yang mengikut schema ni. Kalau tak ikut, AstroJS akan bagi error masa build. Bagus untuk QA!

4. Gunakan AI untuk Rebuild Design

Sekarang ni zaman AI kan? Saya tak nak buang masa nak design dari scratch. Tapi saya ada vision macam mana nak website ni nampak.

Saya gunakan GitHub Copilot untuk:

  1. Hasilkan Komponen Rekaletak - Bagi idea kat AI macam mana, dia akan cadangkan komponen dan rekaletak.
  2. CSS Styling - Terangkan tema yang saya nak, AI hasilkan CSS yang cantik. Saya ubahsuai di mana yang perlu.
  3. Responsive Design - Minta AI hasilkan responsive breakpoints dan mobile-friendly styles.
  4. Animation & Transitions - Ini yang best! Minta AI buat fade-in effects untuk hero images, smooth scrolling, dan lain-lain.

Contoh prompt yang saya guna:

“Create a hero section slideshow with 5 images that fades in and out smoothly. Each image should be customizable with data-position attribute to control the anchor point.”

Dan AI akan generate kod yang lengkap dengan HTML, CSS dan JavaScript. Saya tinggal adjust sikit-sikit je untuk match dengan design yang saya nak.

5. Front Matter Extension di VS Code

Ini yang paling game changer untuk saya!

Front Matter CMS adalah extension untuk VS Code yang tukarkan VS Code kepada content management system. Ya, betul! CMS dalam code editor.

Install je extension Front Matter, dan suddenly VS Code ada:

  • Content Dashboard - Boleh nampak semua blog posts dalam dashboard
  • Media Library - Upload dan manage images terus dalam VS Code
  • Content Editor - Edit blog post dengan preview panel
  • SEO Tools - Built-in SEO checker untuk setiap artikel
  • Metadata Panel - Fill in frontmatter macam title, date, categories dengan GUI

Yang paling saya suka:

  1. Create New Post - Satu klik je buat post baru. Dia auto generate frontmatter.
  2. Image Optimization - Bila upload gambar, boleh auto optimize size dan format.
  3. Content Preview - Boleh preview Markdown side by side dengan editor.
  4. Publish Workflow - Ada git integration, senang nak commit dan push terus dari extension.

Setup Front Matter pun mudah:

# Install extension dari VS Code marketplace
# Search: "Front Matter CMS"

Lepas install, run command:

Front Matter: Initialize project

Dia akan create frontmatter.json config file. Saya configure untuk project Astro saya:

{
  "frontMatter.taxonomy.contentTypes": [{
    "name": "blog",
    "pageBundle": false,
    "fields": [
      {
        "title": "Title",
        "name": "title",
        "type": "string"
      },
      {
        "title": "Date",
        "name": "date",
        "type": "datetime"
      },
      {
        "title": "Categories",
        "name": "categories",
        "type": "categories"
      },
      {
        "title": "Tags",
        "name": "tags",
        "type": "tags"
      },
      {
        "title": "Hero Image",
        "name": "heroImage",
        "type": "image"
      }
    ]
  }],
  "frontMatter.content.pageFolders": [
    {
      "title": "blog",
      "path": "[[workspace]]/src/content/blog"
    }
  ]
}

Dengan setup ni, bila saya nak tulis artikel baru:

  1. Buka Front Matter panel
  2. Click “Create new content”
  3. Isi borang dengan title, categories, dll
  4. Tulis artikel dalam Markdown
  5. Upload gambar kalau perlu
  6. Preview dulu
  7. Commit & Push ke GitHub

Dan automatik website akan rebuild dan deploy ke Cloudflare Pages!

Deploy ke Cloudflare Pages

Setup deployment pun senang gila:

  1. Push code ke GitHub repository
  2. Login ke Cloudflare Dashboard
  3. Pages → Create a project → Connect to Git
  4. Pilih repository
  5. Build settings:
    • Build command: npm run build
    • Build output directory: dist
  6. Done!

Lepas ni setiap kali saya push ke GitHub, Cloudflare akan auto build dan deploy. Dalam masa 1-2 minit, website dah live dengan changes terbaru.

Kesimpulan

Migration dari WordPress ke AstroJS ni adalah keputusan yang sangat baik untuk saya:

✅ Website lebih pantas - Tiada capaian dan pemprosesan ke pangkalan data.

✅ Senang maintain - tak perlu nak update themes atau plugins

✅ Percuma hosting - Cloudflare Pages free tier

✅ Better workflow - Front Matter + VS Code = Sangat mudah untuk bloggin

✅ AI-assisted development - Dalam VS Code saya ada Github Copilot kalau perlu bantuan apa-apa

Kalau kalian ada website personal atau blog yang tak mahukan kerumitan WordPress, saya cadangkan beralihlah ke static site.

Kalau website tersebut adalah sekadar website korporat yang biasanya hanya ada maklumat yang jarang berubah, eloklah beralih ke static site.

Lebih-lebih lagi sekarang ni dengan AI, kita boleh gunakan AI untuk bina website yang cantik dengan cepat tanpa perlu jadi mahir dalam, frontend, design atau coding.

Cuba lah! Mungkin korang akan suka. 😊

P/S: Kalau ada soalan pasal AstroJS atau migration ni, boleh cuba hubungi saya. Saya cuba bantu.