Tutorial Lengkap: Membangun Web Super Cepat dengan Svelte dan Sveltia CMS

Pendahuluan

Di era digital yang serba cepat ini, performa website bukan lagi sekadar nilai tambah, melainkan sebuah keharusan. Pengguna menuntut pengalaman yang instan dan responsif. Untuk memenuhi tuntutan tersebut, para developer terus mencari teknologi yang efisien. Di sinilah Svelte hadir sebagai revolusi, dan Sveltia CMS sebagai mitra sempurna untuk pengelolaan konten yang mulus.

Artikel ini akan memandu Anda memahami mengapa kombinasi Svelte dan Sveltia CMS adalah pilihan yang tepat untuk proyek web modern, serta memberikan tutorial langkah demi langkah untuk memulai membangun aplikasi web Anda sendiri. Bersiaplah untuk menciptakan situs web yang tidak hanya cepat, tetapi juga mudah dikelola!

Apa Itu Svelte? Mengapa Developer Menyukai Kecepatannya?

Svelte adalah framework JavaScript revolusioner yang mengubah cara kita membangun antarmuka pengguna. Berbeda dengan framework tradisional seperti React atau Vue yang bekerja di runtime (saat aplikasi berjalan), Svelte melakukan sebagian besar pekerjaannya di compile time (saat aplikasi dibuat).

Mengapa Svelte begitu cepat dan disukai?

1. Performa Unggul: Svelte mengkompilasi kode Anda menjadi kode JavaScript vanilla yang sangat efisien. Ini berarti tidak ada virtual DOM untuk dibandingkan atau runtime overhead yang besar, menghasilkan bundle size yang lebih kecil dan waktu load yang super cepat.
2. Pengalaman Developer yang Fantastis: Svelte memiliki sintaksis yang ringkas dan intuitif. Dengan reactivity bawaan yang sederhana (Anda hanya perlu menetapkan nilai baru untuk memperbarui UI), pengembangan menjadi lebih menyenangkan dan produktif.
3. SvelteKit: Ini adalah full-stack framework yang dibangun di atas Svelte. SvelteKit menyediakan solusi lengkap untuk routing, server-side rendering (SSR), static site generation (SSG), API endpoints, dan banyak lagi, membuat pengembangan aplikasi kompleks menjadi jauh lebih mudah.

Singkatnya, Svelte memberikan kecepatan tak tertandingi dan pengalaman pengembangan yang menyenangkan, menjadikannya pilihan ideal untuk aplikasi web yang berorientasi pada performa.

Mengenal Sveltia CMS: Headless CMS untuk Era Modern

Setelah membahas Svelte, mari kita kenali pasangannya yang ideal: Sveltia CMS. Sveltia adalah headless Content Management System (CMS) yang dirancang khusus untuk bekerja secara harmonis dengan Svelte dan SvelteKit.

Apa itu Headless CMS? Berbeda dengan CMS monolitik (seperti WordPress) yang menggabungkan frontend (tampilan) dan backend (konten), headless CMS memisahkan keduanya. Konten dikelola di backend dan diekspos melalui API (atau dalam kasus Sveltia, file langsung), memungkinkan frontend apa pun (Svelte, React, Vue, aplikasi mobile, dll.) untuk mengonsumsinya.

Mengapa Sveltia CMS?

1. Dirancang untuk Svelte/SvelteKit: Integrasi Sveltia dengan SvelteKit sangat mulus, seolah-olah mereka adalah satu kesatuan. Ini mengurangi kompleksitas dan mempercepat development.
2. Git-based (Content-as-Data): Sveltia menyimpan konten Anda sebagai file Markdown, YAML, atau JSON di repositori Git Anda. Ini berarti konten Anda memiliki version control lengkap, mudah di-backup, dan bisa dikelola seperti kode.
3. Tidak Ada Database Terpisah: Karena konten disimpan sebagai file, Anda tidak perlu mengelola database terpisah, yang menyederhanakan deployment dan pemeliharaan.
4. Fokus pada Developer Experience: Sveltia menawarkan admin UI yang bersih dan intuitif, memungkinkan editor konten untuk mengelola data dengan mudah, sementara developer dapat mengkonfigurasi struktur konten dengan JavaScript.
5. Produktivitas Tinggi: Dengan kemampuan local development yang kuat, developer bisa bekerja dengan konten secara offline dan melihat perubahan secara instan.

