Sebelum "Terbang": Siapin Dulu Proyek Mahir Company Biar Siap Go Live!

Udah ngerti kan apa itu hosting dan domain? Dan yang paling penting, kita udah ngebangun proyek company profile sederhana buat "Mahir Company" di materi sebelumnya. Keren! Semua file HTML dan CSS dasarnya udah ada.

Sekarang, sebelum kita bener-bener "mindahin rumah" website Mahir Company kita ke "tanah kavling" di internet (baca: nge-deploy ke hosting), ada baiknya kita pastiin dulu kalau "rumah" kita ini udah rapi dan semua "barang bawaannya" udah siap. Mempersiapkan proyek ini dengan baik akan membuat proses deployment jadi lebih mulus.

Langkah-langkah ini akan memastikan proyek Mahir Company kita optimal untuk di-hosting:

1. Verifikasi Struktur Folder Proyek Mahir Company

Di materi sebelumnya (00a-studi-kasus-proyek-deploy.mdx), kita sudah membuat struktur folder berikut untuk proyek mahir-company:

mahir-company/
├── index.html
├── tentang.html
├── layanan.html
├── kontak.html
├── css/
│   └── style.css
└── images/ 
    └── (Misalnya, logo-mahir.png, banner-hero.jpg jika Anda sudah menambahkannya)

• index.html di Root: Pastikan file index.html ada di direktori utama (mahir-company/). Ini akan menjadi halaman default yang dibuka server.
• Folder Aset:
  • css/style.css: Semua styling global kita ada di sini.
  • images/: Jika Anda menambahkan gambar (logo, banner, ikon), pastikan semuanya tersimpan rapi di dalam folder ini.

Coba cek lagi folder mahir-company Anda, apakah strukturnya sudah sesuai?

2. Cek Kembali Path ke Aset (CSS, Gambar)

Ini langkah krusial! Semua link ke file CSS dan path ke gambar di file-file HTML (index.html, tentang.html, layanan.html, kontak.html) harus menggunakan path relatif yang benar.

• Link CSS: Di setiap file HTML, kita sudah menggunakan:

  <link rel="stylesheet" href="css/style.css">

  Ini benar karena style.css berada di dalam subfolder css/ relatif terhadap lokasi file HTML.

• Path Gambar: Jika Anda menambahkan gambar, misalnya logo-mahir.png di dalam folder images/ dan ingin menampilkannya di index.html, pastikan path-nya:

  <img src="images/logo-mahir.png" alt="Logo Mahir Company">

  Atau jika dari file HTML yang ada di subfolder (meskipun di contoh kita semua di root), Anda mungkin perlu ../images/logo-mahir.png.

Verifikasi Lokal: Buka setiap file HTML proyek mahir-company langsung di browser dari komputer Anda. Apakah semua halaman tampil dengan benar? Apakah CSS-nya teraplikasi? Jika Anda menambahkan gambar, apakah gambarnya muncul? Jika ada yang tidak beres, kemungkinan besar ada kesalahan pada path relatifnya. Perbaiki sebelum lanjut!

3. Pastikan index.html adalah Pintu Masuk Utama

Sudah kita pastikan di proyek Mahir Company bahwa halaman utama kita adalah index.html yang terletak di direktori root proyek. Ini standar yang akan dikenali oleh hampir semua platform hosting.

4. Bersihkan Kode Proyek (Opsional, tapi Disarankan)

Meskipun proyek Mahir Company kita masih sederhana, membiasakan diri untuk membersihkan kode itu baik:

• Hapus komentar console.log() yang mungkin Anda tambahkan saat mencoba JavaScript di <script>document.write(new Date().getFullYear())</script> (meskipun ini bukan untuk debugging, tapi untuk menampilkan tahun).
• Jika ada file atau gambar yang Anda buat tapi akhirnya tidak jadi digunakan, hapus dari folder proyek agar tidak ikut ter-deploy.

5. Validasi Kode HTML & CSS (Praktik Baik)

Untuk memastikan kualitas dan mengurangi potensi masalah tampilan lintas browser:

• Kunjungi validator.w3.org dan coba validasi kode dari index.html, tentang.html, layanan.html, dan kontak.html proyek Mahir Company.
• Kunjungi jigsaw.w3.org/css-validator/ dan validasi kode dari css/style.css. Perbaiki error atau warning yang signifikan jika ada.

6. Finalisasi dengan Git & GitHub

Di materi 00a-studi-kasus-proyek-deploy.mdx, kita sudah menginstruksikan untuk:

1. Inisialisasi Git di folder mahir-company.
2. Membuat file .gitignore.
3. Melakukan git add . dan git commit awal.
4. Membuat repositori mahir-company di GitHub.
5. Menghubungkan repositori lokal ke remote origin dan melakukan git push -u origin main.

Sebelum lanjut ke deployment, pastikan semua perubahan terakhir pada proyek Mahir Company Anda sudah di-commit dan di-push ke repositori mahir-company di GitHub.

Jika Anda melakukan pembersihan kode, validasi, atau penambahan gambar di langkah-langkah di atas, jangan lupa untuk:

git add .
git commit -m "Finalisasi proyek Mahir Company sebelum deployment"
git push origin main

Checklist Persiapan Deploy Proyek Mahir Company:

• index.html ada di root folder mahir-company?
• Struktur folder css/ dan images/ sudah benar?
• Semua path ke CSS dan gambar menggunakan path relatif yang benar dan berfungsi lokal?
• (Opsional) Kode sudah dibersihkan dari yang tidak perlu?
• (Opsional) Kode HTML & CSS sudah divalidasi?
• Semua perubahan terakhir sudah di-commit dan di-push ke repositori mahir-company di GitHub?

Jika semua poin di checklist sudah terpenuhi, proyek "Mahir Company" kita sekarang benar-benar siap untuk "mengudara"! Persiapan yang matang ini akan membuat proses deployment ke platform hosting pilihanmu menjadi jauh lebih lancar.

Mari kita lanjutkan untuk mendeploy website Mahir Company ini menggunakan GitHub Pages!