Part 1 - Membuat Web Blog Static Dengan Astro JS
Persiapan dan konfigurasi awal dalam membuat website blog dengan Static Site Generator (SSG) dari Astro
Salah satu keunggulan membangun website dengan astro adalah performanya yang sangat kencang. Di artikel tutorial ini saya akan membahas pembuatan web blog dengan Astro js dengan menggunakan fitur content collection, dan digenerate menjadi static site.
Beberapa fitur blog yang akan dibuat antara lain :
- Pagination
- Topik / Kategori
- Tags
Persiapan Kebutuhan
Pastikan beberapa hal di bawah ini telah terinstall di dalam komputer.
- NodeJS
- Code Editor
- Web Browser
Install Astro
Setelah semua kebutuhan siap, selanjutnya adalah inisialisasi project astro dengan command npm create astro@latest. Isi beberapa inputan yang diperlukan.
npm create astro@latest
Need to install the following packages:
[email protected]
Ok to proceed? (y) y
astro Launch sequence initiated.
dir Where should we create your new project?
./tutorial-blog
tmpl How would you like to start your new project?
Empty
ts Do you plan to write TypeScript?
Yes
use How strict should TypeScript be?
Strict
deps Install dependencies?
Yes
git Initialize a new git repository?
Yes
✔ Project initialized!
■ Template copied
■ TypeScript customized
■ Dependencies installed
■ Git initialized
next Liftoff confirmed. Explore your project!
Enter your project directory using cd ./tutorial-blog
Run npm run dev to start the dev server. CTRL+C to stop.
Add frameworks like react or tailwind using astro add.
Stuck? Join us at https://astro.build/chat
╭─────╮ Houston:
│ ◠ ◡ ◠ Good luck out there, astronaut! 🚀
╰─────╯
Berikut adalah penjelasan dari beberapa poin di atas.
dir Where should we create your new project?
./tutorial-blog
Membuat project dan directory dengan nama tutorial-blog
tmpl How would you like to start your new project?
Empty
Membuat project dengan template project kosong. Artinya, hanya ada file - file konfigurasi dasar dari astro, dan satu halaman astro.
ts Do you plan to write TypeScript?
Yes
Di dalam tutorial ini, saya akan menggunakan TypeScript, karena saat ini, TypeScript sudah menjadi standar industri.
use How strict should TypeScript be?
Strict
Mode TypeScript strict lebih dapat memastikan tidak boleh terjadi kesalahan tipe data dalam program yang dibuat. Dan mode ini direkomendasikan oleh astro.
deps Install dependencies?
Yes
Pilih yes agar dependensi awal yang diperlukan oleh astro diinstall sekalian dalam tahap pembuatan project ini.
git Initialize a new git repository?
Yes
Pilih yes agar perintah git init juga akan dijalankan otomatis pada tahap pembuatan project ini.
✔ Project initialized!
■ Template copied
■ TypeScript customized
■ Dependencies installed
■ Git initialized
next Liftoff confirmed. Explore your project!
Enter your project directory using cd ./tutorial-blog
Run npm run dev to start the dev server. CTRL+C to stop.
Add frameworks like react or tailwind using astro add.
Stuck? Join us at https://astro.build/chat
╭─────╮ Houston:
│ ◠ ◡ ◠ Good luck out there, astronaut! 🚀
╰─────╯
Project telah selesai dibuat dengan struktur kira - kira seperti di bawah ini, dan siap dikembangkan menjadi sebuah website blog.
├── astro.config.mjs
├── package.json
├── package-lock.json
├── public
│ └── favicon.svg
├── README.md
├── src
│ ├── env.d.ts
│ └── pages
│ └── index.astro
└── tsconfig.json
File Config Untuk Content Collection
Buatlah file dengan nama config.ts di dalam directory src/content. Pastikan nama file-nya adalah config.ts, dan nama directory-nya adalah content.
File ini digunakan untuk membuat konfigurasi dari koleksi konten (content collection) yang akan dibuat. Berikut adalah file config.ts yang dibuat untuk tutorial kali ini.
import { defineCollection, reference, z } from "astro:content";
/**
* membuat collection / koleksi data dengan nama blog
* dan koleksi data ini harus dimasukkan ke dalam
* directory `blog` (saat ini belum dibuat)
*/
const blog = defineCollection({
type: "content", // data blog ini akan berupa markdown / mdx
/**
* konten markdown harus memiliki data seperti di bawah ini.
* schema ini bisa langsung berupa object, atau berupa fungsi
* seperti di bawah ini. Jika sebagai fungsi, akan memiliki
* parameter dengan tipe data `SchemaContext`, dan di dalam
* `SchemaContext` tersebut ada sebuah fungsi `image` untuk
* memvalidasi data image
*/
schema: ({ image }) =>
z.object({
title: z.string(),
category: z.string(),
tags: z.array(z.string()),
image: z.object({
src: image(),
alt: z.string(),
}),
/**
* data author ini akan merujuk ke koleksi / collection
* authors yang ada di bawah. Data author ini harus
* berisi nama file yang ada di directory authors (saat ini belum dibuat)
*/
author: reference("authors"),
pubDate: z.date(),
}),
});
/**
* membuat collection / koleksi data dengan nama authors
* dan koleksi data ini harus dimasukkan ke dalam
* directory `authors` (saat ini belum dibuat)
*/
const authors = defineCollection({
type: "data", // data authors ini akan berupa json / yml
schema: z.object({
name: z.string(),
avatar: z.string(),
}),
});
// data harus diexport melalui variable `collections`
export const collections = { blog, authors };
Beberapa penjelasan sudah dituliskan di dalam komentar di atas. z di atas sebenarnya adalah library zod yang digunakan untuk validasi dan juga pembuatan schema koleksi konten (content collection).
More Topics