Sveltia CMS menghilangkan kerumitan pengelolaan konten di sisi backend, memungkinkan Anda fokus pada membangun pengalaman frontend yang luar biasa dengan Svelte.

Panduan Langkah Demi Langkah: Membangun Blog Sederhana dengan SvelteKit dan Sveltia CMS

Mari kita terapkan teori ini ke dalam praktik dengan membangun blog sederhana menggunakan SvelteKit dan Sveltia CMS.

1. Persiapan Lingkungan

Pastikan Anda memiliki Node.js (versi LTS direkomendasikan) dan npm (atau yarn/pnpm) terinstal di sistem Anda.

node -v
npm -v

2. Buat Proyek SvelteKit Baru

Kita akan memulai dengan membuat proyek SvelteKit baru.

npm create svelte@latest my-svelte-blog
cd my-svelte-blog

Saat proses instalasi, pilih opsi berikut (atau sesuaikan dengan preferensi Anda):

• Which Svelte app template? Skeleton project
• Add type checking with TypeScript? Yes, using TypeScript syntax
• Add ESLint for code linting? Yes
• Add Prettier for code formatting? Yes

Setelah itu, instal dependensi dan jalankan proyek:

npm install
npm run dev

Buka http://localhost:5173 di browser Anda. Anda akan melihat halaman awal SvelteKit.

3. Instalasi dan Konfigurasi Sveltia CMS

Selanjutnya, kita akan menginstal Sveltia CMS.

Inisialisasi Sveltia

Di direktori root proyek SvelteKit Anda, jalankan perintah ini:

npx sveltia init

Perintah ini akan memandu Anda untuk membuat file konfigurasi sveltia.config.js di root proyek dan folder content/ untuk menyimpan data Anda.

Buat Koleksi Konten Pertama (posts)

Edit file sveltia.config.js yang baru dibuat. Kita akan menambahkan definisi untuk koleksi “posts” (artikel blog) kita.

// sveltia.config.js
export default {
  collections: [
    {
      name: 'posts', // Nama internal koleksi
      label: 'Posts', // Label yang akan tampil di Sveltia UI
      path: 'content/posts', // Lokasi penyimpanan file konten
      fields: [
        {
          name: 'title',
          label: 'Title',
          widget: 'string', // Tipe input string
          required: true,
        },
        {
          name: 'pubDate',
          label: 'Published Date',
          widget: 'datetime', // Tipe input tanggal & waktu
          required: true,
          format: 'YYYY-MM-DD',
        },
        {
          name: 'body',
          label: 'Body',
          widget: 'markdown', // Tipe input markdown editor
          required: true,
        },
      ],
    },
  ],
};

Jalankan Sveltia UI

Sveltia CMS berjalan bersama aplikasi SvelteKit Anda. Untuk mengakses antarmuka admin Sveltia, jalankan kembali proyek SvelteKit Anda (jika belum berjalan):

npm run dev

Lalu, buka browser dan navigasikan ke http://localhost:5173/sveltia. Anda akan melihat antarmuka admin Sveltia CMS.

Di sana, Anda bisa:

• Pilih koleksi “Posts” di sidebar.
• Klik “Add new” untuk membuat postingan baru.
• Isi judul, tanggal publikasi, dan konten artikel Anda menggunakan editor Markdown.
• Klik “Publish” untuk menyimpan artikel. Artikel Anda akan tersimpan sebagai file .md di content/posts/ di proyek Anda.

4. Mengambil dan Menampilkan Data dari Sveltia di SvelteKit

Sekarang kita punya konten. Saatnya menampilkan di aplikasi SvelteKit kita!

Membuat Halaman Daftar Postingan

