Pembuatan Website Kampanye K3

Dalam artikel ini, saya akan berbagi pengalaman lengkap tentang bagaimana saya membangun website blog untuk kampanye K3 (Keselamatan dan Kesehatan Kerja) dari awal hingga siap untuk pengembangan. Setiap langkah yang saya ambil akan dijelaskan secara detail beserta perintah-perintah yang digunakan, sehingga Anda dapat mengikuti prosesnya atau bahkan mereplikasi proyek serupa.

K3 atau Keselamatan dan Kesehatan Kerja adalah upaya untuk menjamin keselamatan, kesehatan, dan keamanan karyawan di tempat kerja. Website blog kampanye K3 ini dibuat untuk meningkatkan kesadaran tentang pentingnya budaya keselamatan kerja di lingkungan industri dan organisasi.

Sebelum memulai, saya memastikan bahwa beberapa tools penting sudah terinstal di sistem saya:

• Git - untuk version control
• pnpm - package manager yang lebih efisien dibandingkan npm
• Node.js - runtime environment untuk menjalankan Astro
• Code Editor (VS Code) - untuk menulis dan mengedit kode

Langkah pertama yang saya lakukan adalah mencari tema blog yang minimalis dan clean. Saya memilih tema minimal blog dari LekoArts yang dibuat khusus untuk Astro framework. Tema ini menawarkan desain typography-driven dengan estetika minimal yang sempurna untuk blog kampanye.

Pertama, saya memeriksa direktori saat ini untuk memastikan saya berada di lokasi yang tepat:

ls

Kemudian saya melakukan clone repository tema ke dalam folder bernama k3klp8:

git clone https://github.com/LekoArts/astro-theme-minimal-blog.git k3klp8

Perintah ini akan mengunduh seluruh source code tema minimal blog dari GitHub dan menyimpannya dalam folder k3klp8. Nama folder ini saya pilih sebagai identitas proyek kampanye K3 saya.

Setelah proses cloning selesai, saya masuk ke dalam direktori proyek yang baru dibuat:

cd k3klp8

Untuk memastikan semua file sudah ter-download dengan benar, saya memeriksa isi direktori:

ls

Di dalam direktori ini, saya menemukan struktur file standar dari tema Astro, termasuk folder src, public, file konfigurasi astro.config.mjs, dan package.json yang berisi informasi tentang dependencies proyek.

Karena saya ingin menyimpan proyek ini di repository GitHub saya sendiri, saya perlu mengubah remote origin dari repository asli ke repository pribadi saya. Ini penting agar saya bisa melakukan push changes ke akun GitHub saya sendiri.

Pertama, saya menghapus remote origin yang mengarah ke repository LekoArts:

git remote remove origin

Kemudian saya menambahkan remote origin baru yang mengarah ke repository saya di GitHub:

git remote add origin https://github.com/Ftwrr/k3klp8.git

Pastikan Anda sudah membuat repository kosong di GitHub dengan nama yang sama sebelum melakukan langkah ini.

Setelah mengatur remote origin, saya melakukan push pertama ke repository GitHub saya:

git push -u origin main

Perintah git push -u origin main akan mengirim semua file dan commit history ke branch main di repository remote. Flag -u (upstream) membuat Git mengingat bahwa branch main lokal terhubung dengan origin/main, sehingga untuk push berikutnya saya cukup menjalankan git push tanpa parameter tambahan.

Sebelum bisa menjalankan website secara lokal, saya perlu menginstal semua package dependencies yang dibutuhkan oleh proyek. Saya menggunakan pnpm sebagai package manager karena lebih cepat dan efisien dalam penggunaan disk space dibandingkan npm.

pnpm install

Perintah ini akan membaca file package.json dan menginstal semua dependencies yang terdaftar. pnpm menggunakan sistem content-addressable storage yang menyimpan package dalam global store dan membuat hard links ke node_modules proyek, sehingga menghemat banyak ruang disk jika Anda memiliki banyak proyek.

Proses instalasi mungkin memakan waktu beberapa menit tergantung koneksi internet dan jumlah dependencies yang perlu diunduh.

Setelah instalasi selesai, saya menjalankan development server untuk melihat website secara lokal:

