{"id":138,"date":"2026-09-16T01:53:28","date_gmt":"2026-09-16T01:53:28","guid":{"rendered":"https:\/\/songlyrics.keponews.id\/music\/2026\/09\/16\/tutorial-lengkap-membuat-website-astro-gratis-berakhiran-vercel-app-dari-nol-khusus-pemula\/"},"modified":"2026-09-16T01:53:28","modified_gmt":"2026-09-16T01:53:28","slug":"tutorial-lengkap-membuat-website-astro-gratis-berakhiran-vercel-app-dari-nol-khusus-pemula","status":"publish","type":"post","link":"https:\/\/songlyrics.keponews.id\/music\/2026\/09\/16\/tutorial-lengkap-membuat-website-astro-gratis-berakhiran-vercel-app-dari-nol-khusus-pemula\/","title":{"rendered":"Tutorial Lengkap: Membuat Website Astro Gratis Berakhiran .vercel.app dari Nol (Khusus Pemula)"},"content":{"rendered":"<p><\/p>\n<div id=\"post-body-3713819307862190515\">\n<img decoding=\"async\" alt=\"Cara Buat Website Astro Gratis\" loading=\"lazy\" src=\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEihKGF1MI_j2QoxaPz-YL-E1vpHzW76ENL7jR0Sx2atWh37wvw9a85gGNCKENz24rKGLraWeDeNDwFkSOkyAK27-2OyHkxonlVqUi_V_Z677yGhKMuH8OpAMp9qjgIZbG2lPA8Kg3G8RHgwp4yhEw0bnQCNVXs6a9dBHzxxRvsKXnfqNH-ZdIskgK6Lo7fG\/s1280-rw\/cara-buat-website-astro-gratis.webp\"\/><\/p>\n<p>Membuat website modern dengan teknologi terbaru kini bisa dilakukan 100% gratis tanpa perlu mengeluarkan biaya sepeser pun. Tutorial ini dirancang khusus untuk Anda yang benar-benar awam, belum mengerti pemrograman, dan saat ini <strong>hanya modal akun Gmail saja<\/strong>.<\/p>\n<p>Kita akan membangun website menggunakan <strong>Astro<\/strong> (kerangka kerja website yang sangat cepat), menyimpan kodenya di <strong>GitHub<\/strong>, dan menerbitkannya secara online lewat <strong>Vercel<\/strong> sehingga Anda memiliki domain web resmi berakhiran <code>nama-website-anda.vercel.app<\/code>.<\/p>\n<hr\/>\n<h2>Langkah 1: Membuat Akun GitHub (Tempat Menyimpan Website)<\/h2>\n<p>GitHub adalah layanan online untuk menyimpan seluruh file website Anda dengan aman dan gratis.<\/p>\n<ol>\n<li>Buka browser Anda (Google Chrome, Edge, atau Safari) dan kunjungi situs <a href=\"https:\/\/github.com\" target=\"_blank\">GitHub<\/a>.<\/li>\n<li>Klik tombol <strong>Sign up<\/strong> di pojok kanan atas.<\/li>\n<li>Masukkan alamat <strong>Gmail<\/strong> Anda, lalu buat password yang kuat dan aman.<\/li>\n<li>Masukkan <em>username<\/em> unik pilihan Anda (misalnya: <code>budi-astroweb<\/code>). Catat <em>username<\/em> ini karena akan menjadi bagian dari identitas website Anda.<\/li>\n<li>Selesaikan verifikasi keamanan (biasanya berupa teka-teki gambar) untuk membuktikan Anda bukan robot.<\/li>\n<li>GitHub akan mengirimkan kode verifikasi 6 digit ke Gmail Anda. Buka kotak masuk Gmail, salin kode tersebut, dan masukkan ke kolom yang tersedia di GitHub.<\/li>\n<li>Jika muncul survei singkat, Anda bisa melewatinya dengan klik <strong>Skip personalization<\/strong> di bagian paling bawah. Akun GitHub Anda kini sudah aktif!<\/li>\n<\/ol>\n<h2>Langkah 2: Membuat Proyek Website Astro Lewat Template Instan<\/h2>\n<p>Sebagai orang awam, Anda tidak perlu mengetik kode pemrograman dari nol. Kita akan menggunakan fitur &#8220;Template instan&#8221; (Repository Template) yang sudah disediakan oleh komunitas Astro.<\/p>\n<ol>\n<li>Pastikan Anda masih dalam posisi sudah masuk (<em>login<\/em>) di akun GitHub Anda.<\/li>\n<li>Buka tab baru di browser Anda dan kunjungi halaman contoh template dasar Astro resmi ini: <a href=\"https:\/\/github.com\/withastro\/astro\/tree\/main\/examples\/minimal\" target=\"_blank\">Astro Minimal Starter<\/a>.<\/li>\n<li>Agar lebih mudah dan praktis tanpa instalasi aplikasi di komputer, kita akan menyalin template tersebut ke akun kita secara langsung dengan menekan tombol <strong>Use this template<\/strong> di pojok kanan atas halaman GitHub template tersebut, lalu pilih <strong>Create a new repository<\/strong>.<\/li>\n<li>Di halaman baru yang muncul:\n<ul>\n<li><strong>Repository name:<\/strong> Isi dengan nama website yang Anda inginkan (misalnya: <code>websiteku-astro<\/code>). Jangan gunakan spasi, gunakan tanda hubung <code>-<\/code> jika lebih dari satu kata.<\/li>\n<li><strong>Privacy:<\/strong> Pilih opsi <strong>Public<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<li>Klik tombol hijau bertuliskan <strong>Create repository<\/strong>.<\/li>\n<li>Tunggu beberapa detik. Sekarang, seluruh struktur file website Astro yang modern sudah tersalin penuh ke dalam akun GitHub Anda sendiri.<\/li>\n<\/ol>\n<h2>Langkah 3: Menghubungkan GitHub ke Vercel untuk Online-kan Website<\/h2>\n<p>Vercel adalah platform canggih yang berfungsi mengubah file-file di GitHub Anda menjadi website asli yang bisa diakses oleh semua orang di internet secara gratis.<\/p>\n<ol>\n<li>Buka tab baru di browser Anda dan kunjungi situs <a href=\"https:\/\/vercel.com\" target=\"_blank\">Vercel<\/a>.<\/li>\n<li>Klik tombol <strong>Sign Up<\/strong> di pojok kanan atas.<\/li>\n<li>Pada pilihan metode pendaftaran, pilih <strong>Continue with GitHub<\/strong>. Langkah ini sangat penting agar Vercel terhubung langsung dengan file website Anda.<\/li>\n<li>Akan muncul jendela konfirmasi dari GitHub yang meminta izin akses. Klik tombol hijau bertuliskan <strong>Authorize Vercel<\/strong>.<\/li>\n<li>Vercel akan meminta verifikasi nomor HP demi keamanan. Masukkan nomor HP aktif Anda, masukkan kode SMS yang dikirimkan, lalu klik <em>Verify<\/em>.<\/li>\n<li>Jika ditanya tipe akun, pilih <strong>Personal\/Hobby<\/strong> (karena opsi ini 100% gratis selamanya) dan isi nama Anda, lalu klik <em>Continue<\/em>.<\/li>\n<\/ol>\n<h2>Langkah 4: Proses Import dan Penerbitan (Deployment) Website<\/h2>\n<ol>\n<li>Setelah berhasil masuk ke Dashboard Vercel, klik tombol <strong>Add New&#8230;<\/strong> di pojok kanan atas, lalu pilih <strong>Project<\/strong>.<\/li>\n<li>Anda akan melihat daftar folder dari GitHub Anda. Cari nama folder website yang Anda buat di Langkah 2 tadi (contohnya: <code>websiteku-astro<\/code>).<\/li>\n<li>Klik tombol <strong>Import<\/strong> yang berada di sebelah kanan nama folder tersebut.<\/li>\n<li>Di halaman berikutnya, Anda akan melihat pengaturan proyek. <strong>Jangan mengubah pengaturan apa pun!<\/strong> Vercel sudah sangat pintar dan otomatis mendeteksi bahwa website Anda menggunakan teknologi Astro.<\/li>\n<li>Langsung saja klik tombol <strong>Deploy<\/strong> di bagian bawah.<\/li>\n<li>Proses <em>building<\/em> akan berjalan sekitar 1-2 menit. Sistem sedang merakit website Anda di latar belakang.<\/li>\n<li><strong>Selamat!<\/strong> Jika muncul animasi konfeti dan tulisan &#8220;Congratulations!&#8221;, website Anda sudah resmi online di internet.<\/li>\n<li>Klik gambar pratinjau website tersebut atau klik tombol <strong>Visit<\/strong> untuk membuka website baru Anda yang berakhiran <code>.vercel.app<\/code>.<\/li>\n<\/ol>\n<h2>Langkah 5: Cara Mengubah Isi Konten Website (Tanpa Aplikasi)<\/h2>\n<p>Jika Anda ingin mengganti tulisan di website baru Anda, Anda tidak perlu mengunduh aplikasi coding. Anda bisa langsung mengeditnya lewat browser di GitHub:<\/p>\n<ol>\n<li>Buka kembali akun <a href=\"https:\/\/github.com\" target=\"_blank\">GitHub<\/a> Anda dan masuk ke folder proyek website Anda (<code>websiteku-astro<\/code>).<\/li>\n<li>Masuk ke folder bernama <strong><code>src\/<\/code><\/strong>, lalu masuk lagi ke folder <strong><code>pages\/<\/code><\/strong>.<\/li>\n<li>Di dalam folder <code>pages<\/code>, Anda akan menemukan file bernama <strong><code>index.astro<\/code><\/strong>. Ini adalah file halaman utama website Anda. Klik file tersebut.<\/li>\n<li>Di pojok kanan atas tampilan file, klik ikon <strong>Pensil (Edit this file)<\/strong>.<\/li>\n<li>Anda akan melihat kode teks di sana. Cari teks bawaan (misalnya tulisan &#8220;Astro&#8221;) lalu ubah menjadi kalimat Anda sendiri (misalnya: &#8220;Selamat Datang di Website Pertama Saya!&#8221;).<\/li>\n<li>Jika sudah selesai mengedit, gulir layar ke paling bawah. Klik tombol hijau bertuliskan <strong>Commit changes<\/strong>.<\/li>\n<li><strong>Selesai!<\/strong> Anda tidak perlu membuka Vercel lagi. Vercel akan membaca perubahan di GitHub secara otomatis dalam waktu 30 detik, dan website <code>.vercel.app<\/code> Anda langsung terupdate secara otomatis saat Anda me-refresh halaman website Anda.<\/li>\n<\/ol>\n<hr\/>\n<h3>Tips Tambahan untuk Pemula:<\/h3>\n<ul>\n<li><strong>Ubah Nama Domain:<\/strong> Jika Anda kurang suka dengan nama domain bawaan dari Vercel, Anda bisa masuk ke Dashboard Vercel -&gt; Pilih Project Anda -&gt; Klik <strong>Settings<\/strong> -&gt; Klik <strong>Domains<\/strong>. Di sana Anda bisa mengedit teks domain <code>.vercel.app<\/code> sesuai keinginan Anda selama nama tersebut belum dipakai orang lain.<\/li>\n<li><strong>Gratis Selamanya:<\/strong> Selama penggunaan website Anda masih dalam tahap wajar (bukan untuk aplikasi perusahaan skala raksasa), layanan gabungan GitHub dan Vercel ini tidak akan menagih biaya apa pun kepada Anda.<\/li>\n<\/ul>\n<\/div>\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Membuat website modern dengan teknologi terbaru kini bisa dilakukan 100% gratis tanpa perlu mengeluarkan biaya sepeser pun. Tutorial ini dirancang [&hellip;]<\/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-138","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/songlyrics.keponews.id\/music\/wp-json\/wp\/v2\/posts\/138","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=138"}],"version-history":[{"count":0,"href":"https:\/\/songlyrics.keponews.id\/music\/wp-json\/wp\/v2\/posts\/138\/revisions"}],"wp:attachment":[{"href":"https:\/\/songlyrics.keponews.id\/music\/wp-json\/wp\/v2\/media?parent=138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/songlyrics.keponews.id\/music\/wp-json\/wp\/v2\/categories?post=138"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/songlyrics.keponews.id\/music\/wp-json\/wp\/v2\/tags?post=138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}