Kita akan menampilkan daftar semua postingan di halaman utama (/).

Buat src/routes/+page.server.js: File ini akan berjalan di server untuk mengambil data sebelum halaman dirender.

// src/routes/+page.server.js
import { getCollection } from '@sveltia/core';
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async () => {
  const posts = await getCollection('posts'); // Mengambil semua postingan dari koleksi 'posts'

  // Urutkan postingan berdasarkan tanggal publikasi terbaru
  posts.sort((a, b) => new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime());

  return {
    posts: posts.map((post) => ({
      slug: post.slug, // Sveltia secara otomatis membuat slug dari nama file
      title: post.data.title,
      pubDate: post.data.pubDate,
      // Kita tidak akan menampilkan seluruh body di halaman daftar,
      // tetapi bisa diambil nanti untuk halaman detail
    })),
  };
};

Edit src/routes/+page.svelte: File ini adalah komponen Svelte yang akan menampilkan data yang kita ambil.

<!-- src/routes/+page.svelte -->
<script lang="ts">
  import type { PageData } from './$types';

  export let data: PageData;
</script>

<div class="container">
  <h1>Blog Kukode Digital Technology</h1>
  <p>Temukan artikel-artikel menarik seputar teknologi.</p>

  <div class="posts-grid">
    {#each data.posts as post}
      <article class="post-card">
        <h2><a href="/posts/{post.slug}">{post.title}</a></h2>
        <p class="pub-date">Tanggal: {new Date(post.pubDate).toLocaleDateString('id-ID', { year: 'numeric', month: 'long', day: 'numeric' })}</p>
        <a href="/posts/{post.slug}" class="read-more">Baca Selengkapnya &rarr;</a>
      </article>
    {/each}
  </div>
</div>

<style>
  .container {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: sans-serif;
  }
  h1 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
  }
  .posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
  }
  .post-card {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  }
  .post-card h2 {
    margin-top: 0;
    font-size: 1.5em;
  }
  .post-card h2 a {
    color: #007bff;
    text-decoration: none;
  }
  .post-card h2 a:hover {
    text-decoration: underline;
  }
  .pub-date {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 15px;
  }
  .read-more {
    display: inline-block;
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
  }
  .read-more:hover {
    text-decoration: underline;
  }
</style>

Sekarang Anda akan melihat daftar postingan yang telah Anda buat melalui Sveltia CMS di halaman utama.

Membuat Halaman Detail Postingan

Kita perlu membuat rute dinamis untuk setiap postingan.

Buat src/routes/posts/[slug]/+page.server.js:

// src/routes/posts/[slug]/+page.server.js
import { getCollectionItem } from '@sveltia/core';
import { error } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async ({ params }) => {
  try {
    const post = await getCollectionItem('posts', params.slug);
    return {
      post: {
        title: post.data.title,
        pubDate: post.data.pubDate,
        body: post.data.body, // Ambil seluruh body konten
      },
    };
  } catch (e) {
    throw error(404, 'Postingan tidak ditemukan');
  }
};

Buat src/routes/posts/[slug]/+page.svelte: Untuk merender Markdown, Anda bisa menggunakan library seperti svelte-inline-markdown atau mengimplementasikan parser Markdown sendiri. Untuk tutorial ini, kita akan menggunakan pendekatan sederhana dengan npm i svelte-inline-markdown

<!-- src/routes/posts/[slug]/+page.svelte -->
<script lang="ts">
  import type { PageData } from './$types';
  import { Markdown } from 'svelte-inline-markdown'; // Install: npm install svelte-inline-markdown

  export let data: PageData;
</script>

<div class="container">
  <a href="/" class="back-link">&larr; Kembali ke Blog</a>
  <h1>{data.post.title}</h1>
  <p class="pub-date">Tanggal: {new Date(data.post.pubDate).toLocaleDateString('id-ID', { year: 'numeric', month: 'long', day: 'numeric' })}</p>
  <div class="post-content">
    <Markdown source={data.post.body} />
  </div>