pnpm dev

Perintah ini akan menjalankan script dev yang terdefinisi di package.json, yang pada dasarnya menjalankan astro dev. Astro development server akan mulai berjalan dan secara otomatis membuka browser dengan alamat http://localhost:4321/.

Development server memiliki fitur hot-reload, yang berarti setiap perubahan yang saya lakukan pada file akan langsung terlihat di browser tanpa perlu refresh manual. Ini sangat membantu dalam proses development.

Untuk memastikan saya menggunakan versi Astro terbaru dengan fitur dan bug fixes terkini, saya menjalankan perintah upgrade:

pnpm dlx @astrojs/upgrade

Perintah pnpm dlx mirip dengan npx di npm - ia akan mendownload dan menjalankan package @astrojs/upgrade secara temporary tanpa menginstalnya secara permanen. Tool upgrade ini secara otomatis akan:

1. Memeriksa versi Astro saat ini
2. Mencari versi terbaru yang tersedia
3. Mengupdate package.json dengan versi terbaru
4. Mengupdate dependencies terkait jika diperlukan
5. Menjalankan instalasi ulang

Setelah proses upgrade selesai, saya menjalankan kembali development server:

pnpm dev

Untuk mulai melakukan kustomisasi dan menulis konten, saya membuka proyek di Visual Studio Code:

code .

Perintah ini akan meluncurkan VS Code dan membuka seluruh folder proyek. Dari sini saya bisa:

• Edit file konfigurasi Astro
• Membuat konten blog baru dalam format MDX
• Mengubah styling dan komponen
• Menambahkan fitur baru

Saya tetap menjalankan development server di terminal terpisah agar bisa melihat preview real-time dari perubahan yang saya buat.

Dengan development server yang tetap berjalan, saya mulai melakukan kustomisasi:

pnpm dev

Saya membiarkan perintah ini berjalan di terminal sambil melakukan berbagai penyesuaian:

• Mengubah konten: Edit file di folder src/content/ untuk menambahkan artikel tentang K3
• Kustomisasi tampilan: Modifikasi komponen di src/components/ dan styling CSS
• Konfigurasi situs: Update astro.config.mjs untuk mengatur metadata, SEO, dan plugin
• Menambahkan halaman: Membuat halaman baru seperti About, Contact, atau Panduan K3

Berikut adalah struktur file penting dalam proyek ini:

k3klp8/
├── src/
│   ├── content/        # File MDX untuk blog posts
│   ├── components/     # Komponen Astro/React
│   ├── layouts/        # Template layout
│   └── pages/          # Halaman website
├── public/             # Asset statis (gambar, font)
├── astro.config.mjs    # Konfigurasi Astro
├── package.json        # Dependencies dan scripts
└── tsconfig.json       # Konfigurasi TypeScript

Selama proses development, saya menerapkan beberapa best practices:

1. Version Control: Commit perubahan secara berkala dengan pesan yang jelas
2. Testing: Selalu test di development server sebelum push ke production
3. Backup: Push ke GitHub secara rutin sebagai backup
4. Documentation: Dokumentasikan setiap perubahan penting

Setelah setup selesai, saya mulai membuat konten tentang kampanye K3, seperti:

• Penanggulangan Kerja
• Sistem Manajemen K3
• Risiko Bahaya Fisik
• Sejarah dan Perundangan K3

Membangun website blog kampanye K3 dengan Astro ternyata cukup straightforward. Dengan menggunakan tema yang sudah ada dan melakukan kustomisasi sesuai kebutuhan, saya bisa membuat website profesional dalam waktu singkat.

Tools yang digunakan seperti pnpm membuat proses development lebih efisien, dan Astro framework memberikan performance yang excellent dengan static site generation. Yang paling penting, website ini sekarang siap digunakan untuk menyebarkan informasi penting tentang Keselamatan dan Kesehatan Kerja.

Semoga dokumentasi ini bermanfaat untuk Anda yang ingin memulai proyek serupa!

Tech Stack:

• Framework: Astro
• Package Manager: pnpm
• Version Control: Git & GitHub
• Code Editor: VS Code
• Theme: LekoArts Minimal Blog