{"id":135,"date":"2026-09-14T00:27:02","date_gmt":"2026-09-14T00:27:02","guid":{"rendered":"https:\/\/songlyrics.keponews.id\/music\/2026\/09\/14\/cara-membuat-postingan-baru-dengan-benar-dan-aman-di-astro\/"},"modified":"2026-09-14T00:27:02","modified_gmt":"2026-09-14T00:27:02","slug":"cara-membuat-postingan-baru-dengan-benar-dan-aman-di-astro","status":"publish","type":"post","link":"https:\/\/songlyrics.keponews.id\/music\/2026\/09\/14\/cara-membuat-postingan-baru-dengan-benar-dan-aman-di-astro\/","title":{"rendered":"Cara Membuat Postingan Baru dengan Benar dan Aman di Astro"},"content":{"rendered":"

<\/p>\n

\n\"Cara<\/p>\n

Sekarang saatnya kita berkenalan dengan framework modern, yaitu Astro<\/strong>. Sebagai framework web modern yang mengutamakan kecepatan, Astro memiliki pendekatan yang sedikit berbeda namun sangat aman dalam mengelola artikel, yaitu menggunakan fitur Content Collections<\/strong>.<\/p>\n

Dengan metode yang benar, artikel Anda tidak hanya rapi secara struktur kode dan ramah SEO, tetapi juga terhindar dari risiko kesalahan (error<\/em>) saat proses pembangunan (build<\/em>) di server deployment<\/em> seperti Vercel.<\/p>\n

Berikut adalah panduan lengkap cara membuat postingan baru di Astro dari awal, baik melalui komputer lokal maupun langsung via GitHub.<\/p>\n\n

Langkah 1: Memahami Struktur Folder Artikel di Astro<\/h2>\n

Di dalam proyek Astro, artikel idealnya disimpan di dalam folder Content Collections<\/strong>.<\/p>\n

Struktur foldernya di komputer lokal Anda akan terlihat seperti ini:<\/p>\n

astroku\/\n\u251c\u2500\u2500 src\/\n\u2502   \u251c\u2500\u2500 content\/\n\u2502   \u2502   \u2514\u2500\u2500 blog\/  \n
Catatan:<\/strong> Anda bebas menamai folder di dalam src\/content\/<\/code> tersebut (misalnya blog<\/code>, posts<\/code>, atau artikel<\/code>), namun pastikan nama folder tersebut sudah didaftarkan di file konfigurasi src\/content\/config.ts<\/code>.<\/blockquote>\n\n
Langkah 2: Membuat File Konten (.md<\/code> atau .mdx<\/code>)<\/h2>\n
Di dalam folder koleksi tersebut (misalnya folder blog<\/code>), buat file baru dengan huruf kecil semua dan gunakan tanda hubung (-<\/code>) sebagai pemisah kata, contohnya:cara-membuat-postingan-baru-benar-aman-astro.md<\/code><\/p>\n
Astro secara bawaan mendukung dua format file konten:<\/p>\n<\/pre>\n
    \n
  • Gunakan .md<\/code><\/strong> jika artikel Anda hanya berisi tulisan tutorial standar dan gambar pasif (sangat direkomendasikan karena lebih ringan).<\/li>\n
  • Gunakan .mdx<\/code><\/strong> jika di tengah-tengah artikel Anda ingin menyisipkan komponen interaktif buatan sendiri (seperti tombol interaktif, formulir, atau kalkulator).<\/li>\n<\/ul>\n\n
    Langkah 3: Mengisi Front Matter di Bagian Atas<\/h2>\n
    Di dalam proyek Astro, Anda wajib<\/strong> menggunakan Front Matter yang diapit oleh tanda hubung tiga (---<\/code>) dengan format YAML. Sebagai catatan penting, Astro tidak mendukung format tanda plus (+++<\/code> atau TOML). Jika Anda menggunakan format tersebut, proses build<\/em> di server akan mengalami kegagalan.<\/p>\n
    Berikut adalah contoh struktur Front Matter standar Astro yang lengkap, aman, dan sudah lolos validasi skema SEO:<\/p>\n
    ---\ntitle: 'Judul Artikel Astro Anda yang Menarik'\nslug: 'kustom-slug-pilihan-anda'\npubDate: 2026-09-08\ndraft: false\ndescription: 'Deskripsi pendek isi artikel untuk kebutuhan pencarian Google.'\ntags: ['Astro', 'Tutorial']\nauthor: 'Admin'\n---<\/code><\/pre>\n
    Aturan Ketat Front Matter Astro:<\/h3>\n
      \n
    1. Validasi Skema (Schema):<\/strong> Astro akan memverifikasi apakah data yang Anda masukkan (seperti title<\/code> atau pubDate<\/code>) sudah sesuai dengan aturan yang didaftarkan pada file src\/content\/config.ts<\/code>. Kesalahan pengetikan format atau tipe data akan menyebabkan situs gagal diperbarui.<\/li>\n
    2. Kustom slug<\/code>:<\/strong> Secara default, Astro membuat URL berdasarkan nama file .md<\/code> Anda. Dengan memasang kustom slug<\/code> di atas, Anda bisa memotong URL agar langsung berada di belakang domain utama Anda tanpa embel-embel nama file yang panjang.<\/li>\n<\/ol>\n\n
      Langkah 4: Pilihan Cara Membuat dan Menerbitkan Artikel<\/h2>\n
      Tulis isi artikel Anda tepat di bawah baris penutup Front Matter menggunakan simbol Markdown murni. Berbeda dengan Hugo, Astro secara bawaan sudah aman dalam merender konten teks, sehingga Anda tidak perlu mengaktifkan pengaturan keamanan tambahan seperti unsafe HTML<\/em>.<\/p>\n
      Untuk menerbitkan artikel, Anda bisa memilih salah satu dari dua metode berikut:<\/p>\n
      Metode A: Melalui Komputer Lokal (Local Development)<\/h3>\n
      Jika Anda terbiasa menulis di text editor lokal seperti VS Code, ikuti langkah berikut:<\/p>\n
        \n
      1. Simpan file artikel yang telah Anda buat di folder proyek lokal.<\/li>\n
      2. Buka terminal, lalu jalankan perintah Git standar berikut untuk mengunggah perubahan:\n
        git add .\ngit commit -m \"menambah artikel tutorial astro\"\ngit push origin main<\/code><\/pre>\n<\/li>\n<\/ol>\n
        Metode B: Langsung Melalui GitHub (Tanpa Buka Komputer Lokal)<\/h3>\n
        Jika Anda sedang bepergian atau ingin menulis cepat tanpa perlu membuka aplikasi editor di komputer, Anda bisa langsung membuatnya melalui situs web GitHub:<\/p>\n
          \n
        1. Buka repositori proyek Astro Anda di GitHub<\/strong>.<\/li>\n
        2. Masuk ke folder src\/content\/blog\/<\/code> (atau nama folder koleksi artikel Anda).<\/li>\n
        3. Klik tombol Add file<\/strong> di sudut kanan atas, lalu pilih Create new file<\/strong>.<\/li>\n
        4. Beri nama file pada kolom yang tersedia (misalnya: artikel-baru-github.md<\/code>).<\/li>\n
        5. Isi Front Matter beserta seluruh konten artikel Anda pada kolom teks yang disediakan.<\/li>\n
        6. Jika sudah selesai, klik tombol Commit changes<\/strong> di kanan atas.<\/li>\n
        7. Tulis pesan komit singkat, pastikan opsi terpilih adalah Commit directly to the main branch<\/em>, lalu klik Commit changes<\/strong>.<\/li>\n<\/ol>\n\n
          Kesimpulan<\/h3>\n
          Setelah Anda melakukan git push<\/code> dari komputer lokal atau melakukan Commit<\/em> langsung di GitHub, server Vercel atau penyedia hosting<\/em> Anda akan otomatis mendeteksi perubahan tersebut. Sistem akan langsung membaca koleksi konten Astro Anda, memproses kustom slug, melakukan build<\/em> ulang, dan memperbarui situs web aktif Anda dalam hitungan detik secara otomatis.<\/p>\n
          Membuat postingan baru di Astro memberikan rasa aman ekstra berkat fitur Content Collections<\/strong> yang menjaga agar struktur data artikel tidak berantakan. Cukup pastikan penempatan file berada di folder yang benar, isi Front Matter dengan teliti, dan biarkan sistem otomatisasi bekerja untuk Anda.<\/p>\n<\/div>\n
          <\/p>\n","protected":false},"excerpt":{"rendered":"
          Sekarang saatnya kita berkenalan dengan framework modern, yaitu Astro. Sebagai framework web modern yang mengutamakan kecepatan, Astro memiliki pendekatan yang […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-135","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/songlyrics.keponews.id\/music\/wp-json\/wp\/v2\/posts\/135","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/songlyrics.keponews.id\/music\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/songlyrics.keponews.id\/music\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/songlyrics.keponews.id\/music\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/songlyrics.keponews.id\/music\/wp-json\/wp\/v2\/comments?post=135"}],"version-history":[{"count":0,"href":"https:\/\/songlyrics.keponews.id\/music\/wp-json\/wp\/v2\/posts\/135\/revisions"}],"wp:attachment":[{"href":"https:\/\/songlyrics.keponews.id\/music\/wp-json\/wp\/v2\/media?parent=135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/songlyrics.keponews.id\/music\/wp-json\/wp\/v2\/categories?post=135"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/songlyrics.keponews.id\/music\/wp-json\/wp\/v2\/tags?post=135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}