</div>

<style>
  .container {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: sans-serif;
  }
  .back-link {
    display: inline-block;
    margin-bottom: 20px;
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
  }
  .back-link:hover {
    text-decoration: underline;
  }
  h1 {
    color: #333;
    margin-bottom: 10px;
  }
  .pub-date {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
  }
  .post-content {
    line-height: 1.7;
    color: #444;
  }
  /* Basic markdown styling */
  .post-content :global(h2), .post-content :global(h3) {
    color: #333;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
  }
  .post-content :global(p) {
    margin-bottom: 1em;
  }
  .post-content :global(ul), .post-content :global(ol) {
    margin-left: 20px;
    margin-bottom: 1em;
  }
  .post-content :global(a) {
    color: #007bff;
    text-decoration: none;
  }
  .post-content :global(a:hover) {
    text-decoration: underline;
  }
  .post-content :global(code) {
    background-color: #eee;
    padding: 2px 4px;
    border-radius: 4px;
    font-family: monospace;
  }
  .post-content :global(pre) {
    background-color: #f6f8fa;
    padding: 15px;
    border-radius: 6px;
    overflow-x: auto;
    margin-bottom: 1.5em;
  }
  .post-content :global(pre code) {
    background-color: transparent;
    padding: 0;
    color: #333;
  }
</style>

Sekarang, Anda bisa mengklik judul postingan di halaman utama untuk melihat detail lengkap postingan tersebut. Selamat! Anda telah berhasil mengintegrasikan SvelteKit dengan Sveltia CMS.

Keuntungan Menggunakan Kombinasi Svelte dan Sveltia CMS

Menggabungkan Svelte (dengan SvelteKit) dan Sveltia CMS menawarkan banyak keuntungan sinergis:

• Performa Maksimal: SvelteKit menghasilkan output HTML statis atau server-rendered yang sangat cepat, sementara Sveltia CMS yang file-based memastikan tidak ada bottleneck database. Hasilnya adalah website yang sangat responsif.
• Developer Experience yang Unggul: Dengan sintaks Svelte yang mudah dipelajari dan konfigurasi Sveltia yang intuitif, developer dapat membangun dan mengelola proyek dengan lebih cepat dan menyenangkan.
• Konten Berbasis Git: Manfaatkan kekuatan version control Git untuk konten Anda. Setiap perubahan konten adalah komit, memungkinkan pelacakan, rollback, dan kolaborasi yang lebih baik.
• Skalabilitas & Fleksibilitas: Karena Sveltia bersifat headless dan file-based, aplikasi SvelteKit Anda dapat dengan mudah di-deploy ke layanan hosting statis (seperti Netlify, Vercel, Cloudflare Pages) dengan biaya yang sangat rendah dan skalabilitas tak terbatas.
• Kontrol Penuh atas Desain: Tanpa batasan template CMS tradisional, Anda memiliki kebebasan penuh untuk merancang antarmuka pengguna yang unik dan optimal dengan Svelte.

Kesimpulan

Svelte dan Sveltia CMS adalah kombinasi yang powerful untuk developer yang ingin membangun aplikasi web modern yang cepat, efisien, dan mudah dikelola. Svelte menawarkan performa tak tertandingi dan pengalaman pengembangan yang menyenangkan, sementara Sveltia CMS menyediakan solusi pengelolaan konten headless yang ringan, berbasis Git, dan terintegrasi dengan mulus.

Dengan mengikuti panduan ini, Anda sekarang memiliki dasar untuk mulai membangun proyek web Anda sendiri dengan teknologi canggih ini. Jangan ragu untuk bereksperimen, menambahkan lebih banyak koleksi, dan menjelajahi fitur-fitur canggih lainnya dari SvelteKit dan Sveltia CMS. Masa depan pengembangan web yang cepat dan efisien ada di tangan Anda!

Tertarik untuk menerapkan teknologi ini di proyek Anda atau membutuhkan bantuan profesional? Hubungi Kukode Digital Technology untuk konsultasi lebih lanjut!