{"id":3472,"date":"2026-06-28T07:08:23","date_gmt":"2026-06-28T07:08:23","guid":{"rendered":"https:\/\/regarcomm.com\/?p=3472"},"modified":"2026-06-28T07:10:34","modified_gmt":"2026-06-28T07:10:34","slug":"prosedur-kerja-pembuatan-website-dengan-astro-js","status":"publish","type":"post","link":"https:\/\/regarcomm.com\/?p=3472","title":{"rendered":"Prosedur Kerja Pembuatan Website Dengan Astro JS"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3472\" class=\"elementor elementor-3472\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-948a7e8 e-flex e-con-boxed e-con e-parent\" data-id=\"948a7e8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d9306ad elementor-widget elementor-widget-text-editor\" data-id=\"d9306ad\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><img decoding=\"async\" onerror=\"this.src='https:\/\/regarcomm.com\/wp-content\/plugins\/replace-broken-images\/images\/default.jpg'\" src=\"https:\/\/www.hobon.id\/images\/artikel\/pemrograman\/Apa-Itu-Astro-js--697a10e80877cm.jpg\" alt=\"Apa Itu Astro.js?\" \/><\/p><p>## Mengenal Astro JS: Solusi Modern untuk Website Super Cepat<\/p><p>Dalam beberapa tahun terakhir, ekosistem pengembangan web bergeser ke arah arsitektur yang lebih efisien. Salah satu teknologi yang sedang naik daun dan menjadi primadona adalah **Astro JS**.<\/p><p>Astro adalah *framework* web modern yang dirancang khusus untuk membangun website kaya konten\u2014seperti blog, portofolio, *landing page*, hingga situs e-commerce\u2014dengan kecepatan luar biasa. Astro menggunakan pendekatan unik bernama **Island Architecture (Arsitektur Pulau)**. Konsep ini membuat website secara default bermuatan *zero-JavaScript*, di mana komponen interaktif (seperti keranjang belanja atau formulir) diisolasi menjadi &#8220;pulau-pulau&#8221; kecil yang dimuat hanya saat dibutuhkan. Hasilnya? Performa website yang sangat ringan dan skor SEO yang optimal.<\/p><p>Bagi Anda yang ingin beralih atau memulai proyek dengan *framework* ini, berikut adalah panduan lengkap mengenai apa saja yang perlu dipersiapkan serta prosedur kerja pengembangannya.<\/p><p>&#8212;<\/p><p>## Tahap 1: Persiapan (Prerequisites)<\/p><p>Sebelum mulai menulis kode, ada beberapa infrastruktur lokal yang perlu Anda siapkan di perangkat komputer Anda:<\/p><p>### 1. Lingkungan Pengembangan (Development Environment)<\/p><p>* **Node.js:** Astro membutuhkan Node.js versi terbaru (disarankan versi LTS v18.x atau v20.x ke atas). Node.js berfungsi untuk menjalankan *package manager* dan *local development server*.<br \/>* **Teks Editor \/ IDE:** **Visual Studio Code (VS Code)** adalah pilihan paling ideal. Pastikan Anda menginstal ekstensi resmi **Astro** di VS Code untuk mendapatkan fitur *syntax highlighting* dan *auto-complete* yang akurat.<br \/>* **Terminal \/ CLI:** Anda akan banyak berinteraksi dengan terminal (Command Prompt, PowerShell, atau WSL\/Terminal Linux) untuk mengeksekusi perintah.<\/p><p>### 2. Dasar Pengetahuan (Skillset)<\/p><p>Astro sangat ramah pengembang karena fleksibilitasnya. Namun, pastikan Anda sudah familier dengan:<\/p><p>* Dasar-dasar **HTML, CSS, dan JavaScript modern (ES6+)**.<br \/>* Konsep komponen (Astro mengizinkan Anda menggunakan komponen dari *framework* lain seperti React, Vue, Svelte, atau SolidJS di dalam satu proyek yang sama).<\/p><p>&#8212;<\/p><p>## Tahap 2: Prosedur Kerja Pembuatan Website<\/p><p>Proses pengembangan website dengan Astro JS dapat dibagi menjadi lima tahapan terstruktur:<\/p><p>### 1. Inisialisasi Proyek (Setup Project)<\/p><p>Buka terminal Anda, arahkan ke direktori tempat Anda ingin menyimpan proyek, lalu jalankan perintah otomatis berbasis CLI berikut:<\/p><p>&#8220;`bash<br \/>npm create astro@latest<\/p><p>&#8220;`<\/p><p>Perintah ini akan meluncurkan asisten penyetelan interaktif (*Houston*). Anda akan diminta untuk:<\/p><p>* Menentukan nama folder proyek.<br \/>* Memilih *template* awal (kosong atau menggunakan contoh bawaan).<br \/>* Menentukan apakah ingin menggunakan TypeScript atau JavaScript biasa.<br \/>* Menginstal *dependencies* secara otomatis.<\/p><p>Setelah selesai, masuk ke folder proyek dan jalankan *local server* untuk melihat hasilnya di browser:<\/p><p>&#8220;`bash<br \/>cd nama-proyek-anda<br \/>npm run dev<\/p><p>&#8220;`<\/p><p>Buka tautan `http:\/\/localhost:4321` di browser Anda.<\/p><p>### 2. Strukturisasi Folder dan Routing berbasis File<\/p><p>Astro menerapkan sistem **File-based Routing**. Artinya, setiap file `.astro` atau `.md` (Markdown) yang Anda letakkan di dalam folder `src\/pages\/` secara otomatis akan menjadi halaman URL di website Anda.<\/p><p>Struktur folder standar Astro yang perlu Anda pahami:<\/p><p>* **`src\/components\/`:** Tempat menyimpan potongan komponen UI yang dapat digunakan kembali (misalnya: `Button.astro`, `Card.astro`).<br \/>* **`src\/layouts\/`:** Tempat menyimpan struktur utama halaman web (meta tags, header, footer) agar tampilan antarhalaman konsisten.<br \/>* **`src\/pages\/`:** Berisi halaman utama website. File `index.astro` akan menjadi beranda (`\/`), sedangkan `about.astro` akan menjadi halaman `\/about`.<br \/>* **`public\/`:** Tempat menyimpan aset statis yang tidak perlu diproses oleh Astro, seperti favicon, robot.txt, atau gambar berskala besar.<\/p><p>### 3. Pengembangan Komponen dan Integrasi UI<\/p><p>Di sinilah keajaiban Astro terjadi. Anda bisa menulis kode HTML dan CSS langsung di dalam file `.astro`. File Astro dibagi menjadi dua bagian utama yang dipisahkan oleh tanda *code fence* (`&#8212;`):<\/p><p>&#8220;`astro<br \/>&#8212;<br \/>\/\/ Bagian Frontmatter (JavaScript\/TypeScript): <br \/>\/\/ Berjalan di server saat proses build, cocok untuk ambil data (fetch API)<br \/>const title = &#8220;Selamat Datang di Website Saya&#8221;;<br \/>&#8212;<\/p><p>&lt;main&gt;<br \/>&lt;h1&gt;{title}&lt;\/h1&gt;<br \/>&lt;p&gt;Ini adalah website berbasis Astro JS.&lt;\/p&gt;<br \/>&lt;\/main&gt;<\/p><p>&lt;style&gt;<br \/>\/* CSS terisolasi (Scoped CSS) hanya berlaku untuk komponen ini saja *\/<br \/>h1 { color: #4f46e5; }<br \/>&lt;\/style&gt;<\/p><p>&#8220;`<\/p><p>Jika Anda membutuhkan fitur interaktif yang kompleks dan ingin menggunakan komponen React, Anda cukup mengintegrasikannya lewat satu perintah terminal (misal: `npx astro add react`) dan mengaktifkannya menggunakan *client directives* seperti `&lt;Component client:load \/&gt;`.<\/p><p>### 4. Optimalisasi Konten dengan Content Collections<\/p><p>Jika website Anda memuat banyak artikel, dokumentasi, atau portofolio, manfaatkan fitur **Content Collections** yang terletak di folder `src\/content\/`. Fitur ini membantu memvalidasi skema data Markdown atau MDX Anda menggunakan pustaka Zod, memastikan struktur data tulisan Anda (seperti tanggal, author, dan tag) selalu konsisten dan bebas eror saat dirender.<\/p><p>### 5. Proses Build dan Deployment<\/p><p>Setelah website selesai dikembangkan di komputer lokal, langkah terakhir adalah memproduksinya menjadi file statis yang siap diunggah ke internet.<\/p><p>Jalankan perintah berikut di terminal:<\/p><p>&#8220;`bash<br \/>npm run build<\/p><p>&#8220;`<\/p><p>Astro akan melakukan kompilasi dan menghasilkan folder bernama **`dist\/`**. Folder inilah yang berisi HTML bersih, CSS, dan aset statis berkinerja tinggi.<\/p><p>Karena output utamanya berupa file statis (Jamstack), Anda dapat melakukan *deployment* website ini secara gratis dan mudah ke berbagai platform *edge hosting* modern seperti **Vercel, Netlify, Cloudflare Pages, GitHub Pages**, atau langsung diunggah ke VPS\/hosting tradisional Anda.<\/p><p>&#8212;<\/p><p>## Kesimpulan<\/p><p>Astro JS memisahkan kendala performa masa lalu dengan efisiensi masa depan. Dengan persiapan lingkungan yang tepat dan pemahaman prosedur kerja dari inisialisasi hingga *deploy*, Anda dapat membangun website modern yang tidak hanya memanjakan pengunjung dengan kecepatan muat instan, tetapi juga memberikan pengalaman pengembangan (*developer experience*) yang sangat menyenangkan. Selamat mencoba!<\/p><p>\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fe12f47 e-flex e-con-boxed e-con e-parent\" data-id=\"fe12f47\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-12fe4c6 elementor-widget elementor-widget-gallery\" data-id=\"12fe4c6\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;columns&quot;:3,&quot;lazyload&quot;:&quot;yes&quot;,&quot;gallery_layout&quot;:&quot;grid&quot;,&quot;columns_tablet&quot;:2,&quot;columns_mobile&quot;:1,&quot;gap&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:10,&quot;sizes&quot;:[]},&quot;gap_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:10,&quot;sizes&quot;:[]},&quot;gap_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:10,&quot;sizes&quot;:[]},&quot;link_to&quot;:&quot;file&quot;,&quot;aspect_ratio&quot;:&quot;3:2&quot;,&quot;overlay_background&quot;:&quot;yes&quot;,&quot;content_hover_animation&quot;:&quot;fade-in&quot;}\" data-widget_type=\"gallery.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-gallery__container\">\n\t\t\t\t\t\t\t<a class=\"e-gallery-item elementor-gallery-item elementor-animated-content\" href=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/06\/download-2026-06-27T130807.258.jpg\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"12fe4c6\" data-elementor-lightbox-title=\"download - 2026-06-27T130807.258\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MzQ1NSwidXJsIjoiaHR0cHM6XC9cL3JlZ2FyY29tbS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjZcLzA2XC9kb3dubG9hZC0yMDI2LTA2LTI3VDEzMDgwNy4yNTguanBnIiwic2xpZGVzaG93IjoiMTJmZTRjNiJ9\">\n\t\t\t\t\t<div class=\"e-gallery-image elementor-gallery-item__image\" data-thumbnail=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/06\/download-2026-06-27T130807.258.jpg\" data-width=\"168\" data-height=\"299\" aria-label=\"\" role=\"img\" ><\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-gallery-item__overlay\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t<a class=\"e-gallery-item elementor-gallery-item elementor-animated-content\" href=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/06\/download-2026-06-27T130754.242.jpg\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"12fe4c6\" data-elementor-lightbox-title=\"download - 2026-06-27T130754.242\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MzQ1NCwidXJsIjoiaHR0cHM6XC9cL3JlZ2FyY29tbS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjZcLzA2XC9kb3dubG9hZC0yMDI2LTA2LTI3VDEzMDc1NC4yNDIuanBnIiwic2xpZGVzaG93IjoiMTJmZTRjNiJ9\">\n\t\t\t\t\t<div class=\"e-gallery-image elementor-gallery-item__image\" data-thumbnail=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/06\/download-2026-06-27T130754.242.jpg\" data-width=\"275\" data-height=\"183\" aria-label=\"\" role=\"img\" ><\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-gallery-item__overlay\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t<a class=\"e-gallery-item elementor-gallery-item elementor-animated-content\" href=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/06\/download-2026-06-27T130745.224.jpg\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"12fe4c6\" data-elementor-lightbox-title=\"download - 2026-06-27T130745.224\" data-e-action-hash=\"#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6MzQ1MywidXJsIjoiaHR0cHM6XC9cL3JlZ2FyY29tbS5jb21cL3dwLWNvbnRlbnRcL3VwbG9hZHNcLzIwMjZcLzA2XC9kb3dubG9hZC0yMDI2LTA2LTI3VDEzMDc0NS4yMjQuanBnIiwic2xpZGVzaG93IjoiMTJmZTRjNiJ9\">\n\t\t\t\t\t<div class=\"e-gallery-image elementor-gallery-item__image\" data-thumbnail=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/06\/download-2026-06-27T130745.224.jpg\" data-width=\"168\" data-height=\"299\" aria-label=\"\" role=\"img\" ><\/div>\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-gallery-item__overlay\"><\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>## Mengenal Astro JS: Solusi Modern untuk Website Super Cepat Dalam beberapa tahun terakhir, ekosistem pengembangan web bergeser ke arah arsitektur yang lebih efisien. Salah satu teknologi yang sedang naik daun dan menjadi primadona adalah **Astro JS**. Astro adalah *framework* web modern yang dirancang khusus untuk membangun website kaya konten\u2014seperti blog, portofolio, *landing page*, hingga&hellip;&nbsp;<a href=\"https:\/\/regarcomm.com\/?p=3472\" rel=\"bookmark\"><span class=\"screen-reader-text\">Prosedur Kerja Pembuatan Website Dengan Astro JS<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":3455,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3472","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tak-berkategori"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Prosedur Kerja Pembuatan Website Dengan Astro JS - Regarcomm Development<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/regarcomm.com\/?p=3472\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Prosedur Kerja Pembuatan Website Dengan Astro JS - Regarcomm Development\" \/>\n<meta property=\"og:description\" content=\"## Mengenal Astro JS: Solusi Modern untuk Website Super Cepat Dalam beberapa tahun terakhir, ekosistem pengembangan web bergeser ke arah arsitektur yang lebih efisien. Salah satu teknologi yang sedang naik daun dan menjadi primadona adalah **Astro JS**. Astro adalah *framework* web modern yang dirancang khusus untuk membangun website kaya konten\u2014seperti blog, portofolio, *landing page*, hingga&hellip;&nbsp;Prosedur Kerja Pembuatan Website Dengan Astro JS\" \/>\n<meta property=\"og:url\" content=\"https:\/\/regarcomm.com\/?p=3472\" \/>\n<meta property=\"og:site_name\" content=\"Regarcomm Development\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/share\/1DXa1yP9Ao\/\" \/>\n<meta property=\"article:published_time\" content=\"2026-06-28T07:08:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-28T07:10:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/06\/download-2026-06-27T130807.258.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"168\" \/>\n\t<meta property=\"og:image:height\" content=\"299\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ewin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Erwinbinjai\" \/>\n<meta name=\"twitter:site\" content=\"@Erwinbinjai\" \/>\n<meta name=\"twitter:label1\" content=\"Ditulis oleh\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ewin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/regarcomm.com\/?p=3472#article\",\"isPartOf\":{\"@id\":\"https:\/\/regarcomm.com\/?p=3472\"},\"author\":{\"name\":\"Ewin\",\"@id\":\"https:\/\/regarcomm.com\/#\/schema\/person\/c2ef7a42a8b09547b2be7ea118e39912\"},\"headline\":\"Prosedur Kerja Pembuatan Website Dengan Astro JS\",\"datePublished\":\"2026-06-28T07:08:23+00:00\",\"dateModified\":\"2026-06-28T07:10:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/regarcomm.com\/?p=3472\"},\"wordCount\":840,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/regarcomm.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/regarcomm.com\/?p=3472#primaryimage\"},\"thumbnailUrl\":\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/06\/download-2026-06-27T130807.258.jpg\",\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/regarcomm.com\/?p=3472#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/regarcomm.com\/?p=3472\",\"url\":\"https:\/\/regarcomm.com\/?p=3472\",\"name\":\"Prosedur Kerja Pembuatan Website Dengan Astro JS - Regarcomm Development\",\"isPartOf\":{\"@id\":\"https:\/\/regarcomm.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/regarcomm.com\/?p=3472#primaryimage\"},\"image\":{\"@id\":\"https:\/\/regarcomm.com\/?p=3472#primaryimage\"},\"thumbnailUrl\":\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/06\/download-2026-06-27T130807.258.jpg\",\"datePublished\":\"2026-06-28T07:08:23+00:00\",\"dateModified\":\"2026-06-28T07:10:34+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/regarcomm.com\/?p=3472#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/regarcomm.com\/?p=3472\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/regarcomm.com\/?p=3472#primaryimage\",\"url\":\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/06\/download-2026-06-27T130807.258.jpg\",\"contentUrl\":\"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/06\/download-2026-06-27T130807.258.jpg\",\"width\":168,\"height\":299},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/regarcomm.com\/?p=3472#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Beranda\",\"item\":\"https:\/\/regarcomm.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Prosedur Kerja Pembuatan Website Dengan Astro JS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/regarcomm.com\/#website\",\"url\":\"https:\/\/regarcomm.com\/\",\"name\":\"Regarcomm Development\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/regarcomm.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/regarcomm.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/regarcomm.com\/#organization\",\"name\":\"Regarcomm Development\",\"url\":\"https:\/\/regarcomm.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/regarcomm.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/regarcomm.com\/wp-content\/uploads\/2025\/06\/photo_2025-05-13_10-59-37.jpg\",\"contentUrl\":\"http:\/\/regarcomm.com\/wp-content\/uploads\/2025\/06\/photo_2025-05-13_10-59-37.jpg\",\"width\":1280,\"height\":1073,\"caption\":\"Regarcomm Development\"},\"image\":{\"@id\":\"https:\/\/regarcomm.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/share\/1DXa1yP9Ao\/\",\"https:\/\/x.com\/Erwinbinjai\",\"https:\/\/instagram.com\/inerwinsyah\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/regarcomm.com\/#\/schema\/person\/c2ef7a42a8b09547b2be7ea118e39912\",\"name\":\"Ewin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/regarcomm.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6a415ad1031f294d556ac574983fae046c2c491e306ae6b51eea2b30a67238a7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6a415ad1031f294d556ac574983fae046c2c491e306ae6b51eea2b30a67238a7?s=96&d=mm&r=g\",\"caption\":\"Ewin\"},\"sameAs\":[\"http:\/\/localhost\/regarcomm\"],\"url\":\"https:\/\/regarcomm.com\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Prosedur Kerja Pembuatan Website Dengan Astro JS - Regarcomm Development","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/regarcomm.com\/?p=3472","og_locale":"id_ID","og_type":"article","og_title":"Prosedur Kerja Pembuatan Website Dengan Astro JS - Regarcomm Development","og_description":"## Mengenal Astro JS: Solusi Modern untuk Website Super Cepat Dalam beberapa tahun terakhir, ekosistem pengembangan web bergeser ke arah arsitektur yang lebih efisien. Salah satu teknologi yang sedang naik daun dan menjadi primadona adalah **Astro JS**. Astro adalah *framework* web modern yang dirancang khusus untuk membangun website kaya konten\u2014seperti blog, portofolio, *landing page*, hingga&hellip;&nbsp;Prosedur Kerja Pembuatan Website Dengan Astro JS","og_url":"https:\/\/regarcomm.com\/?p=3472","og_site_name":"Regarcomm Development","article_publisher":"https:\/\/www.facebook.com\/share\/1DXa1yP9Ao\/","article_published_time":"2026-06-28T07:08:23+00:00","article_modified_time":"2026-06-28T07:10:34+00:00","og_image":[{"width":168,"height":299,"url":"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/06\/download-2026-06-27T130807.258.jpg","type":"image\/jpeg"}],"author":"Ewin","twitter_card":"summary_large_image","twitter_creator":"@Erwinbinjai","twitter_site":"@Erwinbinjai","twitter_misc":{"Ditulis oleh":"Ewin","Estimasi waktu membaca":"5 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/regarcomm.com\/?p=3472#article","isPartOf":{"@id":"https:\/\/regarcomm.com\/?p=3472"},"author":{"name":"Ewin","@id":"https:\/\/regarcomm.com\/#\/schema\/person\/c2ef7a42a8b09547b2be7ea118e39912"},"headline":"Prosedur Kerja Pembuatan Website Dengan Astro JS","datePublished":"2026-06-28T07:08:23+00:00","dateModified":"2026-06-28T07:10:34+00:00","mainEntityOfPage":{"@id":"https:\/\/regarcomm.com\/?p=3472"},"wordCount":840,"commentCount":0,"publisher":{"@id":"https:\/\/regarcomm.com\/#organization"},"image":{"@id":"https:\/\/regarcomm.com\/?p=3472#primaryimage"},"thumbnailUrl":"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/06\/download-2026-06-27T130807.258.jpg","inLanguage":"id","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/regarcomm.com\/?p=3472#respond"]}]},{"@type":"WebPage","@id":"https:\/\/regarcomm.com\/?p=3472","url":"https:\/\/regarcomm.com\/?p=3472","name":"Prosedur Kerja Pembuatan Website Dengan Astro JS - Regarcomm Development","isPartOf":{"@id":"https:\/\/regarcomm.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/regarcomm.com\/?p=3472#primaryimage"},"image":{"@id":"https:\/\/regarcomm.com\/?p=3472#primaryimage"},"thumbnailUrl":"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/06\/download-2026-06-27T130807.258.jpg","datePublished":"2026-06-28T07:08:23+00:00","dateModified":"2026-06-28T07:10:34+00:00","breadcrumb":{"@id":"https:\/\/regarcomm.com\/?p=3472#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/regarcomm.com\/?p=3472"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/regarcomm.com\/?p=3472#primaryimage","url":"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/06\/download-2026-06-27T130807.258.jpg","contentUrl":"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/06\/download-2026-06-27T130807.258.jpg","width":168,"height":299},{"@type":"BreadcrumbList","@id":"https:\/\/regarcomm.com\/?p=3472#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Beranda","item":"https:\/\/regarcomm.com\/"},{"@type":"ListItem","position":2,"name":"Prosedur Kerja Pembuatan Website Dengan Astro JS"}]},{"@type":"WebSite","@id":"https:\/\/regarcomm.com\/#website","url":"https:\/\/regarcomm.com\/","name":"Regarcomm Development","description":"","publisher":{"@id":"https:\/\/regarcomm.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/regarcomm.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/regarcomm.com\/#organization","name":"Regarcomm Development","url":"https:\/\/regarcomm.com\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/regarcomm.com\/#\/schema\/logo\/image\/","url":"http:\/\/regarcomm.com\/wp-content\/uploads\/2025\/06\/photo_2025-05-13_10-59-37.jpg","contentUrl":"http:\/\/regarcomm.com\/wp-content\/uploads\/2025\/06\/photo_2025-05-13_10-59-37.jpg","width":1280,"height":1073,"caption":"Regarcomm Development"},"image":{"@id":"https:\/\/regarcomm.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/share\/1DXa1yP9Ao\/","https:\/\/x.com\/Erwinbinjai","https:\/\/instagram.com\/inerwinsyah"]},{"@type":"Person","@id":"https:\/\/regarcomm.com\/#\/schema\/person\/c2ef7a42a8b09547b2be7ea118e39912","name":"Ewin","image":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/regarcomm.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6a415ad1031f294d556ac574983fae046c2c491e306ae6b51eea2b30a67238a7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6a415ad1031f294d556ac574983fae046c2c491e306ae6b51eea2b30a67238a7?s=96&d=mm&r=g","caption":"Ewin"},"sameAs":["http:\/\/localhost\/regarcomm"],"url":"https:\/\/regarcomm.com\/?author=1"}]}},"jetpack_featured_media_url":"https:\/\/regarcomm.com\/wp-content\/uploads\/2026\/06\/download-2026-06-27T130807.258.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/regarcomm.com\/index.php?rest_route=\/wp\/v2\/posts\/3472","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/regarcomm.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/regarcomm.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/regarcomm.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/regarcomm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3472"}],"version-history":[{"count":4,"href":"https:\/\/regarcomm.com\/index.php?rest_route=\/wp\/v2\/posts\/3472\/revisions"}],"predecessor-version":[{"id":3476,"href":"https:\/\/regarcomm.com\/index.php?rest_route=\/wp\/v2\/posts\/3472\/revisions\/3476"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/regarcomm.com\/index.php?rest_route=\/wp\/v2\/media\/3455"}],"wp:attachment":[{"href":"https:\/\/regarcomm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3472"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/regarcomm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3472"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/regarcomm.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3472"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}