Mengganti Tampilan Directory Listings Nginx dengan Sentuhan HTML dan CSS

Pada dasarnya Nginx secara default telah menonaktifkan fungsi autoindex. Namun jika kita ingin mengaktifkan fungsi tersebut dapat dilakukan. Kita hanya perlu menambahkan beberapa baris di nginx conf yang sebelumnya telah kita buat. Jadi di dalam tulisan ini, selain membahas tentang mengaktifkan fungsi autoindex pada Nginx, kita juga akan mengganti tampilan directory listings nginx dengan hiasan HTML dan CSS.



Mungkin sebelumnya kita pernah mendengar untuk mengganti tampilan directory listings nginx kita bisa menggunakan FancyIndex. Iya FancyIndex adalah salah satu opsi yang bisa digunakan untuk mengganti tampilan directory listings nginx. Tapi di artikel ini saya akan menggunakan http_addition_module. Yang secara default juga telah disediakan oleh nginx.

Di tulisan ini saya akan memberikan contoh menggunakan domain https://arc.bukancoder.co/. Subdomain tersebut saya buat untuk mirror beberapa tools yang sering saya gunakan atau saya butuhkan.

Konfigurasi nginx

Yang perlu kita lakukan hanya meenambahkan baris berikut di vHost nginx

Disini saya juga akan membagikan isi file header.txt dan footer.txt yang saya gunakan. Berikut isi file footer.txt



Isi file header.txt

Kedua file tersebut diletakkan di dir /Files. Contohnya arc.bukancoder.co/Files/

Setelah itu kita restart nginx

Sekarang kita coba akses website kita yang telah kita aktifkan fungsi autoindex nya yang telah kita hias dengan HTML dan CSS.



Hasilnya akan seperti di gambar ini

Untuk demo nya bisa langsung mengunjungi https://arc.bukancoder.co/

Semoga bermanfaat. Terima kasih

Salam,
Teguh Aprianto

1 comment
  1. Untuk di aplikasikan di Apache bagaimana? Dalam hal ini saya coba menggunakan localhost dengan bantuan XAMPP, sudah coba cari di Google tapi masih belum paham.

Leave a Reply

Your email address will not be published. Required fields are marked *

Daftar Newsletters

Dapatkan update terbaru dari Bukan Coder

You May Also Like

Membangun Sebuah Web Server Menggunakan Raspberry Pi

Halo semuanya, setelah sekian lama saya tidak pernah mem-publish artikel apapun di…

Membuat Server CDN Sendiri Menggunakan Nginx

Content Delivery Network atau yang biasanya disingkat dengan CDN, bisa dikatakan sebuah…

Instalasi & Konfigurasi Let's Encrypt SSL Menggunakan Nginx di CentOS 6

Berdasarkan informasi dari Wikipedia, Let’s Encrypt adalah certificate authority yang diluncurkan pada tanggal…

Instalasi & Konfigurasi WordPress + SSL Let’s Encrypt Menggunakan Nginx di CentOS 6

WordPress menurut saya adalah pilihan terbaik dari berbagai blog engine yang tersedia.…