{"id":714,"date":"2025-07-18T06:44:03","date_gmt":"2025-07-18T06:44:03","guid":{"rendered":"https:\/\/serkomi.com\/blog\/?p=714"},"modified":"2025-07-18T06:44:03","modified_gmt":"2025-07-18T06:44:03","slug":"cara-membuat-website-modern-dengan-astro-js-untuk-pemula","status":"publish","type":"post","link":"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/","title":{"rendered":"Cara Membuat Website Modern dengan Astro.js untuk Pemula"},"content":{"rendered":"\n<p>Dalam era modern yang menuntut kecepatan dan efisiensi, pengembangan website pun ikut bertransformasi. <\/p>\n\n\n\n<p>Salah satu framework terbaru yang sedang naik daun di kalangan developer adalah Astro.js. Artikel ini akan membahas pengertian Astro.js, cara membuat website dengan Astro.js, manfaat penggunaannya, dan penutup yang menginspirasi.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_76 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/#Pengertian_Astrojs\" >Pengertian Astro.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/#Cara_Membuat_Website_dengan_Astrojs\" >Cara Membuat Website dengan Astro.js<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/#1_Persiapan_Lingkungan\" >1. Persiapan Lingkungan<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/#2_Instalasi_dan_Struktur_Proyek\" >2. Instalasi dan Struktur Proyek<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/#3_Membuat_Halaman_Baru\" >3. Membuat Halaman Baru<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/#4_Menambahkan_Komponen\" >4. Menambahkan Komponen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/#5_Build_dan_Deploy\" >5. Build dan Deploy<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/#Manfaat_Astrojs\" >Manfaat Astro.js<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/#1_Performa_Cepat\" >1. Performa Cepat<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/#2_SEO_Friendly\" >2. SEO Friendly<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/#3_Ringan_dan_Modular\" >3. Ringan dan Modular<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/#4_Integrasi_Framework\" >4. Integrasi Framework<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/#5_Mudah_Dipelajari\" >5. Mudah Dipelajari<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/#Penutup\" >Penutup<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Pengertian_Astrojs\"><\/span>Pengertian Astro.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Astro.js adalah framework modern untuk membangun website statis dan dinamis yang fokus pada performa tinggi dengan pengiriman konten secepat mungkin ke pengguna. <\/p>\n\n\n\n<p>Keunggulan utamanya adalah kemampuan rendering konten statis yang hanya mengirim HTML ke browser tanpa JavaScript tambahan, kecuali yang dibutuhkan.<\/p>\n\n\n\n<p>Astro mendukung integrasi berbagai framework seperti React, Vue, Svelte, hingga SolidJS dalam satu proyek. Dengan pendekatan &#8220;island architecture&#8221;, Astro memungkinkan pemuatan JavaScript hanya pada bagian tertentu halaman, membuat performa situs jadi jauh lebih cepat.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-text-align-center\"><em><strong>Baca Juga: <a href=\"https:\/\/serkomi.com\/blog\/sertifikasi-web-developer\/\">Sertifikasi Web Developer<\/a><\/strong><\/em><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cara_Membuat_Website_dengan_Astrojs\"><\/span>Cara Membuat Website dengan Astro.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Ikuti panduan membuat website dengan astro.js dengan mudah dan cepat:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Persiapan_Lingkungan\"><\/span>1. Persiapan Lingkungan<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Pastikan Anda sudah menginstal <strong>Node.js<\/strong> dan <strong>npm<\/strong> di sistem Anda. Buka terminal, lalu jalankan perintah:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm create astro@latest\n<\/code><\/pre>\n\n\n\n<p>Pilih template sesuai kebutuhan, misalnya &#8220;blog&#8221;, &#8220;minimal&#8221;, atau &#8220;documentation&#8221;.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Instalasi_dan_Struktur_Proyek\"><\/span>2. Instalasi dan Struktur Proyek<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Setelah setup awal selesai, masuk ke folder proyek dan jalankan:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install\nnpm run dev\n<\/code><\/pre>\n\n\n\n<p>Folder utama akan berisi direktori seperti:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>src\/pages\/<\/code> untuk halaman<\/li>\n\n\n\n<li><code>src\/components\/<\/code> untuk komponen UI<\/li>\n\n\n\n<li><code>public\/<\/code> untuk file statis seperti gambar<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Membuat_Halaman_Baru\"><\/span>3. Membuat Halaman Baru<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Untuk membuat halaman, cukup tambahkan file <code>.astro<\/code> baru ke dalam folder <code>pages<\/code>. Misalnya, <code>about.astro<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>---\n---\n&lt;html&gt;\n  &lt;head&gt;&lt;title&gt;About&lt;\/title&gt;&lt;\/head&gt;\n  &lt;body&gt;\n    &lt;h1&gt;Halaman Tentang Kami&lt;\/h1&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Menambahkan_Komponen\"><\/span>4. Menambahkan Komponen<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Anda bisa menggunakan komponen React\/Vue\/Svelte seperti ini:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>---\nimport MyComponent from '..\/components\/MyComponent.jsx';\n---\n&lt;MyComponent \/&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_Build_dan_Deploy\"><\/span>5. Build dan Deploy<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Setelah selesai mengembangkan, build website Anda dengan:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm run build\n<\/code><\/pre>\n\n\n\n<p>Astro akan menghasilkan folder <code>dist\/<\/code> siap deploy ke Netlify, Vercel, atau hosting lainnya.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Manfaat_Astrojs\"><\/span>Manfaat Astro.js<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Simak beberapa Manfaat Astro.Js dibawah ini:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Performa_Cepat\"><\/span>1. Performa Cepat<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Karena mengirim HTML statis, website dengan Astro sangat cepat dimuat.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_SEO_Friendly\"><\/span>2. SEO Friendly<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Struktur HTML yang jelas memudahkan mesin pencari dalam mengindeks konten.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Ringan_dan_Modular\"><\/span>3. Ringan dan Modular<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Hanya JavaScript yang dibutuhkan saja yang dikirim ke browser, menghemat bandwidth.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Integrasi_Framework\"><\/span>4. Integrasi Framework<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Developer bisa menggunakan kombinasi React, Vue, atau Svelte tanpa konflik dalam satu proyek.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_Mudah_Dipelajari\"><\/span>5. Mudah Dipelajari<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Sintaks Astro yang menyerupai HTML membuatnya ramah bagi pemula.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Penutup\"><\/span>Penutup<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Astro.js adalah solusi ideal bagi pengembang yang ingin membangun website dengan kecepatan tinggi, struktur modular, dan ramah SEO. <\/p>\n\n\n\n<p>Dengan dokumentasi lengkap dan komunitas yang berkembang pesat, tidak ada alasan untuk tidak mencoba Astro pada proyek Anda berikutnya. Mulailah dari proyek kecil dan rasakan keunggulan performanya!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dalam era modern yang menuntut kecepatan dan efisiensi, pengembangan website pun ikut bertransformasi. Salah satu framework terbaru yang sedang naik daun di kalangan developer adalah Astro.js. Artikel ini akan membahas pengertian Astro.js, cara membuat website dengan Astro.js, manfaat penggunaannya, dan penutup yang menginspirasi. Pengertian Astro.js Astro.js adalah framework modern untuk membangun website statis dan dinamis [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":715,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[111],"tags":[258,259,260],"class_list":["post-714","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-developer","tag-astro-js-tutorial","tag-framework-website-cepat","tag-static-site-generator"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Cara Membuat Website Modern dengan Astro.js untuk Pemula - serkomi<\/title>\n<meta name=\"description\" content=\"Pelajari cara membuat website cepat dan ringan dengan Astro.js. Cocok untuk pemula dan developer web modern.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cara Membuat Website Modern dengan Astro.js untuk Pemula - serkomi\" \/>\n<meta property=\"og:description\" content=\"Pelajari cara membuat website cepat dan ringan dengan Astro.js. Cocok untuk pemula dan developer web modern.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/\" \/>\n<meta property=\"og:site_name\" content=\"serkomi\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-18T06:44:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/serkomi.com\/blog\/wp-content\/uploads\/2025\/07\/Serkomi-30.png\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/\",\"url\":\"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/\",\"name\":\"Cara Membuat Website Modern dengan Astro.js untuk Pemula - serkomi\",\"isPartOf\":{\"@id\":\"https:\/\/serkomi.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/serkomi.com\/blog\/wp-content\/uploads\/2025\/07\/Serkomi-30.png\",\"datePublished\":\"2025-07-18T06:44:03+00:00\",\"author\":{\"@id\":\"https:\/\/serkomi.com\/blog\/#\/schema\/person\/89f58e37c2c422c73d102097121e837f\"},\"description\":\"Pelajari cara membuat website cepat dan ringan dengan Astro.js. Cocok untuk pemula dan developer web modern.\",\"breadcrumb\":{\"@id\":\"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/#primaryimage\",\"url\":\"https:\/\/serkomi.com\/blog\/wp-content\/uploads\/2025\/07\/Serkomi-30.png\",\"contentUrl\":\"https:\/\/serkomi.com\/blog\/wp-content\/uploads\/2025\/07\/Serkomi-30.png\",\"width\":600,\"height\":400,\"caption\":\"Cara Membuat Website Modern dengan Astro.js untuk Pemula\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/serkomi.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cara Membuat Website Modern dengan Astro.js untuk Pemula\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/serkomi.com\/blog\/#website\",\"url\":\"https:\/\/serkomi.com\/blog\/\",\"name\":\"serkomi\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/serkomi.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/serkomi.com\/blog\/#\/schema\/person\/89f58e37c2c422c73d102097121e837f\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/serkomi.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c3dcf6ac8dbcf6d7ff9d94e77a3d4678358491d700ca4e9e22887fb52fcd0009?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c3dcf6ac8dbcf6d7ff9d94e77a3d4678358491d700ca4e9e22887fb52fcd0009?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/serkomi.com\"],\"url\":\"https:\/\/serkomi.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cara Membuat Website Modern dengan Astro.js untuk Pemula - serkomi","description":"Pelajari cara membuat website cepat dan ringan dengan Astro.js. Cocok untuk pemula dan developer web modern.","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:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/","og_locale":"en_US","og_type":"article","og_title":"Cara Membuat Website Modern dengan Astro.js untuk Pemula - serkomi","og_description":"Pelajari cara membuat website cepat dan ringan dengan Astro.js. Cocok untuk pemula dan developer web modern.","og_url":"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/","og_site_name":"serkomi","article_published_time":"2025-07-18T06:44:03+00:00","og_image":[{"width":600,"height":400,"url":"https:\/\/serkomi.com\/blog\/wp-content\/uploads\/2025\/07\/Serkomi-30.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/","url":"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/","name":"Cara Membuat Website Modern dengan Astro.js untuk Pemula - serkomi","isPartOf":{"@id":"https:\/\/serkomi.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/#primaryimage"},"image":{"@id":"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/#primaryimage"},"thumbnailUrl":"https:\/\/serkomi.com\/blog\/wp-content\/uploads\/2025\/07\/Serkomi-30.png","datePublished":"2025-07-18T06:44:03+00:00","author":{"@id":"https:\/\/serkomi.com\/blog\/#\/schema\/person\/89f58e37c2c422c73d102097121e837f"},"description":"Pelajari cara membuat website cepat dan ringan dengan Astro.js. Cocok untuk pemula dan developer web modern.","breadcrumb":{"@id":"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/#primaryimage","url":"https:\/\/serkomi.com\/blog\/wp-content\/uploads\/2025\/07\/Serkomi-30.png","contentUrl":"https:\/\/serkomi.com\/blog\/wp-content\/uploads\/2025\/07\/Serkomi-30.png","width":600,"height":400,"caption":"Cara Membuat Website Modern dengan Astro.js untuk Pemula"},{"@type":"BreadcrumbList","@id":"https:\/\/serkomi.com\/blog\/cara-membuat-website-modern-dengan-astro-js-untuk-pemula\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/serkomi.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Cara Membuat Website Modern dengan Astro.js untuk Pemula"}]},{"@type":"WebSite","@id":"https:\/\/serkomi.com\/blog\/#website","url":"https:\/\/serkomi.com\/blog\/","name":"serkomi","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/serkomi.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/serkomi.com\/blog\/#\/schema\/person\/89f58e37c2c422c73d102097121e837f","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/serkomi.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c3dcf6ac8dbcf6d7ff9d94e77a3d4678358491d700ca4e9e22887fb52fcd0009?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c3dcf6ac8dbcf6d7ff9d94e77a3d4678358491d700ca4e9e22887fb52fcd0009?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/serkomi.com"],"url":"https:\/\/serkomi.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/posts\/714","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/comments?post=714"}],"version-history":[{"count":1,"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/posts\/714\/revisions"}],"predecessor-version":[{"id":716,"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/posts\/714\/revisions\/716"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/media\/715"}],"wp:attachment":[{"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/media?parent=714"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/categories?post=714"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/serkomi.com\/blog\/wp-json\/wp\/v2\/tags?post=714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}