Menulis ulang situs web saya dalam HTML dan CSS biasa

15 Januari 2025

Minggu ini, saya memutuskan untuk menulis ulang situs web saya menggunakan HTML dan CSS biasa. Ketika saya awalnya membuatnyaSaya menggunakan SvelteKit untuk kesederhanaan. Itu adalah proyek yang lebih menarik daripada yang saya harapkan ketika saya mulai bekerja, jadi saya ingin berbagi pemikiran saya tentang pengalaman tersebut.

Mengapa?

Ada beberapa alasan mengapa saya memutuskan untuk melakukan penulisan ulang. Salah satunya adalah saya saat ini sedang menganggur sehingga saya mempunyai banyak waktu luang untuk proyek sampingan. Hal lainnya adalah, seperti yang Anda lihat, situs web ini cukup sederhana jadi saya tidak memperoleh banyak manfaat dari penggunaan SvelteKit. Saya juga ingin memindahkan situs ini ke Cloudflare Pages, jadi ini saat yang tepat untuk melakukan beberapa perubahan.

Namun, alasan utama saya memutuskan untuk melakukan beberapa perubahan adalah karena saya menemukan bundler Javascript dan membangun ekosistem luar biasa
menjengkelkan untuk digunakan. Misalnya, salah satu hal yang harus saya lakukan saat menyiapkan situs web lama saya adalah membangun bagian blog dari kumpulan postingan penurunan harga. Saya berasumsi ini akan mudah dilakukan. SvelteKit dan Vite memungkinkan Anda melakukan pra-render situs web Anda dan saya memiliki sekumpulan file pada waktu pembuatan – saya hanya perlu menambahkan beberapa logika untuk mengubahnya. Sebaliknya, sangat sulit untuk menemukan cara untuk menangani sekumpulan file di pohon saya pada waktu pembuatan (izinkan saya mengingatkan bahwa saya bukan pengembang frontend dan mungkin saya melewatkan sesuatu yang jelas). Butuh waktu berjam-jam untuk mencari di Google dan mencoba berbagai opsi untuk menghasilkan potongan kode mengerikan yang berfungsi memuat konten file dan memberikannya ke halaman saya:

import type { PageLoad } from "./$types";

export const load: PageLoad = async ({ params }) => {
  const file = await import(
    `../../../../lib/assets/posts/${params.slug}.md`
  );

  return { content: file.default, ...file.metadata };
};

Saya lelah berurusan dengan hal-hal seperti ini karena sedikitnya keuntungan yang saya peroleh dari penggunaan SvelteKit. Jadi, saya akhirnya memutuskan sudah waktunya untuk menulis ulang.

Bagaimana?

Saya pikir menghabiskan terlalu banyak waktu di Hacker News memberi saya kesalahpahaman bahwa menulis situs web menggunakan HTML dan CSS biasa akan menjadi jalur yang relatif baik pada tahun 2025. Saya menghabiskan beberapa waktu mencari panduan atau cara “kanonik” untuk melakukan ini. dan menemukan bahwa sebenarnya tidak ada satu pun. Karena itu, saya memutuskan untuk memulai dari awal dengan direktori kosong dan melanjutkan dari sana. Situs web saya cukup kecil sehingga saya dapat membuat ulang banyak halaman menjadi HTML statis.

Namun, saya lebih suka menulis postingan blog di Markdown. Lebih mudah untuk menulis daripada HTML, saya dapat menarik postingan dari brankas Obsidian yang ada, dan menurut saya ini lebih nyaman. Oleh karena itu, saya memerlukan semacam skrip untuk mengubah postingan blog Markdown saya menjadi konten HTML. Saya menyelidiki beberapa opsi untuk ini dan menemukan Pandok. Pandoc adalah pengonversi dokumen universal untuk mengonversi format markup. Ini menyediakan perpustakaan dan CLI untuk mengkonversi dokumen dari Markdown ke HTML (bersama dengan banyak format lainnya).

Untuk menulis skrip, saya menginginkan sesuatu yang seringan mungkin tetapi lebih mudah digunakan daripada skrip Bash. Ini membawa saya ke Python dan sinar UV. Saya telah menemukan bahwa uv pada dasarnya mengabstraksi lingkungan Python dengan cara yang sangat nyaman untuk proyek kecil seperti ini. Menggunakan Python juga memberi saya cara gratis untuk melayani situs web saya menggunakan http.server modul. Terakhir, saya menulis Makefile kecil sehingga saya tidak perlu mengingat perintah serve.

Hasil

Itu hasil bukan itu paling revolusioner karena situs web saya pada awalnya sangat sederhana. Namun ukuran aset situs web saya yang “dikompilasi” berubah dari ~356kb menjadi ~88kb. Pohon proyek saya menjadi lebih sederhana dan satu-satunya Javascript di situs sekarang adalah menyorot kode. Saya juga lebih bahagia dengan keadaan ini. Saya merasa seperti saya memahami bagaimana dan mengapa situs saya bekerja (di mana sebelumnya saya memahami sebagian tetapi tidak keseluruhan misterinya).

Sebelumnya, dengan SvelteKit	Setelah itu, dengan HTML biasa

Langkah Selanjutnya

Ada dua kelemahan yang saya temukan sejauh ini. Saya ingin menyelidiki cara untuk memperbaiki atau meningkatkannya.

• Lebih banyak duplikasi kode. SvelteKit memiliki sistem komponen sehingga saya dapat menjadikan bilah navigasi sebagai komponen dan menggunakannya kembali. Ketika saya menghapusnya, saya harus menggandakan kode itu di beberapa tempat. Untungnya biayanya cukup kecil karena saya hanya memiliki empat halaman HTML. Saya sadar bahwa ada beberapa cara untuk melakukan ini menggunakan komponen web. Ini adalah sesuatu yang ingin saya pertimbangkan sebagai salah satu proyek sampingan saya berikutnya.
• Tidak ada pemuatan ulang langsung. Saya harus mematikan situs web untuk membangunnya kembali sekarang. Saya yakin ada alat yang dapat saya temukan untuk memperbaikinya, atau mungkin gunakan saja sesuatu seperti FastAPI yang memiliki pemuatan ulang otomatis. Namun sampai saya melakukan sesuatu, ada sedikit biaya tambahan setiap kali saya melakukan perubahan.

Selain itu, menurut saya repositori ini sekarang merupakan template yang cukup bagus untuk seseorang yang ingin membuat situs web sederhana dengan beberapa postingan blog Markdown tanpa menggunakan generator. Saya terkejut ketika memulai proyek ini betapa sulitnya menemukan panduan tentang cara menulis situs Anda tanpa kerangka kerja. Semoga ini dapat membantu beberapa orang lain.