Mempercantik Tampilan Directory Listing di Web Server Nginx

Mempercantik Tampilan Directory Listing di Web Server Nginx. Tampilan default dari directory listing adalah teks berwarna hitam (biru untuk link), dan background putih. Nah, jika kalian merasa bahwa direktori tersebut penting dan sering diakses oleh pengunjung, tidak ada salahnya kalian mempercantik tampilannya.

Di Nginx sendiri ada dua cara untuk mempercantik tampilan directory listing. Namun keduanya tetap sama sama membutuhkan modul. Pertama adalah menggunakan modul http_addition_module, dan yang kedua menggunakan fancyindex.

http_addition_module
Cara pertama adalah menggunakan ngx_http_addition_module. Untuk menggunakan modul ini sangat mudah dan tidak perlu menginstall paket tambahan karena modulnya sudah ikut dicompile di nginx core secara default (bagi yang menginstall Nginx dari repository Ubuntu maupun CentOS).

Pertama, kita tambahkan file header.html dan footer.html pada direktori yang dapat diakses. Untuk nama file nya tidak harus header dan footer, ini hanya untuk memudahkan saja.
Berikut file nya:
Kedua file tersebut saya letakkan di direktori autoindex dan kedua file dapat diakses di alamat domain.com/autoindex/header.html dan domain.com/autoindex/footer.html. Oke selanjutnya kita edit file serverblocknya.
Berikut contoh konfigurasi di serverblocknya

location / {
            autoindex on;
            add_before_body /autoindex/header.html;
            add_after_body /autoindex/footer.html;

Autoindex nya harus on karena memang tujuan kita adalah mengaktifkan dir listing. Jika sudah, kita restart Nginx nya dengan perintah

sudo service nginx reload

Dan berikut hasilnya

Tentu saja file header dan footer diatas hanya sebagai referensi saja. Kalian bebas memodifikasi sesuka hati untuk tampilan dir listing yang lebih menarik.

fancyindex
Jika kalian tidak suka dengan cara pertama, kalian bisa gunakan modul fancyindex. hanya saja, untuk menggunakan modul ini kalian harus menginstall paket tambahan. Di Ubuntu, kalian harus menginstall nginx-extras terlebih dahulu

sudo apt-get install nginx-extras

Atau di CentOS kalian harus menginstall paketnya dengan perintah

yum install nginx-module-fancyindex

Lalu tambahkan baris kode berikut di serverblock untuk mengaktifkan fancyindex.

location / {
      fancyindex on;
      fancyindex_exact_size off;
}

Berikut adalah tampilan default fancyindex.

 Namun kalian bisa menggunakan theme buatan sendiri ataupun menggunakan tema yang banyak tersedia di GitHub, contohnya adalah theme dari Naereen.

Untuk pemasangannya bisa ikuti petunjuk di readme.md nya.

Sekedar informasi tambahan bahwa setelah menggunakan fancyindex, kalian tidak membutuhkan lagi baris kode autoindex on;. Oke mungkin itu saja tutorial kali ini, semoga bermanfaat. Jika ada yang ingin ditanyakan silahkan tinggalkan komentar.

External links:

• https://github.com/Naereen/Nginx-Fancyindex-Theme
• https://bukancoder.co/mengganti-tampilan-directory-listings-nginx-dengan-html-dan-css/
• https://github.com/aperezdc/ngx-fancyindex
• https://blog.linuxsec.org/mengaktifkan-nginx-fancyindex-di-server-ubuntu/
• http://nginx.org/en/docs/http/ngx_http_addition_module.html
• https://www.nginx.com/resources/wiki/modules/fancy_index/