Astro with Tailwind

Buat Blog Astro pertama Anda

Dalam tutorial ini, Anda akan mempelajari fitur-fitur utama Astro dengan membangun blog yang berfungsi penuh, dari nol hingga peluncuran! 🚀

Buka proyek anda di VS Code

Buka VS Code. Anda akan diminta untuk membuka folder. Pilih folder yang Anda buat selama wizard pengaturan.

Jika ini adalah pertama kalinya Anda membuka proyek Astro, Anda akan melihat pemberitahuan yang menanyakan apakah Anda ingin memasang ekstensi yang direkomendasikan. Klik untuk melihat ekstensi yang direkomendasikan, dan pilih ekstensi dukungan bahasa Astro. Ini akan memberikan penyorotan sintaksis dan pelengkapan otomatis untuk kode Astro Anda.

Jalankan astro di dev mode

Untuk melihat pratinjau file proyek Anda sebagai situs web saat Anda bekerja, Anda memerlukan Astro untuk berjalan dalam mode pengembangan (dev).

buka Terminal dan ketik perintah :

# create a new project with npm
npm create astro@latest

# create a new project with pnpm
pnpm create astro@latest

# create a new project with yarn
yarn create astro

Sekarang Anda akan melihat konfirmasi di terminal bahwa Astro berjalan dalam mode dev. 🚀

Lihat pratinjau situs web Anda

File proyek Anda berisi semua kode yang diperlukan untuk menampilkan situs web Astro, namun browser bertanggung jawab untuk menampilkan kode Anda sebagai halaman web.

Klik tautan localhost di jendela terminal Anda untuk melihat pratinjau langsung situs web Astro baru Anda!

(Astro menggunakan http://localhost:4321 secara default jika port 4321 tersedia.)

Anda dapat menghentikan server dev kapan saja dan kembali ke command prompt dengan mengetikkan Ctrl + C di terminal.

Terkadang server dev akan berhenti dengan sendirinya saat Anda sedang bekerja. Jika pratinjau langsung Anda berhenti berfungsi, kembali ke terminal dan mulai ulang server dev dengan mengetik:

    npm run dev

Edit halaman beranda Anda

Di editor kode Anda, navigasikan di panel file Explorer ke src/pages/index.astro dan klik untuk membuka konten file di tab yang dapat diedit.

Isi file index.astro Anda akan terlihat seperti ini:

Edit konten halaman Anda

Ketik editor untuk mengubah teks judul di halaman Anda dan simpan perubahannya

Periksa pratinjau browser dan Anda akan melihat konten halaman Anda diperbarui ke teks baru.

Selamat! Anda sekarang adalah pengembang Astro!

Sisa dari unit ini akan menyiapkan Anda untuk sukses dengan kontrol versi dan situs web terbitan yang dapat Anda pamerkan.

Menambahkan dependensi

Anda dapat menambahkan dependensi lain di Astro,misalkan alpinejs ,react ,Vue ,svelte ,dan lainya.

Install

Misalkan kita akan menambahkan alpinejs ke project,anda dpt mengetikkan perintah di terminal:

npx astro add alpinejs

pnpm astro add alpinejs

yarn astro add alpinejs

jika mendapat masalah dengan cara ini,anda dpt melakukanya dengan manual install

Manual Install

Pertama,install @astrojs/alpinejs

npm install @astrojs/alpinejs

pnpm add @astrojs/alpinejs

yarn add @astrojs/alpinejs

Jika anda menemukan keterangan Cannot find package ‘alpinejs’,Anda harus melakukan:

npm install alpinejs @types/alpinejs

pnpm add alpinejs @types/alpinejs

yarn add alpinejs @types/alpinejs

Lalu,Terapkan pengaturan ke file astro.config.* menggunakan properti integrations

import { defineConfig } from 'astro/config';
import alpine from '@astrojs/alpinejs';

export default defineConfig({
  // ...
  integrations: [alpine()],
});

Simpan repositori Anda secara online

Tutorial ini akan menggunakan GitHub untuk menyimpan repositori kami dan terhubung ke host web. Anda dipersilakan untuk menggunakan penyedia git online pilihan Anda.

Buat repositori di GitHub

Meskipun ada beberapa cara untuk menyimpan kode lokal Anda di GitHub, tutorial ini akan memandu Anda melalui metode yang tidak memerlukan penggunaan git di baris perintah.

Commit kode lokal Anda ke GitHub

Di bagian terakhir, Anda membuat perubahan pada konten halaman Anda. Ini berarti file proyek Anda telah berubah, dan VS Code akan menampilkan nomor di atas ikon menu “Source”. Tab sumber ini adalah tempat Anda akan memperbarui file Anda secara rutin di GitHub.

1 Klik tab Kontrol Sumber di VS Code Anda untuk melihat daftar file yang telah diubah. Jika Anda melihat pesan bahwa Anda perlu menginstal git, ikuti instruksi yang diberikan, lalu muat ulang VS Code.

2 Klik menu ••• “3 titik” di atas pesan komit dan pilih Remote > Add Remote

3 Pilih Add Remote from Github. Jika perlu, ikuti langkah autentikasi apa pun lalu kembali ke VS Code dan ulangi tindakan ini.

4 Anda akan melihat daftar semua repositori Anda di GitHub. Pilih yang Anda buat untuk proyek ini. Jika Anda tidak melihat proyek Anda, tempelkan langsung URL GitHub-nya. Anda mungkin juga diminta memberi nama lokal pada repositori ini. Anda dapat memilih nama apa pun yang Anda suka.

5 Di bagian atas panel menu, akan ada tempat untuk memasukkan pesan komit (deskripsi perubahan file Anda). Ketik initial commit dan tekan tombol Commit untuk melakukan perubahan ini.

6 Anda mungkin melihat pesan yang memberitahukan bahwa Anda tidak memiliki komitmen yang “staged”, dan menanyakan apakah Anda ingin melakukan pentahapan tersebut. Klik Always dan lanjutkan.

7 Terakhir, daftar file yang diubah harus diganti dengan tombol Publish. Klik ini untuk mengirimkan perubahan yang Anda lakukan ke GitHub.

Lihat proyek Anda di GitHub

Untuk memverifikasi bahwa proyek Anda berhasil disimpan di GitHub, kunjungi GitHub.com dan lihat di akun Anda untuk daftar repositori Anda. Pilih yang baru yang Anda buat, dan verifikasi bahwa itu berisi file proyek Astro Anda.